AJAX基礎(chǔ)教程：AJAX請(qǐng)求的五個(gè)步驟是什么?

首先，我們來(lái)回顧下ajax是什么?

Ajax = 異步 JavaScript 和XML。

Ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。

通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。

傳統(tǒng)的網(wǎng)頁(yè)(不使用 Ajax)如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁(yè)面

前面談到ajax是什么，其主要也就是異步提交，大家是否知道同步和異步提交的區(qū)別嗎?

同步提交：當(dāng)用戶發(fā)送請(qǐng)求時(shí)，當(dāng)前頁(yè)面不可以使用，服務(wù)器響應(yīng)頁(yè)面到客戶端，響應(yīng)完成，用戶才可以使用頁(yè)面。

異步提交：當(dāng)用戶發(fā)送請(qǐng)求時(shí)，當(dāng)前頁(yè)面還可以繼續(xù)使用，當(dāng)異步請(qǐng)求的數(shù)據(jù)響應(yīng)給頁(yè)面，頁(yè)面把數(shù)據(jù)顯示出來(lái) 。

ajax的工作塬理:

客戶端發(fā)送請(qǐng)求，請(qǐng)求交給xhr，xhr把請(qǐng)求提交給服務(wù)，服務(wù)器進(jìn)行業(yè)務(wù)處理，服務(wù)器響應(yīng)數(shù)據(jù)交給xhr對(duì)象，xhr對(duì)象接收數(shù)據(jù)，由javascript把數(shù)據(jù)寫到頁(yè)面上，如下圖所示：

//第一步，創(chuàng)建XMLHttpRequest對(duì)象
var?xmlHttp?=?new?XMLHttpRequest();
function?CommentAll()?{
//第二步，注冊(cè)回調(diào)函數(shù)
xmlHttp.onreadystatechange?=callback1;
//{
????//????if?(xmlHttp.readyState?==?4)
????//????????if?(xmlHttp.status?==?200)?{
????//????????????var?responseText?=?xmlHttp.responseText;
????//????????}
????//}
//第三步，配置請(qǐng)求信息，open(),get
?????//get請(qǐng)求下參數(shù)加在url后，.ashx?methodName?=?GetAllComment&str1=str1&str2=str2
??????xmlHttp.open("post",?"/ashx/myzhuye/Detail.ashx?methodName=GetAllComment",?true);
????//post請(qǐng)求下需要配置請(qǐng)求頭信息
????//xmlHttp.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
????//第四步，發(fā)送請(qǐng)求,post請(qǐng)求下，要傳遞的參數(shù)放這
????xmlHttp.send("methodName?=?GetAllComment&str1=str1&str2=str2");//"
}
//第五步，創(chuàng)建回調(diào)函數(shù)
function?callback1()?{
????if?(xmlHttp.readyState?==?4)
????????if?(xmlHttp.status?==?200)?{
????????????//取得返回的數(shù)據(jù)
????????????var?data?=?xmlHttp.responseText;
????????????//json字符串轉(zhuǎn)為json格式
????????????data?=?eval(data);
????????????$.each(data,
????????????????function(i,?v)?{
????????????????????alert(v);
????????????????});???????
????????}
}
//后臺(tái)方法
?public??void?GetAllComment(HttpContext?context)
????????{
????????????//Params可以取得get與post方式傳遞過來(lái)的值。
????????????string?methodName?=?context.Request.Params["methodName"];
????????????//QueryString只能取得get方式傳遞過來(lái)的值。
????????????string?str1?=?context.Request.Form["str1"];
????????????//取得httpRequest傳來(lái)的值，包括get與post方式
????????????string?str2?=?context.Request["str2"];
????????????List?comments?=?new?List();
????????????comments.Add(methodName);
????????????comments.Add(str1);
????????????comments.Add(str2);
????????????//ajax接受的是json類型，需要把返回的數(shù)據(jù)轉(zhuǎn)給json格式
????????????string?commentsJson?=?new?JavaScriptSerializer().Serialize(comments);
????????????context.Response.Write(commentsJson);
????????}

1. 建立xmlHttpRequest對(duì)象

2. 設(shè)置回調(diào)函數(shù)

3. 使用open方法與服務(wù)器建立鏈接

4. 向服務(wù)器發(fā)送數(shù)據(jù)

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

以上就是AJAX基礎(chǔ)教程中的AJAX請(qǐng)求的五個(gè)步驟內(nèi)容，大家可要牢記哦。