Ajax基本使用

由于Ajax是基于node的环境下进行的，所以我们在使用前先有确保已经下载node
同时我们还需要进行下载express $ npm i express
在script标签下进行书写

const xhr = new XMLHttpRequest();
    //设置请求方法和URL
    xhr.open('GET', 'http://127.0.0.1:3000/server');
    //请求发送
    xhr.send();
    //事件绑定   处理服务端返回的结果
    //onreadystatechange 当状态改变的时候触发
    //状态主要包括：0,1(open方法已经完成)，2(send方法完成)，3（返回了部分的结果），4（所以结果全部返回）
    xhr.onreadystatechange = () => {
    //判断状态
    if (xhr.readyState === 4) {
        //判断返回状态  status方法的返回值为状态码   200，404，403，500 ....
        if (xhr.status === 200) {
            box.innerHTML = xhr.response;
            }
        }
    }

上面是get请求
post请求的发送也是和get请求类似不过参数的传递有所不同

**

添加参数：

**
get请求在URL的末端加？（问号）后添加参数
post请求在send内添加参数

并且在发送post请求是我们的服务端js上也有与之对应的post 才可以发送成功
所以我们在服务端可以写全部请求都可以进行响应：
app.all(’/…’,(req,res)=> {
…
}))

**

设置请求头信息：

**
xhr.setRequestHeader(’ ‘,’ ');将添加的请求头对应添加，同时我们也可以自定义头信息

**

工具：

**
服务器自动重新启动 nodemon
在我们对ji文件进行修改保存后就会重新启动服务器
下载：
& npm i -g nodemon

对服务端进行重新启动
&nodemon xxx.js

**

IE缓存问题：

**
在我们进行新的一次请求后在IE会把上一次的返回结果保存在缓存中，在我们发送新的请求时IE浏览器会显示缓存中的内容
**

解决：

**
在我们open中的URL字符串后添加一个时间戳，+Date.now()
原理：由于每一刻的时间戳都不同，在URl中相当于每次请求的地址也不同，IE浏览器会认为是一个新的地址对服务端进行发送请求

**

请求超时与网络异常：

**
**

超时设置：

**
xhr.timeout = 2000; //请求时间超过2秒自动取消请求
**

超时回调：

**
xhr.ontimeout = function() {
…
}
**

网络异常回调：

**
xhr.onerror = function() {
…
}

**

手动取消请求：

**
xhr.abort()

**

重复请求问题：

**
原理：
在事件回调函数外创建一个标识变量，初始值为false。在回调函数内在发送请求是将这个标识变量的值赋为true，在请求完成再次进行对标识变量进行赋值为false，在刚刚进入事件回调函数是进行判断标识变量的值，如果正在请求，就立即停止（xhr.abort()）,这个就可以解决重复请求问题