Home Ajax

# express 基本使用

# package.json

{
  "name": "ajax",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.3"
  }
}

# server

//1. 引入 express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/', (request, response)=>{
    // 设置响应
    response.send('HELLO EXPRESS');
});
//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
});
# 原生 AJAX GET


# GET


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX GET 请求</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #90b;
    }
  </style>
</head>
<body>
  <button>点击发送请求</button>
  <div id="result"></div>
  <script>
    // 获取 button 元素
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById("result");
    // 绑定事件
    btn.onclick = function () {
      //1. 创建对象
      const xhr = new XMLHttpRequest();
      //2. 初始化 设置请求方法和 url
      xhr.open('GET', 'http://127.0.0.1:8000/server?username=nekoaimer&age=16');
      //3. 发送
      xhr.send();
      //4. 事件绑定 处理服务端返回的结果
      //on  when 当.... 时候
      //readystate 是 xhr 对象中的属性，表示状态 0 1 2 3 4
      //change  改变
      xhr.onreadystatechange = function () {
        // 判断 (服务端返回了所有的结果)
        if (xhr.readyState === 4) {
          // 判断响应状态码 200  404  403 401 500
          // 2xx 成功
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            // 处理结果  行 头 空行 体
            // 响应 
            console.log(xhr);
            console.log(xhr.status);// 状态码
            console.log(xhr.statusText);// 状态字符串
            console.log(xhr.getAllResponseHeaders());// 所有响应头
            console.log(xhr.response);// 响应体
            // 设置 result 的文本
            result.innerHTML = xhr.response;
          } else {
            console.log('请求失败~');
          }
        }
      }
    }
  </script>
</body>
</html>
# server


//1. 引入 express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX - 2');
});
;
//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});
# 原生 AJAX POST


# POST


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX POST 请求</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #903;
    }
  </style>
</head>
<body>
  <div id="result"></div>
  <script>
    // 获取元素对象
    const result = document.getElementById("result");
    // 绑定事件
    result.addEventListener("mouseover", function () {
      //1. 创建对象
      const xhr = new XMLHttpRequest();
      //2. 初始化 设置类型与 URL
      xhr.open('POST', 'http://127.0.0.1:8000/server');
      // 设置请求头
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.setRequestHeader('name', 'nekoaimer');
      //3. 发送
      xhr.send('username=nekoaimer&password=1234567');
      // xhr.send('a:100&b:200&c:300');
      // xhr.send('1233211234567');
      //4. 事件绑定
      xhr.onreadystatechange = function () {
        // 判断
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            // 处理服务端返回的结果
            result.innerHTML = xhr.response;
            console.log(xhr);
          }
        }
      }
    });
  </script>
</body>
</html>
# server


//1. 引入 express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX - GET');
});
// 4.post 请求
app.post('/server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX - POST');
});
// 5. 可以接收任意类型的请求 
app.all('/server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    response.send('HELLO AJAX POST');
});
// 6. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});
# JSON


# JSON


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON响应</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #89b;
    }
  </style>
</head>
<body>
  <div id="result"></div>
  <script>
    const result = document.getElementById('result');
    // 绑定键盘按下事件
    window.onkeydown = function () {
      // 发送请求
      const xhr = new XMLHttpRequest();
      // 设置响应体数据的类型
      xhr.responseType = 'json';
      // 初始化
      xhr.open('GET', 'http://127.0.0.1:8000/json-server');
      // 发送
      xhr.send();
      // 事件绑定
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            // console.log(xhr.response);
            // result.innerHTML = xhr.response;
            // 1. 手动对数据转化 
            // let data = JSON.parse((xhr.response));
            // console.log(data);
            // result.innerHTML = xhr.response.name;
            // 2. 自动转换 (设置了响应体数据的类型)
            console.log(xhr.response);
            result.innerHTML = xhr.response.name;
          }
        }
      }
    }
  </script>
</body>
</html>
# server


//1. 引入 express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX - GET');
});
// 4.post 请求
app.post('/server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX - POST');
});
// 5. 可以接收任意类型的请求 
app.all('/server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    response.send('HELLO AJAX POST');
});
// 6.JSON 响应
app.all('/json-server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    // response.send('HELLO AJAX JSON');
    const data = {
        name: 'nekoaimer'
    };
    // 对对象进行字符串转换
    let str = JSON.stringify(data);
    // 设置响应体
    response.send(str);
});
// 7. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});
# nodemon


    

  • 

    官网 ：https://nodemon.io/
    

    • 

  • 

    安装 ：
    

    npm
    npm install -g nodemon
    • 

  • 

    运行
    

    npm
    nodemon xxx.js
    • 



# IE 缓存问题


# IE 时间戳解决


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IE缓存问题</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #258;
    }
  </style>
</head>
<body>
  <button>点击发送请求</button>
  <div id="result"></div>
  <script>
    const btn = document.getElementsByTagName('button')[0];
    const result = document.querySelector('#result');
    btn.addEventListener('click', function () {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", 'http://127.0.0.1:8000/ie?t=' + Date.now());
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            result.innerHTML = xhr.response;
          }
        }
      }
    })
  </script>
</body>
</html>
# server


//1. 引入 express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX - GET');
});
// 4.post 请求
app.post('/server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX - POST');
});
// 5. 可以接收任意类型的请求 
app.all('/server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    response.send('HELLO AJAX POST');
});
// 6.JSON 响应
app.all('/json-server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    // response.send('HELLO AJAX JSON');
    const data = {
        name: 'nekoaimer'
    };
    // 对对象进行字符串转换
    let str = JSON.stringify(data);
    // 设置响应体
    response.send(str);
});
// 7. 可以接收任意类型的请求 
app.all('/ie', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    response.send('HELLO AJAX IE');
});
//8. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});
# 超时与网络异常


# DELAY


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>请求超时与网络异常</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #90b;
    }
  </style>
</head>
<body>
  <button>点击发送请求</button>
  <div id="result"></div>
  <script>
    const btn = document.getElementsByTagName('button')[0];
    const result = document.querySelector('#result');
    btn.addEventListener('click', function () {
      const xhr = new XMLHttpRequest();
      // 超时设置 2s 设置
      // xhr.timeout = 2000;
      xhr.timeout = 2400;
      // 超时回调
      xhr.ontimeout = function () {
        console.log("网络异常, 请稍后重试!!");
      }
      // 网络异常回调
      xhr.onerror = function () {
        console.log("你的网络似乎出了一些问题!");
      }
      xhr.open("GET", 'http://127.0.0.1:8000/delay');
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            result.innerHTML = xhr.response;
          }
        }
      }
    })
  </script>
</body>
</html>
# server


//1. 引入 express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - GET');
});
// 4.post 请求
app.post('/server', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - POST');
});
// 5. 可以接收任意类型的请求 
app.all('/server', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX POST');
});
// 6.JSON 响应
app.all('/json-server', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO AJAX JSON');
	const data = {
		name: 'nekoaimer'
	};
	// 对对象进行字符串转换
	let str = JSON.stringify(data);
	// 设置响应体
	response.send(str);
});
// 7. 可以接收任意类型的请求 
app.all('/ie', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX IE');
});
// 8. 延时响应
app.all('/delay', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	setTimeout(() => {
		response.send('HELLO AJAX DELAY');
	}, 2333)
});
// 9. 监听端口启动服务
app.listen(8000, () => {
	console.log("服务已经启动, 8000 端口监听中....");
});
# 取消请求


# abort


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>取消请求</title>
</head>
<body>
  <button>点击发送</button>
  <button>点击取消</button>
  <script>
    // 获取元素对象
    const btns = document.querySelectorAll('button');
    let xhr = null;
    btns[0].onclick = function () {
      xhr = new XMLHttpRequest();
      xhr.open("GET", 'http://127.0.0.1:8000/delay');
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            console.log(xhr.response);
          }
        }
      }
    }
    // abort
    btns[1].onclick = function () {
      xhr.abort();
    }
  </script>
</body>
</html>
# server


//1. 引入 express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - GET');
});
// 4.post 请求
app.post('/server', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - POST');
});
// 5. 可以接收任意类型的请求 
app.all('/server', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX POST');
});
// 6.JSON 响应
app.all('/json-server', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO AJAX JSON');
	const data = {
		name: 'nekoaimer'
	};
	// 对对象进行字符串转换
	let str = JSON.stringify(data);
	// 设置响应体
	response.send(str);
});
// 7. 可以接收任意类型的请求 
app.all('/ie', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX IE');
});
// 8. 延时响应
app.all('/delay', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	setTimeout(() => {
		response.send('HELLO AJAX DELAY');
	}, 1000)
});
// 9. 监听端口启动服务
app.listen(8000, () => {
	console.log("服务已经启动, 8000 端口监听中....");
});
# 重复请求问题


# isSending


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>重复请求问题</title>
</head>
<body>
  <button>点击发送</button>
  <button>点击取消</button>
  <script>
    // 获取元素对象
    const btns = document.querySelectorAll('button');
    let xhr = null;
    // 标识变量
    let isSending = false; // 是否正在发送 AJAX 请求
    btns[0].onclick = function () {
      // 判断标识变量
      if (isSending) xhr.abort();// 如果正在发送，则取消该请求，创建一个新的请求
      xhr = new XMLHttpRequest();
      // 修改 标识变量的值
      isSending = true;
      xhr.open("GET", 'http://127.0.0.1:8000/delay');
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          // 修改标识变量
          isSending = false;
        }
      }
    }
    btns[1].onclick = function () {
      xhr.abort()
    } 
  </script>
</body>
</html>
# server


//1. 引入 express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - GET');
});
// 4.post 请求
app.post('/server', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('HELLO AJAX - POST');
});
// 5. 可以接收任意类型的请求 
app.all('/server', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX POST');
});
// 6.JSON 响应
app.all('/json-server', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	// response.send('HELLO AJAX JSON');
	const data = {
		name: 'nekoaimer'
	};
	// 对对象进行字符串转换
	let str = JSON.stringify(data);
	// 设置响应体
	response.send(str);
});
// 7. 可以接收任意类型的请求 
app.all('/ie', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	response.send('HELLO AJAX IE');
});
// 8. 延时响应
app.all('/delay', (request, response) => {
	// 设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	setTimeout(() => {
		response.send('HELLO AJAX DELAY');
	}, 1000)
});
// 9. 监听端口启动服务
app.listen(8000, () => {
	console.log("服务已经启动, 8000 端口监听中....");
});

      

          
      

  


   


    

  
    
      
    
    Update on
    
  
  
      
        
      
      Views
      
      times
  



      


  
  
Give me a cup of [coffee]~(￣▽￣)~*

  

      
      

        Nico Niconi WeChat Pay
        
WeChat Pay

      

      
      

        Nico Niconi Alipay
        
Alipay