# Ajax 教程 – 面向初學者的 Ajax 指南 > 原文： [https://howtodoinjava.com/ajax/complete-ajax-tutorial/](https://howtodoinjava.com/ajax/complete-ajax-tutorial/) 異步 JavaScript 和 XML（ [**AJAX**](https://en.wikipedia.org/wiki/Ajax_%28programming%29 "ajax") ）是一種與服務器交換數據并更新網頁的某些部分的技術，而無需重新加載整個網頁。 換句話說， **AJAX** 允許通過與幕后服務器交換少量數據來異步更新網頁。 如果應用未使用 AJAX，則必須在用戶提出的每個請求上重新加載網頁。 在本面向初學者的 *ajax 教程中，我將介紹在開發基于 ajax 的應用之前，您應該了解的所有基本和重要事實，以充分利用 ajax 的功能。* ```java Table of Contents 1\. How ajax works? 2\. Ajax XMLHttpRequest object 3\. XMLHttpRequest methods (open(), setRequestHeader(), send(), abort()) 4\. Synchronous and Asynchronous requests - onreadystatechange event, Handling server response 5\. Ajax demo - Asynchronous example, Synchronous example 6\. Popular ajax libraries - JQuery, Prototype 7\. 下載源碼 ``` ## 1\. ajax 如何工作？ 重要的是要了解 Ajax 不是單一技術，而是一組技術，例如 HTML，CSS，DOM 和 JavaScript 等。 [**HTML**](https://en.wikipedia.org/wiki/HTML "html") 和 [**CSS**](https://en.wikipedia.org/wiki/Cascading_Style_Sheets "css") 可以組合使用以標記和樣式信息。 通過 [**JavaScript**](https://en.wikipedia.org/wiki/JavaScript "JavaScript") 訪問 [**DOM**](https://en.wikipedia.org/wiki/Document_Object_Model "dom") ，以動態顯示所呈現的信息，并允許用戶與之交互。 JavaScript 和[**`XMLHttpRequest`**](https://en.wikipedia.org/wiki/XMLHttpRequest "XMLHttpRequest")對象提供了一種在瀏覽器和服務器之間異步交換數據以避免重新加載整個頁面的方法。 近年來，XML 的本質已經減少。 [**JSON**](https://en.wikipedia.org/wiki/JSON "json") （JavaScript 對象表示法）通常用作數據交換的替代格式，盡管其他格式（例如預格式化的 HTML 或純文本）也可以用于數據目的。 #### 1.1 Ajax 生命周期 通常，對服務器的 ajax 調用和從服務器獲取響應（**生命周期事件**）涉及以下步驟： * 您在瀏覽器的地址欄中鍵入網頁的 URL，然后按`Enter`。 頁面已加載到瀏覽器窗口中。 * 某些操作會觸發事件，例如用戶單擊按鈕。 * 事件觸發 ajax 調用，并使用 xml 或 json 向服務器發送請求。 * 服務器服務從 ajax / http 請求獲取輸入，并處理該請求。 如果需要，它還會準備響應數據。 * 服務器將數據發送回發出請求的原始網頁。 * 另一個 JavaScript 函數稱為回調函數，該函數接收數據并更新網頁。 很容易，對吧？ 讓我們在下面的圖片中查看所有動作。  **AJAX 如何工作？** ## 2\. Ajax `XMLHttpRequest`對象 AJAX 的核心是`XMLHttpRequest`對象（可在客戶端腳本語言（如 javascript）中使用）。 `XMLHttpRequest`對象用于與后臺的服務器交換數據。 所有現代瀏覽器（IE7+，Firefox，Chrome，Safari 和 Opera）都具有內置的`XMLHttpRequest`對象。 如果您使用的是 IE5 或 IE6（我想知道是否有人仍在使用它），則`ActiveXObject`將用于服務器通信以發送 Ajax 請求。 #### 2.1 創建`XMLHttpRequest`對象 這樣創建一個`XMLHttpRequest`的新對象： ```java //Creating a new XMLHttpRequest object var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5 } ``` 可以重新使用此`xmlhttp`變量**發送多個 ajax 請求**，而無需創建新對象。 出于安全原因，`XMLHttpRequest`受瀏覽器的*相同來源策略*約束。 這意味著只有在向原始網頁提供服務的同一服務器上發出請求時，請求才會成功。 ## 3\. `XMLHttpRequest`方法 為了發送請求和設置請求屬性，`XMLHttpRequest`對象具有一些方法。 讓我們來看看他們： #### 3.1 `open(method, url, isAsync, userName, password)` 必須通過打開方法初始化`XMLHttpRequest`對象的 HTTP 和 HTTPS 請求。 此方法指定請求的類型（GET，POST 等），URL，以及是否應異步處理請求。 我將在下一部分中介紹第三個參數。 第四個和第五個參數分別是用戶名和密碼。 如果服務器需要此參數，則可以提供這些參數或僅提供用戶名以進行身份??驗證和授權。 例： ```java xmlhttp.open("GET","report_data.xml",true); xmlhttp.open("GET","sensitive_data.xml",false); xmlhttp.open("POST","saveData",true,"myUserName","somePassord"); ``` #### 3.2 `setRequestHeader(name, value)` 成功初始化請求后，可以調用`XMLHttpRequest`對象的`setRequestHeader`方法**來發送帶有請求**的 HTTP 標頭。 示例： ```java //Tells server that this call is made for ajax purposes. xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); ``` #### 3.3 `send(payload)` **要發送 HTTP 請求**，必須調用`XMLHttpRequest`的`send`方法。 此方法接受單個參數，該參數包含要與請求一起發送的內容。 在 POST 請求中，該內容是必需的。 對于 GET 方法，隱式傳遞`null`作為參數。 示例： ```java xmlhttp.send(null); //Request with no data in request body; Mostly used in GET requests. xmlhttp.send( {"id":"23423"} ); //Request with data in request body; Mostly used in POST/ PUT requests. ``` #### 3.4 `abort()` 如果`XMLHttpRequest`對象的`readyState`尚未變為 4 （請求完成），則此方法**將中止請求**。 `abort`方法確保回調方法不會在異步請求中被調用。 語法： ```java //Abort the processing xmlhttp.abort(); ``` 除上述方法外，`onreadystatechange`事件監聽器非常重要，我們將在下一部分中進行討論。 ## 4\. 同步和異步 ajax 請求 `XMLHttpRequest`對象能夠根據網頁中的要求發送同步和異步請求。 該行為由打開方法的第三個參數**控制**。 對于異步請求，此參數設置為`true`，對于同步請求，此參數設置為`false`。 ```java xmlhttp.open("GET", "report_data.xml", true); //Asynchrnonos request as third parameter is true xmlhttp.open("GET", "report_data.xml", false); Synchrnonos request as third parameter is false ``` 如果未提供，則此參數的**默認值為“`true`”**。 異步 Ajax 請求不會阻止網頁，并且在服務器上處理請求時，用戶可以繼續與頁面上的其他元素進行交互。 您應該始終使用異步 Ajax 請求，因為同步 Ajax 請求會使 UI（瀏覽器）無響應。 這意味著在請求完成之前，用戶將無法與網頁進行交互。 在極少數情況下，應格外小心地使用同步請求。 例如，如果您要使用 ajax 在客戶端上嵌入新的 JavaScript 文件，然后再引用該 JavaScript 文件中的類型和/或對象，則應使用同步 Ajax 請求。 然后，應該通過使用同步 Ajax 請求來包括對該新 JS 文件的提取。 #### 4.1 同步 ajax 請求示例 ```java var request = new XMLHttpRequest(); request.open('GET', '/bar/foo.txt', false); //"false" makes the request synchronous request.send(null); if(request.status === 200) { //request successful; handle the response } else { //Request failed; Show error message } ``` #### 4.2 異步 Ajax 請求示例 ```java var request = new XMLHttpRequest(); request.open('GET', '/bar/foo.txt', true); //"true" makes the request asynchronous request.onreadystatechange = function() { if (request.readyState == 4) { if (request.status == 200) { //request succeed } else { //request failed } } }; request.send(null) ``` #### 4.3 `onreadystatechange`事件 在上面的示例中，`onreadystatechange`是向`XMLHttpRequest`請求注冊的事件監聽器。 `onreadystatechange`存儲一個函數，該函數將處理從服務器返回的響應。 在請求的生命周期中，所有重要事件都將被調用。 每次在請求處理中完成一個步驟時，`readyState`的值都會更改并設置為其他值。 讓我們看一下可能的值： 0：未初始化請求 1：建立服務器連接 2：接收請求 3：處理請求 4：請求已完成，響應已準備就緒 #### 4.4 處理來自服務器的響應 要從服務器獲取響應，請使用`XMLHttpRequest` 對象的`responseText`或`responseXML`屬性。 如果來自服務器的響應是 XML，并且您要將其解析為 XML 對象，請使用`responseXML`屬性。 如果來自服務器的響應不是 XML，請使用`responseText`屬性。 **`responseText`**：從服務器獲取響應作為字符串 **`responseXML`**：從服務器獲取 XML 響應 **示例代碼：** ```java if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { document.getElementById("message").innerHTML = xmlhttp.responseText; } else { alert('Something is wrong !!'); } } ``` ## 5\. Ajax 教程 – 演示 出于演示目的，我創建了一個非常簡單的 HelloWorld 應用。 在此應用中，網頁發送 ajax GET 請求以查詢當前服務器的系統時間。 作為響應，服務器發送當前時間。 很簡單。  #### 5.1 異步請求示例 為了使網頁能夠發送此類請求，我在 JSP 頁面中編寫了以下 javascript 代碼： ```java function ajaxAsyncRequest(reqURL) { //Creating a new XMLHttpRequest object var xmlhttp; if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5 } //Create a asynchronous GET request xmlhttp.open("GET", reqURL, true); //When readyState is 4 then get the server output xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { document.getElementById("message").innerHTML = xmlhttp.responseText; //alert(xmlhttp.responseText); } else { alert('Something is wrong !!'); } } }; xmlhttp.send(null); } ``` 并觸發 ajax 請求，應單擊一個按鈕，其內容為： ```java <input type="button" value="Show Server Time" onclick='ajaxAsyncRequest("get-current-time")'/> ``` 為了處理服務器端的請求，我編寫了一個像這樣的 servlet： ```java public class GetTimeServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet (HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { response.setHeader("Cache-Control", "no-cache"); response.setHeader("Pragma", "no-cache"); PrintWriter out = response.getWriter(); Date currentTime= new Date(); String message = String.format("Currently time is %tr on %tD.",currentTime, currentTime); out.print(message); } } ``` 上面的代碼將以文本形式返回當前服務器時間，以客戶端代碼的形式接收并打印在網頁上。  #### 5.2 同步請求示例 要發送同步 ajax 請求，請使用以下命令更改`index.jsp`文件中的 javascript 代碼： ```java function ajaxSyncRequest(reqURL) { //Creating a new XMLHttpRequest object var xmlhttp; if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5 } //Create a asynchronous GET request xmlhttp.open("GET", reqURL, false); xmlhttp.send(null); //Execution blocked till server send the response if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { document.getElementById("message").innerHTML = xmlhttp.responseText; } else { alert('Something is wrong !!'); } } } ``` 您無需在同步請求中檢查就緒狀態，因為僅當請求完成時響應才可用。 到此為止，頁面將被阻止。 ## 6\. 流行的 ajax 庫 顯而易見，如今，ajax 是使網頁具有高度交互性和用戶友好性的非常流行的技術。 為了簡化與 Ajax 相關組件的開發，當今市場上的開發人員可以使用各種框架。 好消息是它們都可以免費使用。 #### 6.1 jQuery [**jQuery**](https://jquery.com/ "jquery") 可能在其替代品中很受歡迎。 它擁有自己的開發者社區，該社區也非常活躍。 使用 jquery 發送 ajax 請求的示例代碼如下： ```java //Current request reference; can be used else where var request; /* attach a submit handler to the form */ $("#buttonId").submit(function(event) { // abort any pending request if (request) { request.abort(); } /* stop form from submitting normally */ event.preventDefault(); /*clear result div*/ $("#result").html(''); /* get some values from elements on the page: */ var values = $(this).serialize(); /* Send the data using post and put the results in a div */ request =$.ajax({ url: "ajaxRequest", type: "post", data: values, success: function(){ $("#result").html('submitted successfully'); }, error:function(){ $("#result").html('there is error while submit'); } }); }); ``` #### 6.2 Prototype [**Prototype**](http://prototypejs.org/ "prototype") 是另一個用于相同目的的流行框架。 但是，請注意，已知 Prototype 與某些其他框架不兼容。 使用 Prototype 發送 ajax 請求的示例代碼如下所示： ```java new Ajax.Request('/some_url', { method:'get', onSuccess: function(transport) { var response = transport.responseText || "no response text"; }, onFailure: function() { alert('Something went wrong...'); } }); ``` 這就是 **ajax 教程**的全部內容。 將來我會在 ajax 上寫更多文章。 您可能想注冊您的電子郵件 ID，以獲取更新通知。 ## Ajax 教程源代碼下載 [**源碼下載**](https://docs.google.com/file/d/0B7yo2HclmjI4LUxndDZ1SUxjX3M/edit?usp=sharing "ajax demo source code") 學習愉快！