什么是Ajax

Ajax是用JavaScript執(zhí)行異步網(wǎng)絡(luò)請(qǐng)求，請(qǐng)求是異步執(zhí)行的，也就是說，要通過回調(diào)函數(shù)獲得響應(yīng)。在現(xiàn)代瀏覽器上寫AJAX主要依靠XMLHttpRequest對(duì)象：

'use strict';
function success(text) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest對(duì)象

request.onreadystatechange = function () { // 狀態(tài)發(fā)生變化時(shí)，函數(shù)被回調(diào)
    if (request.readyState === 4) { // 成功完成
        // 判斷響應(yīng)結(jié)果:
        if (request.status === 200) {
            // 成功，通過responseText拿到返回的數(shù)據(jù)

            return success(request.responseText);
        } else {
            // 失敗，根據(jù)響應(yīng)碼判斷失敗原因:
            return fail(request.status);
        }
    } else {
        // HTTP請(qǐng)求還在繼續(xù)...
    }
}

// 發(fā)送請(qǐng)求:
request.open('GET', '/api/categories');
request.send();

alert('請(qǐng)求已發(fā)送，請(qǐng)等待響應(yīng)...');

當(dāng)創(chuàng)建了XMLHttpRequest對(duì)象后，要先設(shè)置onreadystatechange的回調(diào)函數(shù)。在回調(diào)函數(shù)中，通常我們只需通過readyState === 4判斷請(qǐng)求是否完成，如果已完成，再根據(jù)status === 200判斷是否是一個(gè)成功的響應(yīng)。
XMLHttpRequest對(duì)象的open()方法有3個(gè)參數(shù)，第一個(gè)參數(shù)指定是GET還是POST，第二個(gè)參數(shù)指定URL地址，第三個(gè)參數(shù)指定是否使用異步，默認(rèn)是true，所以不用寫。注意，千萬不要把第三個(gè)參數(shù)指定為false，否則瀏覽器將停止響應(yīng)，直到AJAX請(qǐng)求完成。如果這個(gè)請(qǐng)求耗時(shí)10秒，那么10秒內(nèi)你會(huì)發(fā)現(xiàn)瀏覽器處于“假死”狀態(tài)。
最后調(diào)用send()方法才真正發(fā)送請(qǐng)求。GET請(qǐng)求不需要參數(shù)，POST請(qǐng)求需要把body部分以字符串或者FormData對(duì)象傳進(jìn)去。

readyState屬性：請(qǐng)求狀態(tài)

0、（未初始化）還沒有調(diào)用open()方法
1、（載入）已調(diào)用send()方法，正在發(fā)送請(qǐng)求
2、（載入完成）send()方法完成，已收到全部相應(yīng)內(nèi)容
3、（解析）正在解析相應(yīng)內(nèi)容
4、（完成）相應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了

優(yōu)點(diǎn)

1. Ajax 最大的優(yōu)點(diǎn)是無刷新數(shù)據(jù)讀?。耗茉诓凰⑿抡麄€(gè)頁面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)。更為迅捷地響應(yīng)用戶交互，避免了發(fā)送沒有改變的信息，減少用戶等待時(shí)間，帶來非常好的用戶體驗(yàn)；
2. 異步與服務(wù)器通信：AJAX使用異步方式與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力。優(yōu)化了Browser和Server之間的溝通，減少不必要的數(shù)據(jù)傳輸、時(shí)間及降低網(wǎng)絡(luò)上數(shù)據(jù)流量；
3. 前端和后端負(fù)載平衡：把一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，用客戶端閑置的能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。這種“按需取數(shù)據(jù)”的方式，可最大程度的減少冗余請(qǐng)求和對(duì)服務(wù)器造成的負(fù)擔(dān)，提升站點(diǎn)性能；
4. 界面與應(yīng)用分離：Ajax使WEB中的界面與應(yīng)用分離（也可以說是數(shù)據(jù)與呈現(xiàn)分離），有利于分工合作、減少非技術(shù)人員對(duì)頁面的修改造成的WEB應(yīng)用程序錯(cuò)誤、提高效率、適用于現(xiàn)在的發(fā)布系統(tǒng)。

缺點(diǎn)

1. AJAX干掉了Back和History功能：動(dòng)態(tài)更新的頁面，用戶無法回到前一個(gè)頁面狀態(tài)，因?yàn)闉g覽器僅能記憶歷史記錄中的靜態(tài)頁面。解決方案是使用URL片斷標(biāo)識(shí)符（通常被稱為錨點(diǎn)，即URL中#后面的location. hash）來保持跟蹤；
2. AJAX的安全問題：Ajax技術(shù)對(duì)企業(yè)數(shù)據(jù)建立了一個(gè)直接通道。會(huì)暴露比以前更多的數(shù)據(jù)和服務(wù)器邏輯。并會(huì)隱藏客戶端的安全掃描技術(shù)，允許黑客從遠(yuǎn)端服務(wù)器上建立新的攻擊。還有Ajax也難以避免跨站點(diǎn)腳步攻擊、SQL注入攻擊和基于Credentials的安全漏洞等等；
3. 對(duì)搜索引擎支持較弱：對(duì)搜索引擎的支持比較弱。如果使用不當(dāng)，AJAX會(huì)增大網(wǎng)絡(luò)數(shù)據(jù)的流量，從而降低整個(gè)系統(tǒng)的性能。
4. 違背URL和資源定位的初衷：你在一個(gè)URL地址下面看到的和我在這個(gè)URL地址下看到的內(nèi)容是不同的。這個(gè)和資源定位的初衷是相背離的。

Ajax在JQ和JS中的區(qū)別

jquery是將原生的JS封裝了的，不同瀏覽器對(duì)Ajax的實(shí)現(xiàn)可能不一樣，jQuery解決了兼容問題，讓我們用同一種方式調(diào)用；接口更清晰好用，比如jquery把jsonp（其實(shí)是通過script標(biāo)簽繞過同源策略）封裝的就像一個(gè)普通的ajax請(qǐng)求。

Ajax修改獲取header：

利用xmlHttp.setRequestHeader來設(shè)置request請(qǐng)求頭：例如：xmlHttp.setRequestHeader('cache-control','no-cache');

利用xmlHttp.getResponseHeader來獲取response頭信息;例如：xmlHttp.getResponseHeader("Date")；

另外 request.setCharacterEncoding("UTF-8")也可以設(shè)置發(fā)送到服務(wù)端數(shù)據(jù)編碼格式（一般來說發(fā)送的編碼格式跟服務(wù)端解析格式必須是一致的）