在Web開發(fā)中，與服務(wù)器進(jìn)行異步交互是非常常見的需求，而JavaScript中的Ajax技術(shù)正是用來(lái)實(shí)現(xiàn)這個(gè)需求的。簡(jiǎn)單來(lái)說(shuō)，Ajax（Asynchronous JavaScript and XML）是一種利用JavaScript實(shí)現(xiàn)與服務(wù)器異步通信的技術(shù)，JavaScript通過(guò)XMLHttpRequest對(duì)象來(lái)發(fā)送請(qǐng)求和接收響應(yīng)，通過(guò)DOM來(lái)實(shí)現(xiàn)頁(yè)面更新。

使用Ajax可以實(shí)現(xiàn)頁(yè)面無(wú)刷新更新數(shù)據(jù)、提高用戶交互體驗(yàn)，比如想實(shí)現(xiàn)一個(gè)在線搜索的功能，在用戶輸入關(guān)鍵字后即時(shí)返回匹配的結(jié)果，通過(guò)Ajax可以在不刷新頁(yè)面的情況下實(shí)現(xiàn)該功能，讓用戶可以很流暢地進(jìn)行搜索。還有一個(gè)例子是用戶在購(gòu)物車頁(yè)面改變產(chǎn)品數(shù)量時(shí)，Ajax可以更新購(gòu)物車中對(duì)應(yīng)的總價(jià)格，用戶就不必頻繁刷新頁(yè)面獲取最新的價(jià)格信息。

//使用Ajax實(shí)現(xiàn)搜索功能
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4 && xhr.status==200){
document.getElementById("searchResult").innerHTML=xhr.responseText;
}
}
xhr.open("GET","search.php?keyword="+document.getElementById("keywordInput").value,true);
xhr.send();

Ajax的核心是通過(guò)XMLHttpRequest對(duì)象來(lái)發(fā)送異步請(qǐng)求，請(qǐng)求可以采用POST或GET方法，根據(jù)需要可以通過(guò)URL傳遞參數(shù)。XMLHttpRequest的onreadystatechange事件處理函數(shù)會(huì)在服務(wù)器響應(yīng)發(fā)生變化時(shí)被調(diào)用，可以通過(guò)readyState屬性來(lái)獲取當(dāng)前狀態(tài)，狀態(tài)碼0表示請(qǐng)求尚未初始化，1表示服務(wù)器連接已建立，2表示請(qǐng)求已接收，3表示正在處理請(qǐng)求，4表示請(qǐng)求已完成并且響應(yīng)已準(zhǔn)備好。通常在readyState狀態(tài)碼為4時(shí)，再判斷響應(yīng)狀態(tài)碼是否為200，表示請(qǐng)求成功。

除了使用原生的XMLHttpRequest對(duì)象，使用第三方庫(kù)也可以獲得更便捷的Ajax開發(fā)體驗(yàn)，比較流行的有jQuery提供的$.ajax()方法和fetchAPI。下面以jQuery的$.ajax()為例：

//使用jQuery的$.ajax()實(shí)現(xiàn)搜索功能
$.ajax({
type:'GET',
url:'search.php',
data:{keyword:$('#keywordInput').val()},
success:function(data){
$('#searchResult').html(data);
}
});

使用$.ajax()可以將請(qǐng)求數(shù)據(jù)和返回?cái)?shù)據(jù)都制定成json格式，也可以對(duì)錯(cuò)誤進(jìn)行處理，而且jQuery對(duì)不同的瀏覽器的實(shí)現(xiàn)做了封裝，使用起來(lái)比原生的XMLHttpRequest更加方便。不過(guò)，使用第三方庫(kù)也增加了代碼的復(fù)雜度，有時(shí)可能會(huì)影響性能。因此，對(duì)于簡(jiǎn)單的Ajax請(qǐng)求，原生的XMLHttpRequest足以勝任。