XMLHttpRequest
一、简介
Ajax (Asynchronous Javascript And Xml )是指一种创建交互式网页应用的网页开发技术，其中，Ajax的核心是JavaScript对象XMLHttpRequest(以下简称XHR)，XHR是一种支持异步请求数据的技术。
我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。所以我用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。
二、XMLHttpRequest对象的使用
1、创建XHR对象可以直接实例化XMLHttpRequest：
var xhr = new XMLHttpRequest();
但，XHR对象不支持IE6，需要使用 ActiveX 对象通过传入参数Microsoft.XMLHTTP来实现。我们封装一个AjaxBase.js，去兼容不同浏览器：
//创建xhr对象
function createXHR() {
//判断是否支持这个属性,如果支持,则是IE7+,FF,Chrome,...
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
//IE6-
return new ActiveXObject("Microsoft.XMLHTTP");
}
2、open()方法
该方法并不会真正发送请求，而只是启动一个请求以备发送。它接受三个参数:要发送的请求类型(get、post)、请求的URL、表示是否异步的true or false。
//在请求服务器之前的准备工作
/*
第一个参数: 表示请求方式(get请求/post请求)
第二个参数: 请求的URL,服务器地址,域名(ip和端口)必须和本html文件所在的域名(ip和端口)一致
第三个参数: 表示是否采用异步请求(false表示同步,true表示异步)
*/
xhr.open("GET", "http://localhost:8080/json/news.json", false);
3、通过XHR对象来判断是否请求成功
当请求发送到服务器端，收到响应后，响应的数据会自动填充XHR对象的属性，一共有四个属性：
1）responseText:作为响应主体被返回的文本
2）responseXML:如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的XML文档,否则是null
3）statusText: HTTP状态的说明
4）status:响应的HTTP状态，一般HTTP状态代码为200则表示请求服务器成功。另外还有400(语法错误导致服务器不识别)，401(请求需要用户认证)，404(指定的URL在服务器上找不到)等状态码：
//判断是否请求成功
if (xhr.status == 200) {
console.log(xhr.responseText);
} else {
console.log("请求失败! 状态码:" + xhr.status + ", " + xhr.statusText);
}
需要注意的是，在实际项目开发中常用的是异步请求，使用异步调用的时候,需要触发readystatechange事件，检测readyState属性即可， readyState属性的值有5个: 0，1，2，3，4。最常用的是4，该状态码表示已经接受到了全部响应数据：
//这里在内部会创建一个子线程去请求服务器数据
xhr.onreadystatechange = function() {
console.log(xhr.readyState);
//表示已经接受了全部数据,并且可以使用
if (xhr.readyState == 4 && xhr.status == 200) {
//如果可以进入if,则表示请求成功并且数据可用
console.log(xhr.responseText);
}
}
4、send()方法
该方法向服务器发送请求，并接受一个参数，作为请求主体发送的数据。
如果是get方式请求则传入null。
//4, 向服务器发送http请求
xhr.send(null);
5、abort()方法
取消异步请求，如果需要取消某异步请求，则在send()之后再调用，写在send()之前调用会报错。
//取消异步请求
xhr.abort();
6、完成
//按钮点击事件
oInput.onclick = function() {
//获取数据
//1,创建xhr对象
var xhr = createXHR();
xhr.open("GET", "http://localhost:8080/json/news.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
console.log(typeof xhr.responseText);
//JSON解析
var dataList = JSON.parse(xhr.responseText);
for (var i=0; i三、实例
实际使用别人封装好的Ajax方法例子
ajax({
method: "post",
url: "http://localhost:8080/json/news.json",
data: {},
async: true,
success: function(responseText) {
console.log(responseText);
},
failure: function(errorObj) {
console.log("失败");
}
});