Ajax运行原理及实现
Ajax运行原理及实现
Ajax应用场景
- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
- 搜索框提示文字下拉列表
Ajax实现步骤
//创建ajax对象
var xhr = new XMLHttpRequest();
//告诉ajax要向哪发送请求，以什么方式发送
//1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/first');
//发送请求
xhr.send();
//获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
}
服务器端响应的数据格式
在真实的项目中，服务器大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面上。
在http请求与相应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。
JSON.parse() //将json字符串转换为json对象
请求参数传递
- GET请求方式
xhr.open('get', 'http://www.example.com?name=zs&password=123');
- POST请求方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('name=zs&password=123')
请求参数的格式
- application/x-www-form-urlencoded
name=zs&age=18&sex=男
2.application/json
{name:'zs', age:'18', sex:'男'}
在请求头中指定Content-Type属性的值是application/json，告诉服务器当前请求参数的格式是json。
JSON.stringify()//将json对象转换为json字符串
获取服务器端的响应
Ajax状态码
在创建ajax对象，配置ajax对象，发送请求，以及接受完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码
0：请求未初始化（还没有调用open()）
1：请求已经建立，但是还没有发送（还没有调用send()）
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获取并使用服务器的响应了
xhr.readyState //获取Ajax状态码
onreadystatechange事件
两种获取服务器端响应方式的区别
| 区别描述 | onload事件 | onreadystatechange事件 |
|---|---|---|
| 是否兼容IE低版本 | 不兼容 | 兼容 |
| 是否需要判断Ajax状态码 | 不需要 | 需要 |
| 被调用次数 | 一次 | 多次 |
Ajax错误处理
- 网络畅通，服务器能接收到请求，服务器返回的结果不是预期结果
可以判断服务器端返回的状态码，分别进行处理。xhr.status获取http状态码
- 网络畅通，服务器端没有接收到请求，返回404状态码
检查请求地址是否错误
- 网络畅通，服务器端能接收到请求，服务器端返回500状态码
服务器端错误，找后端程序员进行沟通
- 网络中断，请求无法发送到服务器端
会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理
Ajax状态码与http状态码的区别
Ajax状态码：表示Ajax请求的过程状态，ajax对象返回的
http状态码：表示请求的处理结果，是服务器端返回的
低版本IE浏览器的缓存问题
问题：在低版本的IE浏览器中，Ajax请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。及时服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。
解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。
xhr.open('get', 'http://www.example.com?t='+Math.random());
