Ajax的簡單使用

標籤：style   blog   http   java   color   使用   

1.簡介

AJAX = Asynchronous JavaScript And XML（非同步 JavaScript 及 XML）

AJAX 是 Asynchronous JavaScript And XML 的首字母縮寫。

AJAX 並不是一種新的程式設計語言，而僅僅是一種新的技術，它可以建立更好、更快且互動性更強的 web 應用程式。

AJAX 使用 JavaScript 在 網頁瀏覽器與 網頁伺服器之間來發送和接收資料。

通過在幕後與 網頁伺服器交換資料，而不是每當使用者作出改變時重載整個 web 頁面，AJAX 技術可以使網頁更迅速地響應。

 

 

2.使用方法

接下來做一個用Ajax實現頁面單機按鈕顯示使用者是否存在的執行個體.

 

2.1 建立 XMLHttpRequest 對象

XMLHttpRequest對象是Ajax技術的關鍵,其作用是用於在後台與伺服器交換資料.該對象的建立方式如下:

1 function ajaxFunction(){2     var xmlReq;3     try{4         xmlReq = new XMLHttpRequest();5     }catch(e){6         xmlReq = new new ActiveXObject("MSXML2.XMLHTTP.3.0");7     }8     return xmlReq;9 }

 

 

2.2 與伺服器交換資料

通過XMLHttpRequest對象和伺服器交換資訊的過程分為5步:
1.擷取XMLHttpRequest對象.
2.onreadystatechange 事件:時刻返回相應狀態.
3.開啟與伺服器串連.
4.發送資訊給伺服器.
5.得到伺服器的資訊.
具體步驟可查看W3School教程:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

 1 window.onload = function(){ 2         document.getElementById("ajax").onclick = function(){ 3             var xmlReq = ajaxFunction(); 4             //onreadystatechange 事件,當返回狀態為4時表示成功 5             xmlReq.onreadystatechange = function(){ 6                 if(xmlReq.readyState == 4){ 7                     if(xmlReq.status == 200 || xmlReq.status == 304){ 8                         //得到伺服器發送的資料 9                         var info = xmlReq.responseText;10                         //頁面顯示11                         document.getElementById("usernameView").innerHTML = info;12                     }13                 }14             };15             //開啟與一個Servlet的互動16             xmlReq.open("post", "../servlet/AjaxServlet?timeStamp="+new Date().getTime(),true);17             //佈建要求頭，這樣xmlReq.send()方法發送的資料，伺服器才能接受到18             xmlReq.setRequestHeader("content-type", "application/x-www-form-urlencoded");19             20             var username = document.getElementById("username").value;21             //項伺服器發送資料22             xmlReq.send("username="+username);23             24         };25 };

 

2.3 Servlet處理請求

Servlet用於對傳過來的資料進行處理,一般都是查詢資料庫進行比對,這裡只是個Demo,所以沒用資料庫.

 1 package cn.itcast.web.servlet; 2  3 import java.io.IOException; 4  5 import javax.servlet.ServletException; 6 import javax.servlet.http.HttpServlet; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 10 public class AjaxServlet extends HttpServlet {11 12     public void doGet(HttpServletRequest request, HttpServletResponse response)13             throws ServletException, IOException {14         request.setCharacterEncoding("utf-8");15         response.setCharacterEncoding("utf-8");16         response.setContentType("text/html;charset=utf-8");17         //得到請求值18         String username = request.getParameter("username");19         if("sa".equals(username)){20             response.getWriter().println("使用者名稱已經存在");21         }else{22             response.getWriter().println("使用者名稱可用");23         }24         25     }26 27     public void doPost(HttpServletRequest request, HttpServletResponse response)28             throws ServletException, IOException {29         doGet(request, response);30     }31  }

 

3.Ajax優缺點

1.使用Ajax的最大優點，就是能在不更新整個頁面的前提下維護資料。這使得Web應用程式更為迅捷地回應使用者動作，並避免了在網路上發送那些沒有改變的資訊。
2.Ajax不需要任何瀏覽器外掛程式，但需要使用者允許JavaScript在瀏覽器上執行.
3.對應用Ajax最主要的批評就是，它可能破壞瀏覽器的後退功能.

詳細資料可查看維基百科:http://zh.wikipedia.org/zh/AJAX