在使用過JQuery之後，再來看JavaScript的Ajax實現就會覺得很麻煩，不過，最近使用到了，就記錄一下吧

在JavaScript中Ajax的實現可以分為四步：

第一步 得到XMLHttpRequest對象

得到XMLHttpRequest
> 大多數瀏覽器都支持：var xmlHttp = new XMLHttpRequest();
> IE6.0：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
> IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

編寫創建XMLHttpRequest對象的函數

function createXMLHttpRequest() {
        try {
            return new XMLHttpRequest();
        } catch (e) {
            try {
                return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
            } catch (e) {
                try {
                    return
 
 ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本    
                } catch (e) {
                    alert("瀏覽器不支持");
                    throw e;
                }
            }
        }
    };

第二步 打開與服務器的鏈接

xmlHttp.open()：用來打開與服務器的連接，它需要三個參數：
> 請求方式：可以是GET或POST
> 請求的URL：指定服務器端資源，例如一個Servlet

 xmlHttp.open("GET", "/AServlet", true);

第三步 發送請求(分為GET和POST方式)

* xmlHttp.send(null)：如果不給可能會造成部份瀏覽器無法發送
> 參數：就是請求體內容！如果是GET請求，必須給出null

第四步 給XMLHttpRequest對象的onreadystatechange事件註冊監聽器，以監聽服務器響應

* 在xmlHttp對象的一個事件上註冊監聽器：onreadystatechange
* xmlHttp對象一共有5個狀態：
> 0狀態：剛創建，還沒有調用open()方法;
> 1狀態：請求開始：調用了open()方法，但還沒有調用send()方法
> 2狀態：調用完了send()方法了；
> 3狀態：服務器已經開始響應，但不表示響應結束了！
> 4狀態：服務器響應結束！（通常我們只關心這個狀態！！！）
* 得到xmlHttp對象的狀態：
> var state = xmlHttp.readyState;//可能是0、1、2、3、4
* 得到服務器響應的狀態碼
> var status = xmlHttp.status;//例如為200、404、500
* 得到服務器響應的內容
> var content = xmlHttp.responseText;//得到服務器的響應的文本格式的內容
> var content = xmlHttp.responseXML;//得到服務器的響應的xml響應的內容，它是Document對象了

  xmlHttp.onreadystatechange = function() {//xmlHttp的5種狀態都會調用本方法
      if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//雙重判斷：判斷是否為4狀態，而且還要判斷是否為200
          // 獲取服務器的響應內容
      var text = xmlHttp.responseText;
      }
  };

示例代碼

準備工作：在頁面（jsp）中寫兩句HTML，一個按鈕，一個段落

    <input type="button" value="點擊" id="btn"/>
    <h1 id="h1"></h1>

先來看看GET方式的Ajax：

<script type="text/javascript">
    function createXMLHttpRequest() {
        try {
            return new XMLHttpRequest();
        } catch (e) {
            try {
                return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
            } catch (e) {
                try {
                    return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本    
                } catch (e) {
                    alert("瀏覽器不支持");
                    throw e;
                }
            }
        }
    };
    window.onload = function() {
        var btn=document.getElementById("btn");
        btn.onclick=function(){    
            //第一步:得到XMLHttpRequest對象
            var xmlHttp = createXMLHttpRequest();
            //第二步:打開與服務器的連接
            xmlHttp.open("GET", "${pageContext.request.contextPath}/AServlet",true);
            //第三步:發送請求(GET方式必須指定null)
            xmlHttp.send(null);
            //第四步:給異步對象的onreadystatechange事件註冊監聽器
            xmlHttp.onreadystatechange = function() {
                //雙重判斷：狀態4 響應碼200
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //獲得服務器的響應
                    var text = xmlHttp.responseText;
                    //處理h1元素
                    var h1 = document.getElementById("h1");
                    h1.innerHTML = text;
                }
            };
        };
    };
</script>

獲得XMLHttpRequest對象方式會有瀏覽器差異，所以createXMLHttpRequest()方法處理一下，在這裏我使用的是Servlet

AServlet如下：

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AServlet extends HttpServlet {

    public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Hello Ajax");
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().print("Hello Ajax");
    }
    
    public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        System.out.println("POST(:)Hello Ajax");
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().print("POST(:)Hello Ajax"+req.getParameter("userName"));
    }
}

Servlet完成的工作還算簡單，值得說的是必須給response指定請求頭 setContentType()

POST方式的Ajax提交方式：

<script type="text/javascript">
    function createXMLHttpRequest() {
        try {
            return new XMLHttpRequest();
        } catch (e) {
            try {
                return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
            } catch (e) {
                try {
                    return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本    
                } catch (e) {
                    alert("瀏覽器不支持");
                    throw e;
                }
            }
        }
    };
    window.onload = function() {
        var btn=document.getElementById("btn");
        btn.onclick=function(){    
            //第一步:得到XMLHttpRequest對象
            var xmlHttp = createXMLHttpRequest();
            //第二步:打開與服務器的連接
            xmlHttp.open("POST", "${pageContext.request.contextPath}/AServlet",true);
            //POST方式需要處理請求頭
            xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
            //第三步:發送請求
            xmlHttp.send("userName=lz");
            //第四步:給異步對象的onreadystatechange事件註冊監聽器
            xmlHttp.onreadystatechange = function() {
                //雙重判斷：狀態4 響應碼200
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //獲得服務器的響應
                    var text = xmlHttp.responseText;
                    //處理h1元素
                    var h1 = document.getElementById("h1");
                    h1.innerHTML = text;
                }
            };
        };
    };
</script>

與GET方式不同的之處在於POST需要處理請求頭，使用send()方法時需要給出需要的參數，就是這兩點不同吧

封裝Ajax

因為JavaScript的Ajax處理較為麻煩且固定，在這裏完成一個簡單封裝，類似於JQuery中的$.ajax()方法的實現

ajaxUtils.js :

//處理瀏覽器差異，獲得XMLHttpRequest
function createXMLHttpRequest(){
    try{
        return new XMLHttpRequest();     //大多數瀏覽器
    }catch (e) {
        try {
            return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
        } catch (e) {
            try {
                return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本    
            } catch (e) {
                alert("瀏覽器不支持");
                throw e;
            }
        }
    }
}

/*
 * option對象有如下屬性
 */
         /*請求方式method,*/ 
        /*請求的url url,*/  
        /*是否異步 asyn,*/ 
        /*請求體 params, */
        /*回調方法 callback,*/
        /*服務器響應數據轉換成什麽類型 type*/
        /*url和callback沒有默認值,必須指定*/
function ajax(option){
    /**
     * 1.得到XMLHttpRequest
     */
     var xmlHttp=createXMLHttpRequest();
     /**
      * 2.打開連接
      */
      if(!option.method){   //默認為GET請求
          option.method="GET";
      }
      if(option.asyn==undefined){  //默認為異步
          option.asyn=true;
      }
      xmlHttp.open(option.method, option.url, option.asyn);
      /**
       * 3.判斷是否為POST
       */
       if("POST" == option.method) {
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    /**
     * 4.發送請求
     */
     xmlHttp.send(option.params);
     /**
      * 5.註冊監聽
      */
      xmlHttp.onreadystatechange=function(){
          if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//雙重判斷
            var data;
            // 獲取服務器的響應數據，進行轉換！
            if(!option.type) {//如果type沒有賦值，那麽默認為文本
                data = xmlHttp.responseText;
            } else if(option.type == "xml") {
                data = xmlHttp.responseXML;
            } else if(option.type == "text") {
                data = xmlHttp.responseText;
            } else if(option.type == "json") {
                var text = xmlHttp.responseText;
                data = eval("(" + text + ")");
            }
            
            // 調用回調方法
            option.callback(data);
        }
      };
};

我們直接在頁面中使用ajax()方法即可，註意 url和callback沒有默認值,必須指定

頁面中使用：

<script type="text/javascript" src="${pageContext.request.contextPath}/js/ajaxUtils.js"></script>
<script type="text/javascript">
  window.onload=function(){
      var btn=document.getElementById("btn");
      btn.onclick=function(){
          ajax({
              url:"${pageContext.request.contextPath}/AServlet",
              callback:function(data){
                  document.getElementById("h1").innerHTML=data;
              }
          });
      };
  };
</script>

data就是服務器返回的數據

JavaScript筆記——使用AJax