在前端工作中，經(jīng)常會(huì)用到ajax，其實(shí)很多人只知道ajax是異步請(qǐng)求，不知道應(yīng)該如何用它，它的基本步驟有哪些，ajax請(qǐng)求過(guò)程是怎樣的？接下來(lái)這篇文章就給大家介紹Ajax的請(qǐng)求步驟，以及ajax請(qǐng)求步驟的詳細(xì)代碼。感興趣的朋友可以看看。

AJAX(Asynchronous JavaScript and XML)：是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這就意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的局部進(jìn)行更新。

1.建立xmlHttpRequest對(duì)象

所有現(xiàn)代瀏覽器(IE7+、Firefox、Chrome、Safari 以及 Opera)均支持XMLHttpRequest 對(duì)象，而IE5 和 IE6 使用 的是ActiveXObject。if(window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest();

if(xmlHttp.overrideMimeType){

xmlHttp.overrideMimeType("text/xml");

}

}else if(window.ActiveXobject){

var activeName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];

for(var i=0; i

try{

xmlHttp = new ActiveXobject(activeName[i]);

break;

}catch(e){

}

}

}

if(!xmlHttp){

alert("創(chuàng)建xmlhttprequest對(duì)象失敗");

}else{

}

2.設(shè)置回調(diào)函數(shù)xmlHttp.onreadystatechange= callback;

function callback(){}

3.使用OPEN方法與服務(wù)器建立連接 xmlHttp.open("get","ajax?name="+ name,true)

此步注意設(shè)置http的請(qǐng)求方式(post/get),如果是POST方式，注意設(shè)置請(qǐng)求頭信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

4.向服務(wù)器端發(fā)送數(shù)據(jù)xmlHttp.send(null);

如果是POST方式就不為空

5.在回調(diào)函數(shù)中針對(duì)不同的響應(yīng)狀態(tài)進(jìn)行處理if(xmlHttp.readyState == 4){

//判斷交互是否成功

if(xmlHttp.status == 200){

//獲取服務(wù)器返回的數(shù)據(jù)

//獲取純文本數(shù)據(jù)

var responseText =xmlHttp.responseText;

document.getElementById("info").innerHTML = responseText;

}

}

readyState屬性：表示請(qǐng)求/響應(yīng)過(guò)程的當(dāng)前階段

0：未初始化。尚未調(diào)用 open()方法。

1：啟動(dòng)。已經(jīng)調(diào)用 open()方法，但尚未調(diào)用 send()方法。

2：發(fā)送。已經(jīng)調(diào)用 send()方法，但尚未接收到響應(yīng)。

3：接收。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。

4：完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶(hù)端使用了。

只有在XMLHttpRequest對(duì)象完成了以上5個(gè)步驟之后，才可以獲取從服務(wù)器端返回的數(shù)據(jù)。

status屬性：響應(yīng)的 HTTP 狀態(tài)碼

200：響應(yīng)成功

301：永久重定向/永久轉(zhuǎn)移

302：臨時(shí)重定向/臨時(shí)轉(zhuǎn)移

304：本次獲取內(nèi)容是讀取緩存中的數(shù)據(jù)

400：請(qǐng)求參數(shù)錯(cuò)誤

401：無(wú)權(quán)限訪問(wèn)

404：訪問(wèn)的資源不存在

總結(jié)：以上介紹了Ajax請(qǐng)求的五個(gè)步驟以及詳細(xì)代碼 ，沒(méi)有接觸過(guò)得朋友可能看起來(lái)比較困難，沒(méi)關(guān)系，看了以后，多去動(dòng)手敲敲，慢慢就懂了，希望可以幫助到你！

總結(jié)

以上是生活随笔為你收集整理的ajax发送异步请求四个步骤,深入理解ajax异步请求的五个步骤（详细代码）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。