讓頁面無刷新的AJAX、ASP.NET核心知識（9）

AJAX簡介

1.如果沒有AJAX

        普通的ASP.Net每次執行服務端方法的時候都要刷新當前頁面，如果沒有ajax，在youku看視頻的過程中，就沒法提交評論，頁面會刷新，視頻會被打斷。

       

2.說說AJAX

        AJAX是一種進行頁面局部異步刷新的技術。用AJAX向服務器發送請求和獲得服務器返回的數據並且更新到界面中，不是整個頁面刷新，而是在HTML頁面中使用JavaScript創建XMLHTTPRequest（簡稱XHR）對象來向服務器發出請求以及獲得返回的數據，在頁面中由XMLHTTPRequest來發出Http請求和獲得服務器的返回數據，這樣頁面就不會刷新了。 XMLHTTPRequest是AJAX的核心對象。

        局部：一小部分刷新，其他部分不刷新；

        異步：網絡請求期間，瀏覽器不卡。

 

XMLHTTPRequest

1.使用 XMLHTTPRequest

//  創建XMLHTTP對象，考慮兼容性
            var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new  ActiveXObject('Microsoft.XMLHTTP'); 
            //“准備”向服務器的GetDate1.ashx發出Post請求（GET可能會有緩存問題）
            // Post請求瀏覽器一定不會緩存。這里還沒有發出請求。true代表異步請求。
            xmlhttp.open("POST", "AJAXTest.ashx?i=5&j=10", true);
            xmlhttp.onreadystatechange = function ()
            {
                // readyState == 4 表示服務器返回完成數據了。之前可能會經歷
                // 2（請求已發送，正在處理中）、
                // 3（響應中已有部分數據可用了，但是服務器還沒有完成響應的生成）
                if (xmlhttp.readyState == 4) 

                {
                    //如果狀態碼為200則是成功

                    if (xmlhttp.status == 200)

                    {
                        alert(xmlhttp.responseText);
                    }
                    else
                    {
                        alert("AJAX服務器返回錯誤！");
                    }
                }
            }

         //不要以為if (xmlhttp.readyState == 4) {在send之前執行！！！！
         xmlhttp.send(); //這時才開始發送請求
         //發出請求后不等服務器返回數據，就繼續向下執行，所以不會阻塞，界面就不卡了，這就是AJAX中“A”的含義“異步”。試着在ashx加一句Thread.Sleep(3000);

 

2.簡單封裝一下

// url：請求的URL 、
//onsuccess：請求成功后的處理、
//onfail：請求失敗后的處理
function ajax(url,onsuccess,onfail) 
        {
            var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
            xmlhttp.open("POST", url, true);
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState == 4)
                {
                    if (xmlhttp.status == 200)
                    {
                        onsuccess(xmlhttp.responseText);
                    }
                    else
                    {
                        onfail(xmlhttp.status);
                    }
                }
            }
            xmlhttp.send(); //這時才開始發送請求
        }

之后調用Ajax的時候，就可以

ajax("test.ashx",function(){
//請求返回成功時處理的函數。。。
},
function(){
//請求失敗時處理的函數。。。
})

Json

1.什么是Json？

        AJAX傳遞復雜數據如果自己進行格式定義的話會經歷組裝、解析的過程，因此AJAX中有一個事實上的數據傳輸標准JSon。Json（是一個標准，就像XML一樣，Json規定了對象以什么樣的格式保存為一個字符串）將復雜對象序列化為一個字符串，在瀏覽器端再將字符串反序列化為JavaScript可以讀取的對象。Json被幾乎所有語言支持。Json就是一個把對象（js、java、.net）表示為字符串的標准。

2.格式

        Json是什么，Json就是javascript對象或者數組格式的字符串,Http協議不能傳遞JavaScript對象，所以要轉換為字符串進行傳輸。

        JavaScript對象（鍵值對） var person= {name:'rupeng',age:8};

        JavaScript數組：               var names = ['rupeng','qq','taobao'];

        JavaScript對象數組：        var persons = [{name:'rupeng',age:8}, {name:'qq',age:15}, {name:'taobao',age:10}];

        JavaScript對象關聯：        var p = {name:'yzk',child:{name:'timi',age:1}};   

        以上這些都可以轉化成Json。

3.轉換 

        1）如何把json字符串轉換為js對象：

            var obj = eval("a("+data+")")。舉例：普通對象、數組、對象數組、多對象關聯。

        2）C#中將.Net對象序列化為Json字符串的方法：

            JavaScriptSerializer().Serialize(p)。.Net對象→json字符串→JavaScript對象。

            JavaScriptSerializer在System.Web.Extensions.dll中。Json.Net

        3）C#中的匿名類： var p = new { Id=5,Name="rupeng"}  通過反編譯看到其實還是生成一個類。

 

JQuery AJAX

1.$.ajax

        //Jquery封裝簡化了AJAX，有$.get、$.post等不同效果的方法，這里介紹最常使用的$.ajax（可以獲得請求失敗的消息）。

        $.ajax({

                type: "post",

                url: "Ajax1.ashx",

                data: { i1: $("#txt1").val(), i2: $("#txt2").val() },

                success: function(data, txtStatus) {alert(data);},

                error: function () { alert("錯誤"); }

            });

        //ajax方法的參數就是一個字典，

        //最好設定post提交

        //data為提交的報文體

        //success為請求成功的處理事件

        //error為請求通訊失敗的處理事件（服務器錯誤、404等）

2.JQuery AJAX Json處理

      1）可以使用$.parseJSON()把json字符串解析為JavaScript對象，比eval更安全

      2）如果設定ajax請求的ContentType為"application/json" 或者ajax請求中設定dataType: "json"，那么success的第一個參數就是JavaScript對象，不用手動解析了。