近来在学php，方才入门，用到很多与Ajax相干的交互。Ajax也用了挺久的了，想写一下进修笔记来纪录一下。本日先简朴写一下道理和历程。迎接人人一同讨论。

什么是AJAX

AJAX的全称是Asynchronous JavaScript and XML。
它是一种基于JavaScript的网页应用手艺。传统的提交体式格局会重载全部网页，而应用AJAX手艺能够使JavaScript与Web服务器异步传输数据，从而完成不重载全部页面的情况下，更新部分页面部分内容。

Ajax完成历程

0. XMLHttpRequest是AJAX的基本，XMLHTTPRequest()是中心对象，首先要实例化一个XMLHTTPRequest()对象

var xhr = new XMLHTTPRequest();

1. AJAX举行要求，划定要求的范例、URL 以及是不是异步处置惩罚要求。

xhr.open(method, url, async);

open()要领吸收三个参数：

• method：要求的范例；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

AJAX的道理就是Asynchronous异步的，所以第三个参数async为true。

第一个参数method决议了要求范例，即传输数据的体式格局。

• GET
• 与POST比拟，GET 更简朴也更快。然则传输数据时会将数据放在地址栏的背面，对客户端而言不平安。除此之外，GET传输数据的大小受限，平常只要2k-8k，因浏览器而异。所以在传输不敏感信息而且传输文件小的情况下，我们能够挑选用GET体式格局传输。
• POST
• POST传输是传输数据体，是隐式的，相对客户端较为平安。然则从另一层面上来讲，相对服务器端就有肯定的风险了。POST传输数据没有大小限定，然则服务器对上传的数据有限定，须要手动修正。

2. AJAX向服务器发送要求

xhr.send(string);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

用GET要领传输时，send(null)，用POST要领传输时，须要用setRequestHeader要领设置要求头。

3. AJAX相应服务器状况

AJAX相应服务器状况触及XMLHttpRequest对象的三个主要的属性：onreadystatechange、readyState、status。
readyState存有XMLHttpRequest的状况。从0到4发生变化：

• 0: 要求未初始化
• 1: 服务器衔接已竖立
• 2: 要求已吸收
• 3: 要求处置惩罚中
• 4: 要求已完成，且相应已停当

每当readyState转变时，就会触发onreadystatechange事宜，在事宜中推断要求是不是胜利，相应是不是停当，当readyState即是4且状况为200时，示意相应已停当：

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            obj.success(xhr.responseText);
        }
    }
}

4. 运用 Callback 函数

obj.success(xhr.responseText);

AJAX相应停当后，对吸收到的数据举行后续的操纵。

Ajax原生封装

var ajax = {
    create: function () {
        var xhr;
        if (XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        return xhr;
    },
    request: function (obj) {
        var xhr = this.create();
        var data = this.changeData(obj.data);
        if (obj.type === 'GET') {
            xhr.open(obj.type, obj.url+'?rand='+Math.random()+'&'+data, true);
            xhr.send(null);
        } else if (obj.type === 'POST') {
            xhr.open(obj.type, obj.url, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send(data);
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    obj.success(xhr.responseText);
                }
            }
        }
    },
    changeData: function (data) {
        var arr = [];
        for (var i in data) {
            arr.push(i+'='+data[i]);
        }
        return arr.join('&');
    }
}
// 挪用
ajax.request({
    type: 'POST',
    url: 'weibo.php',
    data: 'act=update',
    success: function(res){
        console.log(res);
    }
});

能够看出挪用的情势与jQuery的完成道理类似。