1. 程式人生 > >原生ajax請求的步驟如下——————————————————————————

原生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);
        }