原生ajax核心是XMLHttpRequest这个对象,用于于服务器进行交互。
基础使用步骤:
// 1. 创建XMLHttpRequest对象 let xhr = new XMLHttpRequest(); // 2. 配置请求信息 // 参数 method 是请求方法,url是服务器接口地址 xhr.open(method,url); // 3. 配置请求头 (可以不配置,主要看接口的要求) xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') // 4. 发送请求 // 如果是get 请求,则没有body xhr.send(body) // 5. 处理响应结果 xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ let text=xhr.responseText; // 文本形式接收响应结果 let xml=xhr.responseXML; // xml形式接收响应结果 let resultJson = xhr.response; // Json格式的响应(需要后台支持) let result = JSON.parse(xhr.response) //手动转成Json } } // 6.其他的一些配置 // 请求超时 xhr.timeout=2000 xhr.ontimeout = function(){ alert("网络异常, 请稍后重试!!"); } //网络异常回调 xhr.onerror = function(){ alert("你的网络似乎出了一些问题!"); } // 取消请求 xhr.abort()
请求缓存问题(不发送新请求):
因为一些浏览器的缓存问题,ajax请求只会使用第一次的请求,后续直接使用第一次请求的缓存结果。因此,解决方法是在请求接口后面添加动态的数据参数,比如时间戳
// demo // Date.now() 时间戳 xhr.open('get','/api/info?t='+Date.now());
响应状态:
xhr.readyState
值 | 状态 | 描述 |
0 | UNSET | xhr.readyState 代理被创建,但是上面配置都没有 |
1 | OPENED | open方法被调用 |
2 | HEADERS_RECEIVED | send()方法被调用,可以获取headers信息和状态 |
3 | LOADING | 正在接受服务器传来的数据,即数据传输中 |
4 | DONE | 数据接收完毕(成功或失败) |
重复请求问题
当发送请求还没完成响应完成,又发出新的请求的解决方法,设置一个变量标记
//获取元素对象 const btns = document.querySelectorAll('button'); let xhr = null; //标识变量 let isSending = false; // 是否正在发送AJAX请求 btns[0].onclick = function(){ //判断标识变量 if(isSending) xhr.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求 xhr = new XMLHttpRequest(); xhr.open("GET",'/api'); xhr.send(); //修改 标识变量的值 isSending = true; xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ //修改标识变量 isSending = false; } } }