Asynchronous Javascript And Xml 的縮寫

AJAX的基本概念：

構建網頁的一種綜合使用JavaScript和XML的技術；

不是什麽劃時代的技術；

HTML網頁的異步傳輸技術：

在等待網頁的傳輸過程中，用戶依然可以和系統進行交互；

頁面不用刷新就可以更新內容，合理的運用可以讓用戶感覺更好更方便，但也不要濫用。

典型的流程：

1 客戶端觸發異步操作

2 創建新的XMLHttpRequest對象

3 與Server進行連接

4 服務器端進行連接處理

5 返回包含處理結果的XML文檔

6 XMLHttpRequest對象接收處理結果並分析

7 更新頁面

XMLHttpRequest

是重要的Javascript對象，通過它提起對服務器端的請求；

可以通過Javascript提起請求，如果要提起多個請求，需要多個XHR對象；

請求的結果被預先定義好的方法處理。

使用案例：使用不刷新頁面的驗證方法

客戶端觸發：

<input type="text" id="username" name="username" onblur="validateUsername();">　　

相應的js代碼：

 1 <script type="text/javascript">
 2      var req;
 
 3      function validate() {
 4         var idField = document.getElementById("username");
 5         var url = "validate.jsp?" + escape(idField.value);
 6         if(window.XMLHttpRequest) {
 7             req = new XMLHttpRequest();
 8         } else if(window.ActiveXObject) {
 9             req = new
 
 ActiveXObject();
10         } else {
11             alert("不識別的瀏覽器!");
12         }
13         req.open("GET",url,true);
14         req.onreadystatechange = callback;
15         req.send(null);
16         
17      }
18      
19      function callback() {
20          if(req.readyState == 4) {
21              if(req.status == 200) {
22                  var msg = req.responseXML.getElementsByTagName("msg")[0];
23                  setMsg(msg.childNodes[0].nodeValue);
24              }
25          }
26      }
27   
28      function setMsg(msg) {
29          if(msg == "invalid") {
30              document.getElementById("usermsg")
                        .innerHTML = "<font color=‘red‘>已存在</font>";
31          } else {
32              document.getElementById("usermsg")
                        .innerHTML = "<font color=‘green‘>通過</font>"; 
33          }
34      }
35   </script>

相應的Serverlet代碼（使用JSP）：

<% 
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-store");//HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader("Expires",0);//prevents caching at the proxy server
response.getWriter().write("<msg>invalid</msg>");
%>

原生AJAX簡單說明