Ajax專題：異步交互局部刷新初步

從一個用戶名校驗的例子來認識Ajax的基礎應用

首先建立html事件觸發端的代碼

<!--ajax方式下不須要使用表單來進行數據提交，所以不用寫表單標籤-->
<!--ajax方式不須要name屬性，須要一個id的屬性-->
<input type="text" id="username" />
<input type="button" value="校驗" onclick="verify()"/>
<!--這個div用於存放服務器段返回的信息，開始爲空-->
<!--id屬性定義是爲了利用dom的方式找到某一個節點，進行操做-->
<div id="result"></div>
當咱們獲得服務器端返回的數據後動態的填充到div標記中

而後，服務器端咱們建立一個Servlet命名爲AJAXServer,用於校驗客戶端的數據並返回，實際上客戶端的數據是由咱們的AJAX引擎接收到並傳給服務器端，而後再由AJAX引擎接收到服務器端的數據，返回給客戶端動態加載的，這是一個異步的機制，這是後話，咱們先來建立咱們的Servlet

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
public class AJAXServer extends HttpServlet{
    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        doGet(httpServletRequest, httpServletResponse);
    }
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        try{
            httpServletResponse.setContentType("text/html;charset=utf-8");
            PrintWriter out = httpServletResponse.getWriter();
            //1.取參數  
            String old = httpServletRequest.getParameter("name");
            //2.檢查參數是否有問題
            if(old == null || old.length() == 0){
                out.println("用戶名不能爲空");
            } else{
                String name = URLDecoder.decode(old,"UTF-8");
                //3.校驗操做,模擬數據並無真正的取數據庫信息，這個不是客戶端關心的，客戶端只看是否是服務器返回的數據
                if(name.equals("jerry")){
                    //4。和傳統應用不一樣之處。這一步須要將用戶感興趣的數據返回給頁面端，而不是將一個新的頁面發送給用戶
                    out.println("用戶名[" + name + "]已經存在，請使用其餘用戶名" );
                } else{
                    out.println("用戶名[" + name + "]還沒有存在，可使用該用戶名註冊 ");
                }
            }
        } catch(Exception e){
            e.printStackTrace();
        } 
    }
}

好了，服務器端校驗完成，開始建立咱們真正的AJAX應用了，來建立咱們對應到客戶端html中的js文件了，取名爲checkUserName，固然咱們不能忘了再客戶端html文件中引入咱們建立的js文件<script type="text/javascript" src="jslib/checkUserName.js"></script>
下面咱們來具體來建立操做的代碼

var xmlhttp;
function verify(){
    //1.使用dom的方式獲取文本框中的數據
    //document.getElementById("username")是dom中獲取元素節點的一種方法，一個元素節點對應HTML頁面中的一個標籤，若是<input>
    //.value能夠獲取一個元素節點的value屬性值
    var userName = document.getElementById("username").value;
    //2.建立XMLHTTPRequest對象
    //這是XMLHTTPRequest對象五步使用中最複雜的一步
    //需呀針對IE和其它類型的瀏覽器創建這個對象的不一樣方式寫不一樣的代碼

    if(window.XMLHttpRequest){
        //針對FireFox，Mozillar，Opera，Safari，IE7，IE8
        xmlhttp = new XMLHttpRequest();
        //針對某些特定banben的mozillar瀏覽器的BUG進行修正
        if(xmlhttp.overrideMimeType){
          xmlhttp.overrideMimeType("text/xml");  
        }

    }else if(window.ActiveXObject){
         //針對IE5,IE5.5,IE6(IE7,IE8)
         //兩個能夠用於建立XMLHTTPRequest對象的控件名稱，保存在一個js數組中
        //排在前面的版本較新
       var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
       for(var i=0;i<activexName.length;i++){
           try{
             //取出一個控件名進行建立，若是建立成功就終止循環
             //若是建立失敗，拋出異常，而後繼續循環，繼續嘗試建立
             xmlhttp = new ActiveXObject(activexName[i]);
               break;
           }   catch(e){
           }
       }
  }
    //確認XMLHttpRequest對象建立成功
    if(!xmlhttp){
        alert("XMLHttpRequest對象建立失敗");
        return;
    }else{
        alert(xmlhttp);
    }

    //2.註冊回調函數
    //註冊回調函數時，只須要函數名，不要加括號
    //咱們須要將函數名註冊，若是加上括號，就會把函數的返回值註冊上，這是錯誤的
    xmlhttp.onreadystatechange=callback;
    
    //3.設置連接信息
    //第一個參數表示http的請求方式，支持全部http的方式，主要使用get和post
    //第二個參數表示請求的url地址，get方式請求的參數也會在URL中
    //第三個參數表示採用異步仍是同步方式交互，true表示異步
    xmlhttp.open("GET","AJAXServer?name="+ userName,true);

    //4.發送數據，開始和服務器端進行交互
    //同步範式下，send這句話會在服務器端數據回來後才執行完
    //異步方式下，send這句話會當即完成執行
    xmlhttp.send(null);

// Post請求方式的代碼
xmlhttp.open("POST","AJAXServer",true);
//POST方式須要本身設置http的請求頭
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式發送數據
xmlhttp.send("name=" + userName);

}
//回調函數
function callback(){
    //5接收響應數據
    //判斷對象的狀態是交互完成
    if(xmlhttp.readyState == 4){
        //判斷http的交互是否成功
        if(xmlhttp.status == 200){
            //獲取服務器端返回的數據
            //獲取服務器端輸出的純文本數據
            var responseText = xmlhttp.responseText;
            //將數據顯示在頁面上
            //經過dom的方式找到div標籤所對應的元素節點
            var divNode = document.getElementById("result");
            //設置元素節點中的html內容
            divNode.innerHTML = responseText;
        }
    }
}

好了，AJAX應用的具體步驟代碼中都有詳細的解釋了，一個簡單的AJAX的應用完成了，趕快試試吧