Ajax 常见问题解决（IE缓存问题，请求超时，网络异常，请求取消，请求重复迭代，JSON数据转化，跨域）

原生 Ajax操作方法 ：

1) 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
2) 设置请求信息
xhr.open(method, url);
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3) 发送请求
xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用
4) 接收响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
	}
}

1. IE 缓存问题

1. 问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩 余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
2. 解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址 即可避免缓存问题

xhr.open(“get”,"/testAJAX?t="+Date.now());

2. 请求超时 网络异常（offine 断网调试）

1. 超时设置 2秒 xhr.timeout = 2000;
2. 延时响应设置 setTimeout( ()=>{ 这里面添加操作
   }，3000)
3. 超时回调 xhr.ontimeout = function(){}
4. 网络异常回调 xhr.onerror = function(){ alert(‘网络故障’)}

3. 请求取消 abort() 方法

xhr.abort();

4. Ajax 请求重复迭代发送问题 (减轻服务器的压力)

<button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        //标识变量
        let isSending = false; // 是否正在发送AJAX请求

        btns[0].onclick = function () {
            //判断标识变量
            if (isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
            x = new XMLHttpRequest();
            //修改 标识变量的值
            isSending = true;
            x.open("GET", 'http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    //修改标识变量
                    isSending = false;
                }
            }
        }
    </script>

5. 存到服务器中的数据必须是字符串形式 使用 JSON.stringify() 将对象型数据转化为字符串 同时使用 JSON.parse() 将字符串转化为对象型

1. 服务器响应一个数据的设置方法

> const data = { name : fangjjing } 
> let str = JSON.stringify(data)；
> response.send(str)；

2. 客服端处理数据的俩种方法：
   1 . 手动转化：

>  let data = JSON.parse()
> console.log(data)；

2. 自动转化 设置响应体数据类型 之后直接将响应体结果响应出来即可

xhr.responseType = 'json'；

$('div').html((xhr.response).name)；

6. 跨域 （解决方法有 JSONP 和 CORS）建议使用CORS 方便实用 只需在响应头设置如下代码就行 ：

// 设置响应头 设置允许跨域  用 Cors 来解决跨域问题
    response.setHeader('Access-Control-Allow-Origin', '*'); 
    response.setHeader('Access-Control-Allow-Headers', '*');
    response.setHeader('Access-Control-Allow-Method', '*')