文稿案例配套asp

1、Ajax編程技術(shù)講師：馬倫北京傳智播客教育 什么是AJAX?AJAX:”Asynchronous JavaScript and XML”中文意思：異步JavaScript和XML。指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術(shù)。不是指一種單一的技術(shù)，而是有機地利用了一系列相關(guān)的技術(shù)：簡單理解為：JavaScript + XMLHttpRequest + CSS +服務器端 的集合.那，什么是交互式?普通的網(wǎng)頁請求回執(zhí)過程(請求響應模式)畫例子畫例子Ajax在本質(zhì)上是一個瀏覽器端的技術(shù) Ajax技術(shù)之主要目的在于局部交換客戶端及服務器間之數(shù)據(jù) 這個技術(shù)的主角XMLHttpRequest 的最主要特點，在

2、于能夠不用重新載入整個版面來更新資料，也就是所謂的Refresh without Reload(輕刷新)與服務器之間的溝通，完全是透過Javascript 來實行 使用XMLHttpRequest 本身傳送的數(shù)據(jù)量很小，所以反應會更快，也就讓網(wǎng)絡程式更像一個桌面應用程序 AJAX 就是運用Javascript 在后臺悄悄幫你去跟服務器要資料，最后再由Javascript 或DOM 來幫你呈現(xiàn)結(jié)果，因為所有動作都是由Javascript 代勞，所以省去了網(wǎng)頁重載的麻煩，使用者也感受不到等待的痛苦AJAX優(yōu)點XMLHttpRequest對象Ajax應用程序的核心就是它。XMLHttpRequest

3、對象在IE瀏覽器和非IE瀏覽器中創(chuàng)建的方法不同。簡而言之：它可以異步從服務器端獲取txt或者xml數(shù)據(jù)異步請求基本步驟使用XMLHttpRequest對象按照下面模式，可以同步地XMLHttpRequest對象：創(chuàng)建對象； - new (叫助手過來)創(chuàng)建請求； - open (告訴他要去做的事情)發(fā)送請求； - send (去吧)具體代碼（獲得服務器時間）創(chuàng)建XMLHttpRequest對象一、先來創(chuàng)建XMLHttpRequest對象在IE、Firefox、safari和Opera中創(chuàng)建該對象的JavaScript代碼為：var xhr = new XMLHttpRequest();在IE5/

4、6中代碼為：var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);注意，JavaScript區(qū)分大小寫。設置異步對象參數(shù)并發(fā)送請求二、為XMLHttpRequest對象設置請求參數(shù) 1.GET方式 1.1設置參數(shù) xhr.open(GET, GetAreasByAjax.ashx?isAjax=1, true); 1.2GET方式請求可以設置瀏覽器不使用緩存xhr.setRequestHeader(If-Modified-Since, 0); 1.3發(fā)送: xhr.send(null);/GET方式 2.POST方式： 1.1設置參數(shù)：

5、xhr.open(POST, GetAreasByAjax.aspx, true); 1.2添加請求頭：xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded); 1.3發(fā)送：xhr.send(isAjax=1&na=123);/POST方式是不是少了什么？請求發(fā)送出去后會有響應回來，那我怎么知道請求已經(jīng)返回了呢？設置回調(diào)函數(shù) 異步使用XMLHttpRequest對象異步使用XMLHttpRequest對象時，必須使用：onreadystatechange事件。使用模式應該是：創(chuàng)建該對象；-new設置readys

6、tatechange事件觸發(fā)一個回調(diào)函數(shù); -onreadystatechagne打開請求；-open發(fā)送請求；-send 注：在回調(diào)函數(shù)中檢查readyState屬性，看數(shù)據(jù)是否準備就緒(是否等于4)。如果沒有準備好，隔一段時間再次檢查。因為數(shù)據(jù)沒有下載完時，我們無法使用它的屬性和方法。如果已經(jīng)準備好，就繼續(xù)往下執(zhí)行；編寫回調(diào)函數(shù)2.回調(diào)函數(shù)function watching() if (xhr.readyState = 4) /請求狀態(tài) if (xhr.status = 200) /服務器返回的狀態(tài)碼 var msg = xhr.responseText; /服務器返回的字符串 else

7、alert(服務器錯誤! + ajaxH.status); 1.在xhr.send之前添加設置回調(diào)函數(shù)代碼：xhr.onreadystatechange = watching;異步對象readyState屬性readyState屬性readyState屬性指出了XMLHttpRequest對象在發(fā)送/接收數(shù)據(jù)過程中所處的幾個狀態(tài)。XMLHttpRequest對象會經(jīng)歷5種不同的狀態(tài)。0：未初始化。new完后;1：已打開。對象已經(jīng)創(chuàng)建并初始化，但還未調(diào)用send方法2：已發(fā)送。已經(jīng)調(diào)用send 方法，但該對象正在等待狀態(tài)碼和頭的返回；3：正在接收。已經(jīng)接收了部分數(shù)據(jù)，但還不能使用該對象的屬性和方

8、法，因為狀態(tài)和響應頭不完整；4：已加載。所有數(shù)據(jù)接收完畢XMLHttpRequest常用方法方法說明abort取消請求open需要使用多個參數(shù)，第一個設置方法屬性，第二個設置目標URL，第三個指定是同步(false)還是異步(true)發(fā)送請求send發(fā)送請求到服務器setRequestHeader添加自定義HTTP頭到請求getAllResponseHeaders獲取HTTP響應頭的整個列表getResponseHeader僅獲取指定的HTTP響應頭XMLHttpRequest常用屬性屬性說明onreadystatechange返回或設置異步請求的事件處理程序readyState返回狀態(tài)碼：

9、0：未初始化；1：打開；2：發(fā)送；3：正在接收；4：已加載responseText使用字符串返回HTTP響應responseXML使用XML DOM對象返回HTTP響應status返回HTTP狀態(tài)碼創(chuàng)建XMLHttpRequest對象使用XMLHttpRequest對象示例異步請求下拉框數(shù)據(jù)Json-B/S結(jié)構(gòu)數(shù)據(jù)傳遞格式AJAX傳遞復雜數(shù)據(jù)如果自己進行格式定義的話會經(jīng)歷組裝、解析的過程，因此AJAX中有一個事實上的數(shù)據(jù)傳輸標準JSon。Json（是一個標準，就像XML一樣，Json規(guī)定了對象以什么樣的格式保存為一個字符串）將復雜對象序列化為一個字符串，在瀏覽器端再將字符串反序列化為JavaS

10、cript可以讀取的對象?？匆幌翵son的格式。Json被幾乎所有語言支持。JSON是js對象的一個字面量表示法.C#中將.Net對象序列化為Json字符串的方法：JavaScriptSerializer().Serialize(p)， JavaScriptSerializer在System.Web.Extensions.dll中，是.Net3.x 中新增的類。完整：System.Web.Script.Serialization.JavaScriptSerializer常見錯誤AJAX請求服務器時如果服務器出錯了怎么辦？編程常見錯誤XMLHttpRequest大小寫不正確；多寫了對圓括號：正確

11、：xHRObject.onreadystatechange =getData;錯誤：xHRObject.onreadystatechange =getData();必須弄清楚，在JavaScript中：函數(shù)名后如果有圓括號，意思就是將函數(shù)的返回值賦給等號左邊的變量；沒有圓括號，是將函數(shù)本身賦給等號前的變量。案例練習案例：無刷新登錄（使用三層連接數(shù)據(jù)庫）練習1：AJAX校驗用戶名是否存在，焦點離開用戶名觸發(fā)。注冊頁面，在用戶名控件失去焦點（onblur），發(fā)出ajax請求（到服務器數(shù)據(jù)庫驗證用戶名是否存在），服務器返回ok（在服務器端根據(jù)不同的情況進行Write(ok)或者error），如果是“error”，就alert提醒用戶，用戶名已經(jīng)被注冊。案例練習案例：新聞的無刷新評論，防止打斷視頻播放。剛進入界面的時候評論也是頁面顯示后才加載，“正在加載評論”。界面上有一個表格，逐條顯示評論，頁面剛進來的時候顯示已有評論。用戶在評論文本框中輸入文本，點擊評論按鈕，向服務器發(fā)出ajax請求，將用戶的評論內(nèi)容發(fā)給服務器，如果服務器返回“插入成功”的消息則將用戶的評論動態(tài)添加到現(xiàn)有表格中。進入的時候暫時不顯示數(shù)據(jù)庫中已有評論。練習：進入頁面的時候AJAX加載評論。AJAX增刪改查和分頁AJ