讓頁面無刷新的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}];