Ajax是多種技術的集合(Asynchronous JavaScript and XML)
1.JavaScript負責操作XMlHttpRequest對象來跟資料庫打交道 2.DOM(文件物件模型)負責資料的動態顯示和互動 3.XML(可擴充標識語言)負責資料的交換和處理 4.XMLHttpRequest負責資料的非同步讀取 5.XHTML(可擴充超文字標記語言 (HTML))和CSS(層疊樣式表)編寫結構化的web頁面 6.json
優點
1.無重新整理請求處理資料。
缺點
1.要求IE5.0,Mozilla1.0,NetScape7以上。
2.對流媒體和PDA之類的支援不是很好。
Ajax的一般流程(Request/Server模式)
對象初始化--->發送請求--->伺服器接受--->伺服器響應並返回--->用戶端接受--->修改用戶端頁面內容
首先寫一個JSP頁面（裡麵包含JS代碼），如下：
Code:
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <html>
- <head>
- <title> 登入頁面 </title>
- <link rel=stylesheet href="css/login.css" type="text/css">
- <script type="text/javascript">
- //聲明一個全域的XMLHttpRequest對象
- var xmlhttp_request;
- //聲明一個標籤
- var message;
- function check(){
- var username=document.getElementById("usernameID").value;
- message=document.getElementById("message");
- message.innerHTML="正在檢測使用者名稱.....";
- try{
- //用於擷取支援IE瀏覽器的XMLHttpRequest對象
- if(window.ActiveXObject){
- for( var i = 5;i; i-- ){
- try{
- if( i == 2 ){
- xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");//大於5.0
- //
- alert("1:"+xmlhttp_request.readyState);
- }
- else{
- xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );////3.0或4.0, 5.0
- xmlhttp_request.setRequestHeader("Content-Type","text/xml");
- xmlhttp_request.setRequestHeader("Charset","gb2312");
- }
- break;
- }catch(e){
- xmlhttp_request = false;
- }
- }
- }
- else if(window.XMLHttpRequest)//非IE瀏覽器Mozilla﹑Netscape﹑Safari等瀏覽器
- {
- xmlhttp_request = new XMLHttpRequest();
- if (xmlhttp_request.overrideMimeType){
- xmlhttp_request.overrideMimeType('text/xml');
- }
- }
- }
- catch(e){
- xmlhttp_request = false;
- }
- //開啟一個串連
- alert("2:"+xmlhttp_request.readyState);
- alert(username);
- //xmlhttp_request.open("get","http://localhost:8080/ajax/check?name="+username,true);
- xmlhttp_request.open("post","http://localhost:8080/ajax/check",true);
- //POST請求要佈建要求頭
- xmlhttp_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
- //指定處理伺服器端相應的函數
- alert("3:"+xmlhttp_request.readyState);
- xmlhttp_request.onreadystatechange=handle;
- //get發送請求
- //xmlhttp_request.send(null);
- //post發送請求
- xmlhttp_request.send("name="+username);
- }
-
- function handle(){
- alert("4:"+xmlhttp_request.readyState);
- if(xmlhttp_request.readyState==4){
- alert(xmlhttp_request.status);
- if(xmlhttp_request.status==200){
- var result=xmlhttp_request.responseText;
- alert(result);
- message.innerHTML=result;
- alert("5:"+xmlhttp_request.readyState);
- }
- }
- }
-
- </script>
- </head>
- <body>
- <h1 align="center">使用者登入頁面</h1>
- <hr color="blue">
- <div align="center">
- <form action="login.do" method="post">
- <table cellspacing=5 border=5 bodercolor=#ffaa00 >
- <tr><th colspan="3" align="center" bgcolor=#ffaa00>使用者登入</th></tr>
- <tr>
- <th rowspan="3" background="images/2.jpg" style="width=90px"></th>
- <td>使用者名稱：</td><td><input id="usernameID" type="text" class="message" name="username" onBlur="check()"><label id="message"></label></td></tr>
- <tr><td>密 碼：</td><td><input id="userpasswordID" class="message" type="password" name="userpassword" ></td></tr>
- <tr><td colspan="2" align="center"><input type="submit" value="註冊"> <input type="reset" value="重設"></td></tr>
- </table>
- </form>
- </div>
- </body>
- </html>
本頁面中的重點就是js代碼中的xmlhttp_request對象，它是XMLHTTP組件的對象，XMLHttpRequest對象在大部分瀏覽器上已經實現而且擁有一個簡單的介面允許資料從用戶端傳遞到服務端，但並不會打斷使用者當前的操作。使用XMLHttpRequest傳送的資料可以是任何格式，雖然從名字上建議是XML格式的資料。
接下來我們寫一個寫一個serlet來處理xmlhttp_request對象發送過來的資料，當前例子傳送的資料為username的值，如下：
Code:
- package myclass.serlet;
-
- import java.io.IOException;
- import java.io.PrintWriter;
-
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
-
- public class Check extends HttpServlet {
-
- protected void service(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- //輸出資料流
- PrintWriter out=null;
- out=response.getWriter();
- String name=request.getParameter("name");
- System.out.print(name);
- if("liping".equals(name)){
- out.println("sorry,user name:"+name+" has existed");
- }else{
- out.println("congratulation,user name: "+name+" can use");
- }
- out.flush();
- out.close();
- }
- }
servlet中使用printwriter輸出資料流來向用戶端返回處理結果，前面JS中使用function handle()函數來處理，這樣就實現了AJAX局部重新整理。使用者在填寫使用者名稱後，游標一離開，就產生一個onchange()事件，使用者名稱的值就立刻通過xmlhttp_request對象對值傳到servlet中進行驗證，驗證後馬上把資訊返回，顯示到頁面，實現了局部重新整理的效果。
這就是AJAX。
