原生ajax請求的步驟如下——————————————————————————
通常,瀏覽器產生HTTP請求,是由於使用者輸入了新的網址、或者點選了超級連結,使頁面跳轉,這將導致頁面的全域性重新整理。而Ajax(Asynchronous Javascript And XML:非同步JavaScript和XML)技術,可以使網頁悄悄地、偷偷地發起HTTP請求,請求回來的資料在頁面區域性重新整理呈遞。ajax的使用其實很簡單:
第一步,new出一個XMLHttpRequest物件:
var xmlHttp = new XMLHttpRequest();
這裡變數名xhr可以隨便起,只是一般工程師都喜歡使用這個名字,就像var arr一樣,姑且當做一種約定俗成的東西就好,方便大家交流。第二步,處理伺服器上面返回的響應:
其中,if語句小括號中的的語句:readyState表示返回XMLHTTP請求的當前狀態,具體數值示意如下:
0 (未初始化) |
物件已建立,但是尚未初始化(尚未呼叫open方法) |
1 (初始化) |
已呼叫send()方法,正在傳送請求 |
2 (傳送資料) |
send方法呼叫完成,但是當前的狀態及http頭未知 |
3 (資料傳送中) |
已接收部分資料,因為響應及http頭不全,這時通過responseBody和responseText獲取部分資料會出現錯誤, |
4 (完成) |
資料接收完畢,此時可以通過通過responseBody和responseText獲取完整的迴應資料 |
第三步,建立一個請求,第一個引數是請求的型別get或者post,第二個引數就是請求的路徑,第三個引數叫做是否使用非同步機制:
xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);
如果是post請求,在傳送請求前需要做以下處理:
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
第四步,傳送請求:
xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");
//第一步,建立XMLHttpRequest物件
var xmlHttp = new XMLHttpRequest();
function CommentAll() {
//第二步,註冊回撥函式
xmlHttp.onreadystatechange =callback1;
//{
// if (xmlHttp.readyState == 4)
// if (xmlHttp.status == 200) {
// var responseText = xmlHttp.responseText;
// }
//}
//第三步,配置請求資訊,open(),get
//get請求下引數加在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");
//第四步,傳送請求,post請求下,要傳遞的引數放這
xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
}
//第五步,建立回撥函式
function callback1() {
if (xmlHttp.readyState == 4)
if (xmlHttp.status == 200) {
//取得返回的資料
var data = xmlHttp.responseText;
//json字串轉為json格式
data = eval(data);
$.each(data,
function(i, v) {
alert(v);
});
}
}
//後臺方法
private 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<string> comments = new List<string>();
comments.Add(methodName);
comments.Add(str1);
comments.Add(str2);
//ajax接受的是json型別,需要把返回的資料轉給json格式
string commentsJson = new JavaScriptSerializer().Serialize(comments);
context.Response.Write(commentsJson);
}