1、第二十五講 AJAX技術佘向飛 、柯洪昌長春工程學院軟件學院AJAX（Asynchronous JavaScript and XML）其實是多種技術的綜合，包括Javascript、XHTML 和CSS、DOM(文檔對象模型)、XML 和XSTL、XMLHttpRequest。其中：使用XHTML 和CSS 標準化呈現，使用DOM 實現動態顯示和交互，使用XML 和XSTL 進行數據交換與處理，使用XMLHttpRequest 對象進行異步數據讀取，使用Javascript 綁定和處理所有數據。在AJAX 提出之前，業界對于上述技術都只是單獨的使用，沒有綜合使用，也是由于之前的技術需求所決定的

2、。隨著應用的廣泛，AJAX 也成為香餑餑了。AJAX 定義23 Ajax的工作原理相當于在用戶和服務器之間加了一個中間層，稱為Ajax引擎，該引擎使用戶操作與服務器響應異步化。在這種模式下，用戶請求不是全部都提交給服務器。部分請求，如一些數據驗證和簡單的數據處理請求等就交給Ajax引擎完成，只有那些確實需要由服務器來完成的請求，才由Ajax引擎代為向服務器提交。 4現狀與需要解決的問題傳統的Web 應用采用同步交互過程，這種情況下，用戶首先向HTTP 服務器觸發一個行為或請求的呼求。反過來，服務器執行某些任務，再向發出請求的用戶返回一個頁面。這是一種不連貫的用戶體驗，服務器在處理請求的時候，用

3、戶多數時間處于等待的狀態，屏幕內容也是一片空白。6為什么使用AJAX與傳統的Web 應用不同，AJAX 采用異步交互過程。AJAX 在用戶與服務器之間引入一個中間媒介，從而消除了網絡交互過程中的處理等待處理等待缺點。用戶的瀏覽器在執行任務時即裝載了AJAX 引擎。AJAX 引擎用JavaScript 語言編寫，通常藏在一個隱藏的框架中。它負責編譯用戶界面及與服務器之間的交互。7 1.減輕服務器的負擔。AJAX 的原則是“按需取數據”，可以最大程度的減少冗余請求和響應對服務器造成的負擔。2.無刷新更新頁面，減少用戶心理和實際的等待時間帶來更好的用戶體驗。3.可以把以前一些服務器負擔的工作轉加到客

4、戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。4.可以調用外部數據。5.基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序。6.進一步促進頁面呈現和數據的分離。使用AJAX好處9 /創建XMLHttpRequest對象 function createXMLHttpRequest() if (window.XMLHttpRequest) /Mozilla 瀏覽器 XMLHttpReq = new XMLHttpRequest(); else / IE瀏覽器if (window.ActiveXObject) try XMLHttpReq = new Act

5、iveXObject(Msxml2.XMLHTTP); catch (e) try XMLHttpReq = new ActiveXObject(Microsoft.XMLHTTP); catch (e) 實例：Ajax請求方式10 /處理服務器響應結果 function handleResponse() / 判斷對象狀態 if (XMLHttpReq.readyState = 4) / 信息已經成功返回，開始處理信息 if (XMLHttpReq.status = 200) var out = ; var res = XMLHttpReq.responseXML; var response=

6、 res.getElementsByTagName(response)0.firstChild.nodeValue; document.getElementById(hello).innerHTML = response; 實例：Ajax請求方式11 /發送客戶端的請求 function sendRequest(url) createXMLHttpRequest(); XMLHttpReq.open(GET, url, true); /指定響應函數 XMLHttpReq.onreadystatechange = handleResponse; / 發送請求 XMLHttpReq.send(nu

7、ll); 實例：Ajax請求方式12 /開始調用Ajax的功能 function sayHello() var name = document.getElementById(name).value; /發送請求 sendRequest(SayHello?name=+name); 實例：Ajax請求方式這是一個servlet13 頁面代碼： 姓名： 實例：Ajax請求方式14AJAX 應用到的技術1、XMLHttpRequest 對象XMLHttpRequest 是XMLHTTP 組件的對象，通過這個對象，AJAX 可以像桌面應用程序一樣只同服務器進行數據層面的交換，而不用每次都刷新界面，也不用

8、每次將數據處理的工作都交給服務器來做；這樣既減輕了服務器負擔又加快了響應速度、縮短了用戶等待的時間。16XMLHttpRequest 對象的方法方法 方法 abort() 停止當前請求abort() 停止當前請求getAllResponseHeaders() 作為字符串返回完整的headergetAllResponseHeaders()作為字符串返回完整的headeropen(method,URL,asyncFlag,userName, password)設置未決的請求的目標send(content)發送請求setRequestHeader(label, value)設置header 并和請求

9、一起17XMLHttpRequest 對象初始化var http_request = false;/IE 瀏覽器http_request = new ActiveXObject(Msxml2.XMLHTTP);http_request = new ActiveXObject(Microsoft.XMLHTTP);/Mozilla 瀏覽器http_request = new XMLHttpRequest();19AJAX 開發框架這里，我們通過一步步的解析，來形成一個發送和接收XMLHttpRequest 請求的程序框架。AJAX 實質上也是遵循Request/Server 模式，所以這個框架基

10、本的流程也是：對象初始化發送請求服務器接收服務器返回客戶端接收修改客戶端頁面內容。只不過這個過程是異步的。20初始化對象并發出XMLHttpRequest 請求為了讓Javascript 可以向服務器發送HTTP 請求，必須使用XMLHttpRequest 對象。使用之前，要先將XMLHttpRequest 對象實例化為了讓編寫的程序能夠跨瀏覽器運行，要這樣寫：if (window.XMLHttpRequest) / Mozilla, Safari, . http_request = new XMLHttpRequest(); else if (window.ActiveXObject) /

11、IE http_request = new ActiveXObject(Microsoft.XMLHTTP); 21指定響應處理函數接下來要指定當服務器返回信息時客戶端的處理方式。只要將相應的處理函數名稱賦給XMLHttpRequest 對象的onreadystatechange 屬性就可以了http_request.onreadystatechange = handleResponse;需要指出的是，這個函數名稱不加括號，不指定參數。也可以用 Javascript 即時定義函數的方式定義響應函數。比如： http_request.onreadystatechange = function()

12、 ; 22發出HTTP 請求指定響應處理函數之后， 就可以向服務器發出HTTP 請求了。這一步調用XMLHttpRequest 對象的open 和send 方法。http_request.open(GET, /some.file, true);http_request.send(null);1.open 的第一個參數是HTTP 請求的方法，為Get、Post 或者Head。232.open 的第二個參數是目標URL。基于安全考慮，這個URL 只能是同網域的，否則會提示“沒有權限”的錯誤。這個URL 可以是任何的URL，包括需要服務器解釋執行的頁面，不僅僅是靜態頁面。目標URL 處理請求XMLH

13、ttpRequest 請求則跟處理普通的HTTP 請求一樣，比如JSP 可以用request.getParameter(“”)或者request.getAttribute(“”)來取得URL 參數值。3.open 的第三個參數只是指定在等待服務器返回信息的時間內是否繼續執行下面的代碼。如果為false，則不會繼續執行，直到服務器返回信息。默認為True。24處理服務器返回的信息在第二步我們已經指定了響應處理函數，這一步，來看看這個響應處理函數都應該做什么。首先，它要檢查XMLHttpRequest 對象的readyState 值，判斷目前請求的狀態。參照前文的屬性表可以知道，readyStat

14、e 值為4 的時候，代表服務器已經傳回所有的信息，可以開始處理信息并更新頁面內容了。如下：if (http_request.readyState = 4) / 信息已經返回，可以開始處理 else / 信息還沒有返回，等待26服務器返回信息后，還需要判斷返回的HTTP狀態碼，確定返回的頁面沒有錯誤所有的狀態碼都可以在W3C的官方網站上查到。其中，200 代表頁面正常。if (http_request.status = 200) / 頁面正常，可以開始處理信息 else / 頁面有問題27 /創建XMLHttpReques對象（代碼是固定的） function createXMLHttpRequ

15、est() if (window.XMLHttpRequest) /Mozilla 瀏覽器 XMLHttpReq = new XMLHttpRequest(); else / IE瀏覽器if (window.ActiveXObject) try XMLHttpReq = new ActiveXObject(Msxml2.XMLHTTP); catch (e) try XMLHttpReq = new ActiveXObject(Microsoft.XMLHTTP); catch (e) 一個ajax請求的基本框架29 /處理服務器響應結果 function handleResponse() /

16、 判斷對象狀態 if (XMLHttpReq.readyState = 4) / 信息已經成功返回，開始處理信息 if (XMLHttpReq.status = 200) /if中內容是自定義的 var out = ; var res = XMLHttpReq.responseXML; var response= res.getElementsByTagName(response)0.firstChild.nodeValue; document.getElementById(“result).innerHTML = response; 30 /發送客戶端的請求（代碼是固定的） function

17、 sendRequest(url) createXMLHttpRequest(); XMLHttpReq.open(GET, url, true); /指定響應函數 XMLHttpReq.onreadystatechange = handleResponse; / 發送請求 XMLHttpReq.send(null); 31 /開始調用Ajax的功能（完全是用戶自定義） function userCheck() var name = document.getElementById(“uname).value; /發送請求 sendRequest(“UsernameCheck?name=+nam

18、e); 這是一個servlet32在用戶注冊的表單中，經常碰到要檢驗待注冊的用戶名是否唯一。傳統的做法是采用window.open 的彈出窗口，或者 window. showModalDialog 的對話框。不過，這兩個都需要打開窗口。采用 AJAX 后，采用異步方式直接將參數提交到服務器，用 window.alert或直接在頁面將服務器返回的校驗信息顯示出來。代碼如下： 案例：數據校驗 用戶名： 33案例：數據校驗在開發框架的基礎上再增加一個調用函數： function userCheck() var f = document.form1; var username = f.username.value; if(username=) window.alert(用