一：得到XMLHttpRequest

同步請求，一請求一響應。

非同步請求，多請求多響應。區域性重新整理。

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  new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                return new ActiveXObject("Microsoft.XMLHTTP")
            }catch (e) {
                alert(
 
"無法識別該瀏覽器，請更換！")
                throw e;
            }
        }
    }
}

二：開啟與伺服器的連線

XMLHttp.open();　　用來開啟與伺服器的連線，需要三個引數。

　　·請求方式：GET或者POST

　　·請求的URL：指定伺服器端資源，例如：/108920_1/day1

　　`請求是否為非同步：如果為true表示傳送非同步請求，否則同步請求！

xmlHttp.open("GET", "/108920_1/day1", true);

三：傳送請求

xmlHttp.send(null): 如果不給引數可能會造成部分瀏覽器無法傳送！
 

　　·引數就是請求體內容！如果是GET請求，必須給出null。(GET沒有請求體)

四：狀態解析

在XMLHttp物件的一個事件上註冊監聽器：onreadystatechange

xmlHttp物件一共有五個狀態：

　　·0狀態：剛建立，還沒有呼叫！

　　·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;
    }
}

在MyEclipse中建立WebProject

並通過servlet建立後端檔案

通過jsp建立前端

程式碼

throws ServletException, IOException {
        System.out.println("Hello AJAX!");
        response.getWriter().print("Hello AJAX!!");

<script type="text/javascript">
function createXMLHttpRequest() {
    try{
    return new XMLHttpRequest();
    }catch(e){
        try{
        return new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
            return new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
                alter("請更換瀏覽器！")
                throw e;
            }
        }
    }
}

window.onload = function() {//文件載入完成後
    var btn = document.getElementById("btn");
    btn.onclick = function() {//給按鈕的點選事件註冊監聽
    /*
            ajax四步操作
            得到伺服器的響應
            把響應結果顯示到h1中
    */
    //1.得到非同步物件
    var xmlHttp = createXMLHttpRequest();
    /*2.開啟與伺服器的連線:
        *指定請求的方式
        *指定請求的url
        *指定是否為非同步請求
    */
    xmlHttp.open("GET", "/Web/ASer", true);
    //3.傳送請求
    xmlHttp.send(null);    //GET請求沒有請求體，但也要給出null，否則瀏覽器可能不會發送
    //4.給非同步物件的 onreadystatechange事件註冊監聽器
    xmlHttp.onreadystatechange = function() {//當XMLHttp的狀態傳送變化是執行
        // 雙重判斷：狀態4表示伺服器的響應結束，狀態碼200表示響應成功
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            // 獲取伺服器的響應結束
            var text = xmlHttp.responseText;
            //獲取h1元素
            var h1 = document.getElementById("h1");
            h1.innerHTML = text; 
            }
        }
    }
}
</script>

<button id="btn">點選這裡</button>
    <h1 id="h1">1</h1>

部署後

經供參考