一、Ajax:无刷新交互数据

1. Ajax的优缺点

优点

1.可以无需刷新页面与服务器端进行通信

2.允许你根据用户事件来更新部分页面内容

缺点

1.没有浏览历史，不能回退

2.存在跨域问题（同源）

3.SEO不友好

2. 案例准备

// 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.setHeader('Access-Control-Allow-Headers','*');
    //设置响应体
    response.send('hello ajax');
});
app.post('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('hello ajax POST');
});
app.all('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('hello ajax POST');
});
// 4.监听窗口启动服务
app.listen(8000,()=>{
    console.log("服务意见启动，8000端口监听中。。。")
});

3. 基本操作

//绑定事件内
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url
//xhr.open('GET','http://127.0.0.1:8000/server');
xhr.open('POST','http://127.0.0.1:8000/server');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','aaaaaa');
//3.发送
//xhr.send();
xhr.send('a=100&b=200&c=300');
//4.时间绑定 处理服务器端返回的结果
// on when 当。。。。的时候
//readystate 是xhr对象的属性 表示状态 0 1 2 3 4
//0 —— （未初始化）：(XMLHttpRequest)对象已经创建，但还没有调用open()方法。
//1 ——  (载入)：已经调用open() 方法，但尚未发送请求。
//2 —— (载入完成)： 请求已经发送完成 即已经调用send()方法
//3 —— (交互)：可以接收到部分响应数据。
//4 —— (完成)：已经接收到了全部数据，并且连接已经关闭。
xhr.onreadystatechange = function(){
    //判断 （服务端返回了所有的结果）
    if (xhr.readyState === 4){
        //判断响应状态码 200 404 403 401 500
        // 2xx 成功
        if(xhr.status >=200 && xhr.status < 300 ){
            //处理结果 行 头 空行 体
            // 1.响应行
            console.log(xhr.status);//状态码
            console.log(xhr.statusText);//状态字符串
            console.log(xhr.getAllResponseHeaders());// 响应头
            console.log(xhr.response);//响应体
        }else{
            
        }
    }
}

4. Ajax 设置请求参数

在url后缀参数就行 如：

http://127.0.0.1:8000/server?a=100&b=200&c=300

5. 服务端响应JSON数据

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.all('/json-server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('hello ajax POST');
    //响应一个数据
    const data = {
        name : 'aaaaaa'
    };
    //对对象进行字符串转换
    let str = JSON.stringfy(data);
});
// 4.监听窗口启动服务
app.listen(8000,()=>{
    console.log("服务意见启动，8000端口监听中。。。")
});

//绑定事件内
//1.创建对象
const xhr = new XMLHttpRequest();
//设置响应体数据类型
xhr.responseType = 'json';
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/json-server');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','aaaaaa');
//3.发送
xhr.send();
//4.时间绑定 处理服务器端返回的结果
// on when 当。。。。的时候
//readystate 是xhr对象的属性 表示状态 0 1 2 3 4
xhr.onreadystatechange = function(){
    //判断 （服务端返回了所有的结果）
    if (xhr.readyState === 4){
        //判断响应状态码 200 404 403 401 500
        // 2xx 成功
        if(xhr.status >=200 && xhr.status < 300 ){
            //console.log(xhr.response);//响应体
            //手动对数据转化
            let data = JSON.parse(xhr.response);
            console.log(data);
            //自动转换
            console.log(xhr.response);
        }else{
            
        }
    }
}

6. nodemon自动重启工具安装

全局安装与开发环境安装

npm install -g nodemon

npm install --save-dev nodemon

7. IE缓存问题解决

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

//绑定事件内
//1.创建对象
const xhr = new XMLHttpRequest();
//设置响应体数据类型
xhr.responseType = 'json';
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());
//3.发送
xhr.send();
//4.时间绑定 处理服务器端返回的结果
// on when 当。。。。的时候
//readystate 是xhr对象的属性 表示状态 0 1 2 3 4
xhr.onreadystatechange = function(){
    //判断 （服务端返回了所有的结果）
    if (xhr.readyState === 4){
        //判断响应状态码 200 404 403 401 500
        // 2xx 成功
        if(xhr.status >=200 && xhr.status < 300 ){
            console.log(xhr.response);//响应体
            
        }else{
            
        }
    }
}

8. Ajax 请求超时与网络异常处理

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/delay',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    setTimeout(()=>{
        //设置响应体
        response.send('延时响应');
    },3000)
    //设置响应体
    response.send('hello ie');
});
// 4.监听窗口启动服务
app.listen(8000,()=>{
    console.log("服务意见启动，8000端口监听中。。。")
});

let xhr = null; //全局变量
//绑定事件内
//1.创建对象
xhr = new XMLHttpRequest();
//超时设置 2s 设置
xhr.timeout = 2000;
xhr.ontimeout = function(){
    alert('网络异常，请稍后重试！！');
}
//网络异常回调
xhr.onerror = function(){
    alert('你的网络似乎出现了一些问题！');
}
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/delay');
//3.发送
xhr.send();
//4.时间绑定 处理服务器端返回的结果
// on when 当。。。。的时候
//readystate 是xhr对象的属性 表示状态 0 1 2 3 4
xhr.onreadystatechange = function(){
    //判断 （服务端返回了所有的结果）
    if (xhr.readyState === 4){
        //判断响应状态码 200 404 403 401 500
        // 2xx 成功
        if(xhr.status >=200 && xhr.status < 300 ){
            console.log(xhr.response);//响应体
        }else{
            
        }
    }
}

9. Ajax 取消请求

xhr.abort();//let xhr = null; //全局变量

10. Ajax 重复请求问题

let isSending = false; //全局变量，是否正在发送Ajax请求
let xhr = null; //全局变量

//绑定事件内
//1.创建对象
xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/delay');
//3.发送
xhr.send();
//4.时间绑定 处理服务器端返回的结果
// on when 当。。。。的时候
//readystate 是xhr对象的属性 表示状态 0 1 2 3 4
xhr.onreadystatechange = function(){
    //判断表示变量
    if(isSending) xhr.abort();//如果正在发送，则取消该请求，创建一个新的请求
    //判断 （服务端返回了所有的结果）
    if (xhr.readyState === 4){
        //修改标识变量
        isSending = true;
        //判断响应状态码 200 404 403 401 500
        // 2xx 成功
        if(xhr.status >=200 && xhr.status < 300 ){
            isSending = false;
            console.log(xhr.response);//响应体
        }else{
            
        }
    }
}