1.什麼是ajax?

     ajax與伺服器進行互動的技術，載體是JavaScript，最大的特點是頁面不重新整理，官方名稱為：XMLHttpRequest。

2.建立ajax物件

       由於ajax的物件在不同瀏覽器是不一樣的，主要分為主流瀏覽器(火狐、谷歌等)和IE瀏覽器(6/7/8)，所以在建立物件時，要區分瀏覽器(IE瀏覽器(6/7/8)沒有XMLHttpRequest物件)，為ajax建立不同的物件。

(1)主流瀏覽器

var  xhr = new XMLHttpRequest();

(2)IE瀏覽器（6/7/8）

var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //最原始的ajax物件
var xhr = new ActiveXObject('Msxml2.XMLHTTP'); //升級
var xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0'); //升級
var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0'); //最高版本，停止維護

(3)判讀是否為主流瀏覽器

if (typeof  XMLHttpRequest != 'undefined'){
    //1.主流瀏覽器
    var  xhr = new XMLHttpRequest();
}else {
    //IE瀏覽器（6/7/8）
    var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //最原始的ajax物件
    var xhr = new ActiveXObject('Msxml2.XMLHTTP'); //升級
    var xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0'); //升級
    var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0'); //最高版本，停止維護
}
 

3.建立http請求

//建立http請求，這裡的xhr為上面的ajax物件
xhr.open("GET/POST","請求路徑",true/false); //true為非同步請求，false為同步請求，不設定預設true

4.傳送請求

//傳送請求，這裡的xhr為ajax物件
xhr.send(null); //GET請求，如果是GET請求請用這句
xhr.send(DATAS); //POST請求,DATAS為post請求的資料，如果是POST請求請用這句

5.得到伺服器響應的資料

//得到伺服器響應的資料
/**
 * ajax在發起請求時，要隨時感知狀態。
 * onreadystatechange事件，用來感知ajax的狀態的變化，並且這個事件要寫在建立請求和傳送請求之前。
 * readyState屬性，表示了ajax的請求狀態，它有五種狀態，
 *      0-->建立ajax物件完畢
 *      1-->有呼叫open方法
 *      2-->有呼叫send方法
 *      3-->伺服器的資料只返回了一部分
 *      4-->伺服器資料全部返回，ajax請求完畢。
 * responseText屬性，以字串的形式接收伺服器端返回的資訊
 * responseXML屬性，以xml形式接收伺服器端返回的資訊
 * status 伺服器的響應狀態碼，200表示成功響應
 */
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
        console.log(xhr.responseXML);
    }
}
 

6.一個簡單完整的ajax請求

//建立物件
if (typeof  XMLHttpRequest != 'undefined'){
    //1.主流瀏覽器
    var  xhr = new XMLHttpRequest();
}else {
    //IE瀏覽器（6/7/8）
    var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //最原始的ajax物件
    var xhr = new ActiveXObject('Msxml2.XMLHTTP'); //升級
    var xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0'); //升級
    var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0'); //最高版本，停止維護
}
//感知ajax請求的狀態，如果readyState的值為4，伺服器響應狀態碼status為200，請求完畢
//這個事件要寫在open方法跟send方法之前，為了感知其狀態
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
        console.log(xhr.responseXML);
    }
}
//建立http請求
xhr.open("GET","register.do",true); //true為非同步請求，false為同步請求，不設定預設true

//傳送請求，這裡的xhr為ajax物件
xhr.send(null);