原生 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);
}
}
- IE 缓存问题
- 问题:在一些浏览器中(IE),由于缓存机制的存在,ajax 只会发送的第一次请求,剩 余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
- 解决方式:浏览器的缓存是根据 url 地址来记录的,所以我们只需要修改 url 地址 即可避免缓存问题
xhr.open(“get”,"/testAJAX?t="+Date.now());
- 请求超时 网络异常(offine 断网调试)
- 超时设置 2秒
xhr.timeout = 2000;
- 延时响应设置 setTimeout( ()=>{ 这里面添加操作
},3000)- 超时回调 xhr.ontimeout = function(){}
- 网络异常回调 xhr.onerror = function(){ alert(‘网络故障’)}
- 请求取消 abort() 方法
xhr.abort();
- 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>
- 存到服务器中的数据必须是字符串形式
使用 JSON.stringify() 将对象型数据转化为字符串 同时使用 JSON.parse() 将字符串转化为对象型
- 服务器响应一个数据的设置方法
> const data = { name : fangjjing }
> let str = JSON.stringify(data);
> response.send(str);
- 客服端处理数据的俩种方法:
1 . 手动转化:
> let data = JSON.parse()
> console.log(data);
- 自动转化 设置响应体数据类型 之后直接将响应体结果响应出来即可
xhr.responseType = 'json';
$('div').html((xhr.response).name);
- 跨域 (解决方法有 JSONP 和 CORS)建议使用CORS 方便实用 只需在响应头设置如下代码就行 :
// 设置响应头 设置允许跨域 用 Cors 来解决跨域问题
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
response.setHeader('Access-Control-Allow-Method', '*')