Ajax

Ajax(Asynchronous JavaScript and XML)

这一技术能够异步向服务器请求额外的数据而不用刷新整个页面。即我们通过Ajax向服务器获取数据后，再使用DOM将数据放入页面。该技术的核心是——XMLHttpRequest（xhr）对象。

Ajax的特点是：使用脚本操纵HTTP，实现服务器与浏览器间的数据交换。且不会导致整个页面重载

创建XMLHttpRequest对象

我们主要使用‘new window.XMLHttpRequest()’与‘new window.ActiveXObject(‘Microsoft.XMLHttp’)’这两个方式创建XMLHttpRequest对象

其中‘new ActiveXObject(‘Microsoft.XMLHttp’)’主要用来兼容IE（因为IE低版本的浏览器中没有XMLHttpRequest对象）

下面来看看兼容的写法：

	var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }

XMLHttpRequest对象中的常用属性与方法

方法	描述
open(“method”, “url”, true/false)	该方法不会真正发送一个请求，而是准备一个请求以备发送。method参数可以是GET,POST或PUT。url参数可以是相对URL或绝对URL,true/false表示同步/异步
send(content)	向服务器发送请求。若使用post请求，则需要将传给服务器的参数放到send的content参数中。若使用get请求，则需要将传给服务器的参数拼接到open方法中的url参数后面

属性	描述
onreadystatechange	readyState状态改变时的事件触发器
readyState	0 = 未初始化，未调用send()方法       1 = 读取中，已调用send()，正在发送请求       2 = 已读取，send方法执行完成，接收到全部响应内容       3 = 交互中，正在解析响应内容       4 = 完成，响应内容解析完成
status	服务器返回的状态码，如：404 = “文件未找到”、200 = “成功” 500 = “服务器内部错误” 304=“资源未被修改”
responseText	获得字符串形式的响应数据

封装一个Ajax函数

function ajax(method, url, data, callback, flag){
    var xhr;
    method = method.toUpperCase();
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            callback(xhr.responseText);
        }
    }
    if(method === 'POST'){
        xhr.open('POST', url, flag);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
		//setRequestHeader必须设置在open与send之间，否则将报错
        xhr.send(data);
    }else if(method === 'GET'){
        xhr.open('GET', url + '?' + data, flag);
        xhr.send(null);
    }
}