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());

本文链接：https://www.cnblogs.com/actorhuang/p/14103284.html

Ajax运行原理及实现