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对象中的常用属性与方法

封装一个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);
    }
}