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

首先，我們來回顧下ajax是什么?

Ajax = 異步 JavaScript 和XML。

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

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

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

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

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

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

ajax的工作塬理:

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

//第一步，創(chuàng)建XMLHttpRequest對象
var?xmlHttp?=?new?XMLHttpRequest();
function?CommentAll()?{
//第二步，注冊回調(diào)函數(shù)
xmlHttp.onreadystatechange?=callback1;
//{
????//????if?(xmlHttp.readyState?==?4)
????//????????if?(xmlHttp.status?==?200)?{
????//????????????var?responseText?=?xmlHttp.responseText;
????//????????}
????//}
//第三步，配置請求信息，open(),get
?????//get請求下參數(shù)加在url后，.ashx?methodName?=?GetAllComment&str1=str1&str2=str2
??????xmlHttp.open("post",?"/ashx/myzhuye/Detail.ashx?methodName=GetAllComment",?true);
????//post請求下需要配置請求頭信息
????//xmlHttp.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
????//第四步，發(fā)送請求,post請求下，要傳遞的參數(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);
????????????????});???????
????????}
}
//后臺方法
?public??void?GetAllComment(HttpContext?context)
????????{
????????????//Params可以取得get與post方式傳遞過來的值。
????????????string?methodName?=?context.Request.Params["methodName"];
????????????//QueryString只能取得get方式傳遞過來的值。
????????????string?str1?=?context.Request.Form["str1"];
????????????//取得httpRequest傳來的值，包括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對象

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

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

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

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

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