1.Ajax 简介
1.1Ajax 是什么？
Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。
1.2Ajax 技术应用场景？
Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用,例如:
商品系统。
评价系统。
地图系统。
……
AJAX可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能直接进行跨域访问。
1.3Ajax 技术时序模型分析？
传统Web应用中的，同步请求应用时序模型分析，如图-3所示：
在图-3中，客户端向服务端向服务端发送请求需要等待服务端的响应结果，服务端返回数据以后，客户端可以继续发送请求。
基于Ajax技术的Web异步请求响应模型如图-4所示：
在图-4中，客户端可以向服务端发送异步请求，客户端无需等待服务端的响应结果，可以不断向服务端发送请求。
2.Ajax 快速入门
2.1 Ajax 请求响应过程分析
所有的Ajax 请求都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新，如图-4所示：
2.2 Ajax 编程基本步骤分析
第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)
第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。
第三步：创建与服务端的连接
第四步：发送异步请求实现与服务端的通讯
第五步：通过回调（callback）函数，获得响应结果并进行数据更新.(非阻塞)
2.3. Ajax Get 请求操作实现
基于ajax技术中的XMLHttpRequest对象，向服务端发起异步Get请求，关键代码分析如下：
function doAjaxGet(url,params,callback){
//1.创建XmlHttpRequest对象
var xhr=new XMLHttpRequest();
//2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)
xhr.onreadystatechange=function(){//callback(回调函数)
//基于xhr对象获取的通讯状态，对响应数据进行处理
if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
//服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果
callback(xhr.responseText);
}
}
//3.创建与服务端的连接
xhr.open("GET",url+"?"+params,true);//true表示异步
//4.发送请求
xhr.send(null); //Get请求，send方法不传内容
//5.对响应结果进行处理(在回调函数中处理)。
}
2.3.Ajax Post 请求操作实现
基于ajax中XMLHttpRequest对象，向服务端发起异步Post请求。对于post请求在发送请求执行需要设置请求头,见红色代码部分。
function doAjaxPost(url,params,callback){
//1.创建XmlHttpRequest对象
var xhr=new XMLHttpRequest();
//2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程.
xhr.onreadystatechange=function(){//callback(回调函数)
//基于xhr对象获取的通讯状态，对响应数据进行处理
if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
//服务端响应的结果会传递给XHR对象，
//我们可以借助xhr.responseText获取响应结果
callback(xhr.responseText);
}
}
//3.创建与服务端的连接
xhr.open("POST",url,true);//true表示异步
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//4.发送请求
xhr.send(params); //post请求将参数写到send方法
//5.对响应结果进行处理(在回调函数中处理)。
}
给个关注不迷路哦!或者点击收藏也可以的哦!