一、什么是ajax？
定义：Asynchronous JavaScript and XML，意思是异步JS和XML。是一种异步请求数据的web开发技术，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。
解释下异步，异步是相对于同步来说的，同步即同时进行（累积多了就排队，一个一个执行，必须等上一个结束，才能到下一个），而异步就是执行到我了，我去旁边继续执行等结果，后面排队的继续不用等我结果出来再执行。
这是对于ajax的特点来设计的，因为ajax对后端数据的请求需要时间，而这个时间不利用起来就是浪费。当然，如果必须要等前一个的结果怎么办，这就使用到JS中的重要部分——回调函数了，其实回调在JS中应用很多，只是我们对它没有概念而已，像点击事件执行的就是回调（先绑定事件，只有在点击发生时，才会执行）。那么ajax也一样，先请求数据，只有在状态改变时才会执行接下来的（这个状态包括请求成功和请求失败）。
作用：提高用户体验，减少网络数据的传输量
二、ajax常见运用场景
表单验证是否登录成功、百度搜索下拉框提示和快递单号查询等等。
三、Ajax原理是什么
Ajax请求数据流程，其中最核心的依赖是浏览器提供的对象xhr，它扮演的角色相当于秘书，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XHR返回来的数据再渲染页面
四、AJAX涉及的知识点
1、readyState：返回当前文档的载入状态
0-(未初始化)还没有调用send()方法
1-(载入)已调用send()方法，正在发送请求
2-(载入完成)send()方法执行完成，已经接收到全部响应内容
3-(交互)正在解析响应内容
4-(完成)响应内容解析完成，可以在客户端调用了
2、status：HTTP状态码
1XX：信息性状态码 ，表示接收的请求正在处理
2XX：成功状态码 ， Ok，表示请求正常处理
3XX：重定向状态码 ，表示需要附加操作来完成请求
4XX：客户端错误状态 ，表示服务器无法处理请求
5XX：服务器错误状态 ，表示服务器处理请求出错
3、服务器反馈的内容：（数据）
responseText：做为响应主体被返回的内容
responseXML：包含响应数据为XML DOM文档
status：响应的HTTP状态
statusText：HTTP状态的说明
五、原生JS实现ajax请求
function ajax(options
){
options
= options
||{};
options
.type
=(options
.type
|| "GET").toUpperCase();
options
.dataType
=options
.dataType
|| "json";
var params
=formatParams(options
.data
);
var xhr
;
if(window
.XMLHttpRequest
){
xhr
=new XMLHttpRequest();
}else if(window
.ActiveObject
){
xhr
=new ActiveXobject('Microsoft.XMLHTTP');
}
if(options
.type
=="GET"){
xhr
.open("GET",options
.url
+"?"+params
,true);
xhr
.send(null);
}else if(options
.type
=="POST"){
xhr
.open("post",options
.url
,true);
xhr
.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr
.send(params
);
}
setTimeout(function(){
if(xhr
.readySate
!=4){
xhr
.abort();
}
},options
.timeout
)
xhr
.onreadystatechange=function(){
if(xhr
.readyState
==4){
var status
=xhr
.status
;
if(status
>=200&& status
<300 || status
==304){
options
.success
&&options
.success(xhr
.responseText
,xhr
.responseXML
);
}else{
options
.error
&&options
.error(status
);
}
}
}
}
function formatParams(data
){
var arr
=[];
for(var name
in data
){
arr
.push(encodeURIComponent(name
)+"="+encodeURIComponent(data
[name
]));
}
arr
.push(("v="+Math
.random()).replace(".",""));
return arr
.join("&");
}
ajax({
url
:"http://server-name/login",
type
:'post',
dataType
:'json',
data
:{
username
:'username',
password
:'password'
},
timeout
:10000,
contentType
:"application/json",
success
:function(data
){
。。。。。。
},
error
:function(e
){
console
.log(e
);
}
})
参考阅读：
Ajax原理一篇就够了
