ajax之常用处理事件

1.请求超时或请求异常处理

timeout //请求超时回调

onerroe //请求异常回调

const btn = document.getElementsByTagName("button")[0];
const result = document.getElementById("result");
btn.addEventListener("click",() => {
const xhr = new XMLHttpRequest();
//请求时间设置(超时设置)   2s
xhr.timeout = 2000;
//请求超时回调
xhr.ontimeout = () => {
    alert("网络异常，请稍后再试")
}
//请求异常回调
xhr.onerror = () => {
    alert("你的网络连接失败")   
}
xhr.open("get","http://192.168.0.102:8003/server")
    xhr.send();
    xhr.onreadystatechange = () => {
    if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300){
                result.innerHTML = xhr.response
            }
        }
    }
}) 

//引用express模块
const express = require('express');
//实例化对象
const app = express();
//规划路由
//接受所有请求 如果设置自定义请求头需要在all事件接收
app.get('/server',(resquset,response)=>{
    // console.log(response)
    //设置允许自定义请求头
    // response.setHeader('Access-Control-Allow-Headers','*')
    //设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应体
    setTimeout(() => {
        response.send('延迟响应');
    },3000)
})
//监听服务启动
app.listen(8003,()=>{
    console.log('请求超时准备完毕')
})

2.手动取消请求

abort //取消当前请求

const btn1 = document.getElementsByTagName("button")[0];
const btn2 = document.getElementsByTagName("button")[1];
const result = document.getElementById("result");
let xhr;
btn1.addEventListener("click",() => {
    xhr = new XMLHttpRequest();
    xhr.open("get","http://192.168.0.102:8004/server")
    xhr.send();
    xhr.onreadystatechange = () => {
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300){
                result.innerHTML = xhr.response
            }
        }
    }
}) 
btn2.addEventListener("click", () => {
//手动取消请求
    xhr.abort()
})

3.重复发送请求(节流)

const btn1 = document.getElementsByTagName("button")[0];
const result = document.getElementById("result");
let xhr,
isSending = false; //是否正在发送请求
btn1.addEventListener("click",() => {
    /***
    * 节流执行顺序: 
    * 1. 当第一次点击xhr没有值为undefined，isSending为false
    * 2. 当第二次点击xhr是全局变量没有释放，所以它还是请求方式对象，还是可以使用取消请求方法
    *    而isSending状态因上次请求还没有完成，所以为true,所以执行了xhr.abort方法
    */
    if(isSending) xhr.abort() //当请求状态没有被修改时，则取消上一次请求 
    xhr = new XMLHttpRequest();
    isSending = true;
    xhr.open("get","http://192.168.0.102:8005/server")
    xhr.send();
    xhr.onreadystatechange = () => {
        if(xhr.readyState == 4){
            isSending = false //请求结束后，改变状态，我们不能判断每次请求是否成功，所以不能在放在判断请求是否成功之中。
            if(xhr.status >= 200 && xhr.status < 300){
                result.innerHTML = xhr.response
            }
        }
    }
}) 

//引用express模块
const express = require('express');
//实例化对象
const app = express();
//规划路由
//接受所有请求 如果设置自定义请求头需要在all事件接收
app.get('/server',(resquset,response)=>{
    // console.log(response)
    //设置允许自定义请求头
    // response.setHeader('Access-Control-Allow-Headers','*')
    //设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应体
    //设置传送数据 手动数据转json
    let obj = {
        name : 'asen',
        age: '18',
    }
    obj = JSON.stringify(obj)
    //send方法中只能传输 字符串 和 buffer（0,1组成的数据）
    setTimeout(() => {
        response.send('响应');
    },3000)
})
//监听服务启动
app.listen(8005,()=>{
    console.log('重复请求准备完毕')
})