讓頁(yè)面無(wú)刷新的Ajax、asp.net核心知識(shí)（9）

AJAX簡(jiǎn)介

1.如果沒(méi)有AJAX

普通的ASP.Net每次執(zhí)行服務(wù)端方法的時(shí)候都要刷新當(dāng)前頁(yè)面，如果沒(méi)有ajax，在youku看視頻的過(guò)程中，就沒(méi)法提交評(píng)論，頁(yè)面會(huì)刷新，視頻會(huì)被打斷。

2.說(shuō)說(shuō)AJAX

AJAX是一種進(jìn)行頁(yè)面局部異步刷新的技術(shù)。用AJAX向服務(wù)器發(fā)送請(qǐng)求和獲得服務(wù)器返回的數(shù)據(jù)并且更新到界面中，不是整個(gè)頁(yè)面刷新，而是在HTML頁(yè)面中使用javaScript創(chuàng)建xmlHTTPRequest（簡(jiǎn)稱(chēng)XHR）對(duì)象來(lái)向服務(wù)器發(fā)出請(qǐng)求以及獲得返回的數(shù)據(jù)，在頁(yè)面中由xmlhttpRequest來(lái)發(fā)出Http請(qǐng)求和獲得服務(wù)器的返回?cái)?shù)據(jù)，這樣頁(yè)面就不會(huì)刷新了。 XMLHTTPRequest是AJAX的核心對(duì)象。

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

異步：網(wǎng)絡(luò)請(qǐng)求期間，瀏覽器不卡。

XMLHTTPRequest

1.使用 XMLHTTPRequest

//  創(chuàng)建XMLHTTP對(duì)象，考慮兼容性            var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new  ActiveXObject('Microsoft.XMLHTTP');             //“準(zhǔn)備”向服務(wù)器的GetDate1.ashx發(fā)出Post請(qǐng)求（GET可能會(huì)有緩存問(wèn)題）            // Post請(qǐng)求瀏覽器一定不會(huì)緩存。這里還沒(méi)有發(fā)出請(qǐng)求。true代表異步請(qǐng)求。            xmlhttp.open("POST", "AJAXTest.ashx?i=5&j=10", true);            xmlhttp.onreadystatechange = function ()            {                // readyState == 4 表示服務(wù)器返回完成數(shù)據(jù)了。之前可能會(huì)經(jīng)歷                // 2（請(qǐng)求已發(fā)送，正在處理中）、                // 3（響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒(méi)有完成響應(yīng)的生成）                if (xmlhttp.readyState == 4)                 {                    //如果狀態(tài)碼為200則是成功                    if (xmlhttp.status == 200)                    {                        alert(xmlhttp.responseText);                    }                    else                    {                        alert("AJAX服務(wù)器返回錯(cuò)誤！");                    }                }            }         //不要以為if (xmlhttp.readyState == 4) {在send之前執(zhí)行！?。?！         xmlhttp.send(); //這時(shí)才開(kāi)始發(fā)送請(qǐng)求         //發(fā)出請(qǐng)求后不等服務(wù)器返回?cái)?shù)據(jù)，就繼續(xù)向下執(zhí)行，所以不會(huì)阻塞，界面就不卡了，這就是AJAX中“A”的含義“異步”。試著在ashx加一句Thread.Sleep(3000);

2.簡(jiǎn)單封裝一下

// url：請(qǐng)求的URL 、//onsuccess：請(qǐng)求成功后的處理、//onfail：請(qǐng)求失敗后的處理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(); //這時(shí)才開(kāi)始發(fā)送請(qǐng)求        }

之后調(diào)用Ajax的時(shí)候，就可以

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

Json

1.什么是Json？

AJAX傳遞復(fù)雜數(shù)據(jù)如果自己進(jìn)行格式定義的話會(huì)經(jīng)歷組裝、解析的過(guò)程，因此AJAX中有一個(gè)事實(shí)上的數(shù)據(jù)傳輸標(biāo)準(zhǔn)JSon。Json（是一個(gè)標(biāo)準(zhǔn)，就像XML一樣，Json規(guī)定了對(duì)象以什么樣的格式保存為一個(gè)字符串）將復(fù)雜對(duì)象序列化為一個(gè)字符串，在瀏覽器端再將字符串反序列化為Javascript可以讀取的對(duì)象。Json被幾乎所有語(yǔ)言支持。Json就是一個(gè)把對(duì)象（js、java、.net）表示為字符串的標(biāo)準(zhǔn)。

2.格式

Json是什么，Json就是javascript對(duì)象或者數(shù)組格式的字符串,Http協(xié)議不能傳遞JavaScript對(duì)象，所以要轉(zhuǎn)換為字符串進(jìn)行傳輸。

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

JavaScript數(shù)組： var names = ['rupeng','QQ','taobao'];

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