8.2 使用AJAX實現異步請求 · JavaWeb項目開發學習手冊

# AJAX教程 AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。 AJAX 不是新的編程語言，而是一種使用現有標準的新方法。 AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據并更新部分網頁內容。 AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。 **AJAX實例：** ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執行代碼 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改該文本內容</h2></div> <button type="button" onclick="loadXMLDoc()">修改內容</button> </body> </html> ``` ## AJAX 實例解析上面的 AJAX 應用程序包含一個 div 和一個按鈕。 div 部分用于顯示來自服務器的信息。當按鈕被點擊時，它負責調用名為 loadXMLDoc() 的函數： ``` <div id="myDiv"> <h2>使用 AJAX 修改該文本內容</h2></div> <button type="button" onclick="loadXMLDoc()">修改內容</button> ``` 接下來，在頁面的 head 部分添加一個標簽。該標簽中包含了這個 loadXMLDoc() 函數： ``` <head> <script> function loadXMLDoc() { .... AJAX 腳本執行 ... } </script> </head> ``` ## 閱讀本教程前，您需要了解的知識：閱讀本教程，您需要有以下基礎： * HTML和CSS基礎 * JavaScript基礎如果您想學習這些基礎知識，您可以在我們的首頁找到相應的教程。 * * * ## AJAX 應用 * 運用 XHTML+CSS 來表達資訊； * 運用 JavaScript 操作 DOM（Document Object Model）來執行動態效果； * 運用 XML 和 XSLT 操作資料; * 運用 XMLHttpRequest 或新的 Fetch API 與網頁服務器進行異步資料交換； * **注意：**AJAX 與 Flash、Silverlight 和 Java Applet 等 RIA 技術是有區分的。 # AJAX簡介 * * * AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。 * * * ## 您應當具備的基礎知識在繼續學習之前，您需要對下面的知識有基本的了解： * HTML / XHTML * CSS * JavaScript / DOM 如果您希望首先學習這些項目，請在我們的[首頁]訪問這些教程。 * * * ## 什么是 AJAX ？ AJAX = 異步 JavaScript 和 XML。 AJAX 是一種用于創建快速動態網頁的技術。通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。 ![](http://h.yiniuedu.com/2089e8c49dca533fadbc6bba5e8fac4f) ## AJAX是基于現有的Internet標準 AJAX是基于現有的Internet標準，并且聯合使用它們： * XMLHttpRequest 對象 (異步的與服務器交換數據) * JavaScript/DOM (信息顯示/交互) * CSS (給數據定義樣式) * XML (作為轉換數據的格式) AJAX應用程序與瀏覽器和平臺無關的！ * * * ## Google Suggest 在 2005 年，Google 通過其 Google Suggest 使 AJAX 變得流行起來。 Google Suggest 使用 AJAX 創造出動態性極強的 web 界面：當您在谷歌的搜索框輸入關鍵字時，JavaScript 會把這些字符發送到服務器，然后服務器會返回一個搜索建議的列表。 * * * ## 今天就開始使用 AJAX AJAX 基于已有的標準。這些標準已被大多數開發者使用多年。請閱讀下一章，看看 AJAX 是如何工作的！ # AJAX - 創建XMLHttpRequest對象 XMLHttpRequest 是 AJAX 的基礎。 * * * ## XMLHttpRequest 對象所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。 XMLHttpRequest 用于在后臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。 * * * ## 創建 XMLHttpRequest 對象所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。創建 XMLHttpRequest 對象的語法： *variable*\=new XMLHttpRequest(); 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象： *variable*\=new ActiveXObject("Microsoft.XMLHTTP"); 為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ： ## 實例 ``` var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執行代碼 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } ``` # AJAX - 向服務器發送請求 * * * XMLHttpRequest 對象用于和服務器交換數據。 * * * ## 向服務器發送請求如需將請求發送到服務器，我們使用**XMLHttpRequest**對象的**open()**和**send()**方法： ~~~ xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); ~~~ | 方法 | 描述 | | --- | --- | | open(*method*,*url*,*async*) | 規定請求的類型、URL 以及是否異步處理請求。*method*：請求的類型；GET 或 POST *url*：文件在服務器上的位置*async*：true（異步）或 false（同步） | | send(*string*) | 將請求發送到服務器。*string*：僅用于 POST 請求 ## GET 還是 POST？與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。然而，在以下情況中，請使用 POST 請求： * 不愿使用緩存文件（更新服務器上的文件或數據庫） * 向服務器發送大量數據（POST 沒有數據量限制） * 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠 ![](http://h.yiniuedu.com/06f03ba7382479d4df3bbb7bf07ff716) ![](http://h.yiniuedu.com/c239df5c2ab54f0a50f003d59ea5828c) ![](http://h.yiniuedu.com/251b33bd6306d5b8622def1d9609e974) ![](http://h.yiniuedu.com/e8f0c3357e80395dbab90e7f6080476d) ![](http://h.yiniuedu.com/1eb0c72832706b750979fe578109724b) ![](http://h.yiniuedu.com/66e94f3c1fbc924c2235087ea782a0b7) ![](http://h.yiniuedu.com/d767e8c5af4692f8c3da18d5c2893319)