今天来总结一下javascript原生实现ajax数据请求。
一：什么是AJAX；
二：AJAX有什么优势；
二：AJAX的工作原理；
三：AJAX的用途；
一：什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
关键词：动态加载，页面无刷新
二：AJAX应用有什么优势？
1.减少冗余请求和响应对服务造成的负担.
2.无刷新更新页面,带来更好的用户体验.
3.减轻服务器速写的负担，节约空间和宽带租用成本。
4.采用异步提交,读写速度更快.
缺点：
-
- AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性
- AJAX只是局部刷新,所以页面的后退按钮是没有用的.
- 对流媒体还有移动设备的支持不是太好等.
三：AJAX的工作原理
1.创建XHR对象
var xh=new XMLHttpRequest();
在创建xhr对象的时候，会有兼容性问题；
兼容写法：
if (window.ActiveXObject) { //IE浏览器获取xhr对象写法
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //其他浏览器获取xhr对象写法
xhr = new XMLHttpRequest();
}
2.XHR请求
xhr.open(method,url,async);//发送xhr请求 xhr.send(string);//发送请求内容
open方法：
| 属性 | 描述 |
| open(method,url,async); |
规定请求的类型、URL 以及是否异步处理请求。
|
| send(string); |
将请求发送到服务器。
|
在发送xhr请求的时候，分为GET和POST两种请求发式：
GET请求发式：（百度糯米的搜索就是使用ajax获取）
xhr.open("GET", url, true);
xhr.open("POST", url, true);
get请求发式和post请求发式的区别。
url：后端提供的数据请求地址。
async：是否异步请求。
send方法：
此方法是在post方法请求的时候使用的；如果是get请求发式，此方法传值为null。
传值形式为键值对的形式。
注意：在post传值前，需要一个请求头，如下：
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3.onreadystatechange 事件
| 属性 | 描述 |
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState（状态值） |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status（状态码） |
200: "OK" 404: 未找到页面 500：后台的问题 |
AJAX状态值与状态码区别
AJAX状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。如：正在发送，正在响应等，由AJAX对象与服务器交互时所得；使用“xhr.readyState”获得。（由数字1~4单位数字组成）
AJAX状态码是指，无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“xhr.status”所获得；
AJAX运行步骤与状态值说明
在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是。
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了
对于上面的状态，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。
ajax请求代码：
var Ajax={
get: function (url,fn){
var xhr=new XMLHttpRequest(); // XMLHttpRequest对象用于在后台与服务器交换数据
xhr.open(‘GET‘,url,true);
xhr.onreadystatechange=function(){
if (xhr.readyState==4&&xhr.status==200||xhr.status==304){//readyState==4说明请求已完成
fn.call(this, xhr.responseText); //从服务器获得数据
}
};
xhr.send(null);
},
post: function (url,data,fn){
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.onreadystatechange=function(){
if (xhr.readyState==4&&(xhr.status==200||xhr.status==304)){//304未修改
fn.call(this, obj.responseText);
}
};
xhr.send(data);
}
}