Asynchronous JavaScript and XML，簡稱AJAX（異步的 JavaScript 和 XML）。AJAX 不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。AJAX 最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容。AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執(zhí)行。

XMLHttpRequest 對(duì)象

XMLHttpRequest 是 AJAX 的基礎(chǔ)，所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對(duì)象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。

創(chuàng)建xmlHttpRequest：

var xmlhttp;
if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();//IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
}else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 瀏覽器執(zhí)行代碼
}

向服務(wù)器發(fā)送請求：

xmlHttpRequest對(duì)象的open()方法可以創(chuàng)建get或者post請求，send()方法發(fā)送請求。

xmlhttp.open("GET","https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/10",true);//open方法接收三個(gè)參數(shù)，分別是請求方式，請求目標(biāo)，是否異步
xmlhttp.send();//send方法接收一個(gè)字符串，僅post請求生效。

服務(wù)器響應(yīng)：

如需獲得來自服務(wù)器的響應(yīng)，請使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性。responseText獲得字符串形式的響應(yīng)數(shù)據(jù)，responseXML獲得 XML 形式的響應(yīng)數(shù)據(jù)，這里就只演示responseText了。

var res = xmlhttp.responseText;
console.log(res);

響應(yīng)狀態(tài)：

如果把上面的代碼整合到一起，你可能會(huì)發(fā)現(xiàn)控制臺(tái)沒有輸出內(nèi)容，但事實(shí)上請求可能是成功的，因?yàn)榭刂婆_(tái)打印的時(shí)候還沒請求完成，這時(shí)候就需要判斷響應(yīng)狀態(tài)了。

var xmlhttp,res;
if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();//IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
}else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 瀏覽器執(zhí)行代碼
}
xmlhttp.open("GET","https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/10",true);
xmlhttp.send();

xmlhttp.onreadystatechange = function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        res = xmlhttp.responseText;
        console.log(res);
    }
}

onreadystatechange是一個(gè)函數(shù)，每當(dāng)readyState發(fā)生改變，就會(huì)觸發(fā)這個(gè)函數(shù)。

封裝回調(diào)函數(shù)

上面的例子已經(jīng)可以實(shí)現(xiàn)根據(jù)響應(yīng)狀態(tài)觸發(fā)回調(diào)了，但是還可以優(yōu)化一下封裝成回調(diào)函數(shù)。

var xmlhttp,res;
function request(url, func) {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = func;
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

function myReq(url) {
    request(url, function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            res = xmlhttp.responseText;
            console.log(res);
        }
    })
}

myReq('https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/10');//調(diào)用函數(shù)即可

這里只是簡單的封裝，其實(shí)也可以做更多的優(yōu)化，就看你要實(shí)現(xiàn)怎么樣的需求了。