Ajax所包含的技术：Ajax并非一种新技术，它是几种原有技术的结合体

● 使用CSS和XHTML来表示

● 使用DOM模型来交互和动态显示

● 使用javascript来绑定和调用。

● 使用XMLHttpRequest来和服务器进行异步通

Ajax交换模型，即Ajax实现原理
首先：创建XMLHttpRequest对象

    //创建xhr - 非IE6 - 第一步
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else { //IE6及其以下版本浏览器
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

然后：通过open()与服务器建立连接

// 请求方式是GET，则需要将参数拼接到url后面
xhr.open("GET", options.url + "?" + params, true); // 请求方式，请求url，是否异步发送请求
// 请求方式是POST，参数不需要拼接，但要设置表单提交时的内容类型
xhr.open("POST", options.url, true);  //POST则是通过将数据作为 send 的参数提交到服务器
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

接着：通过send()发送请求

//GET 请求方式
xhr.send(null);  
// POST方式，需要将数据作为参数
xhr.send(params);

最后：通过onReadyStateChange()监听状态变化，通过readyState=4判断已经全部接收到响应数据，通过status判断状态码是否表示成功

xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            var status = xhr.status;
            if (status >= 200 && status < 300) {
                options.success && options.success(xhr.responseText, xhr.responseXML);
            } else {
                options.fail && options.fail(status);
            }
        }
    }

完整的ajax请求如下所示

function ajax(options){
    var options = options || {};
    options.type = (options.type || 'GET').toUpperCase();
    options.dataType = options.dataType || 'json';
    var params = objectToString(options.data);
    var xhr;
 
    //创建xhr - 非IE6 - 第一步
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else { //IE6及其以下版本浏览器
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
 
    if( type =='GET' ){
        // 请求方式是GET，则需要将参数拼接到url后面
        xhr.open("GET", options.url + "?" + params, true); // 请求方式，请求url，是否异步发送请求
        xhr.send(null);  
    }else if( type == 'POST' ){
        // 请求方式是POST，参数不需要拼接，但要设置表单提交时的内容类型
        xhr.open("POST", options.url, true);  //POST则是通过将数据作为 send 的参数提交到服务器
        //设置表单提交时的内容类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // POST请你去方式，需要将数据作为参数
        xhr.send(params);
    }
 
    // 监听状态变化
    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.fail && options.fail(status);
            }
        }
    }
}
function objectToString(obj){
    var arr = [];
    for( var key in obj ){
        arr.push( encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]) );
    }
    arr.push(('v='+ Math.random()).replace('.','') );
    return arr.join('&');
}