Ajax 使用 POST 傳送

這篇文章是想要將所學到的 Ajax 做一個簡單的紀錄
這裡再次感謝小正正教室。

原始碼

1. /* 針對不同瀏覽器的前置處理宣告 */ 
2. if (typeof(XMLHttpRequest)=="undefined" && window.ActiveXObject) { 
3.    XMLHttpRequest=function(){ 
4.        var arrSignatures = [ 
5.            "MSXML2.XMLHTTP.5.0", 
6.            "MSXML2.XMLHTTP.4.0", 
7.            "MSXML2.XMLHTTP.3.0", 
8.            "MSXML2.XMLHTTP", 
9.            "Microsoft.XMLHTTP"]; 
10.        for (var i = 0; i < arrSignatures.length; i++) { 
11.            try{ 
12.                var oRequest = new ActiveXObject(arrSignatures[i]); 
13.                return oRequest; 
14.            }catch(oError){/*ignore*/} 
15.        } 
16.        throw new Error("MSXML is not installed on your system."); 
17.    }; 
18. } 
19.  
20. /* 傳送連接 */ 
21. function convectionLink(){ 
22.    /*建立傳送的資料 */ 
23.    var postData = 'user=xxxx&pass=xxxx'; 
24.    /*產生要求資料的 URL 位址*/ 
25.    var sURL = "check_in.php"; 
26.    /* 建立 XMLHttpRequest 物件，並且送要求 */ 
27.    var oRequest = new XMLHttpRequest(); 
28.    /* 設定(傳送的方式,要求的位址,是否非同步進行) */ 
29.    oRequest.open("POST", sURL, true); 
30.    /* 使用 POST 傳送必須設定 MIME 型態 */ 
31.    oRequest.setRequestHeader( 
32.        'Content-Type', 
33.        'application/x-www-form-urlencoded' 
34.    ); 
35.  
36.    /* 建立接收資料的函數 */ 
37.    oRequest.onreadystatechange = function(){ 
38.        /* readyState 所有可能的傳送狀態值如下： 
39.         0 (還沒開始) 
40.         1 (讀取中) 
41.         2 (已讀取) 
42.         3 (資訊交換中) 
43.         4 (請求完成) */ 
44.        if (oRequest.readyState == 4) { 
45.            /* (在此處加入開啟已停用選項的設置) */ 
46.            /* 處理傳回為 200 的 HTTP 狀態碼 */ 
47.            if (oRequest.status == 200) { 
48.                /* 接受資料成功 */ 
49.                /*可以從responseText或responseXML取得傳回的資料*/ 
50.                json = oRequest.responseText; 
51.  
52.                /* 處理其他錯誤 HTTP 狀態碼 */ 
53.            }else{ 
54.                /*接收資料失敗，可以從 statusText 取得錯誤狀態資訊*/ 
55.                alert(oRequest.statusText); 
56.            } 
57.        } 
58.    } 
59.  
60.    /* (在此處可以加入一些網頁選項停用的設置,以防止重複送出) */ 
61.  
62.    /* 送出 Ajax 要求 */ 
63.    oRequest.send(postData); 
64.    /*以POST傳送時,這裡可以輸入(XML,串流,字串,JSON格式)*/ 
65.    /*以GET傳送時,這裡只要輸入 null 或是空的 */ 
66. } 

/* 針對不同瀏覽器的前置處理宣告 */
if (typeof(XMLHttpRequest)=="undefined" && window.ActiveXObject) {
    XMLHttpRequest=function(){
        var arrSignatures = [
            "MSXML2.XMLHTTP.5.0",
            "MSXML2.XMLHTTP.4.0",
            "MSXML2.XMLHTTP.3.0",
            "MSXML2.XMLHTTP",
            "Microsoft.XMLHTTP"];
        for (var i = 0; i < arrSignatures.length; i++) {
            try{
                var oRequest = new ActiveXObject(arrSignatures[i]);
                return oRequest;
            }catch(oError){/*ignore*/}
        }
        throw new Error("MSXML is not installed on your system.");
    };
}

/* 傳送連接 */
function convectionLink(){
    /*建立傳送的資料 */
    var postData = 'user=xxxx&pass=xxxx';
    /*產生要求資料的 URL 位址*/
    var sURL = "check_in.php";
    /* 建立 XMLHttpRequest 物件，並且送要求 */
    var oRequest = new XMLHttpRequest();
    /* 設定(傳送的方式,要求的位址,是否非同步進行) */
    oRequest.open("POST", sURL, true);
    /* 使用 POST 傳送必須設定 MIME 型態 */
    oRequest.setRequestHeader(
        'Content-Type',
        'application/x-www-form-urlencoded'
    );

    /* 建立接收資料的函數 */
    oRequest.onreadystatechange = function(){
        /* readyState 所有可能的傳送狀態值如下：
         0 (還沒開始)
         1 (讀取中)
         2 (已讀取)
         3 (資訊交換中)
         4 (請求完成) */
        if (oRequest.readyState == 4) {
            /* (在此處加入開啟已停用選項的設置) */
            /* 處理傳回為 200 的 HTTP 狀態碼 */
            if (oRequest.status == 200) {
                /* 接受資料成功 */
                /*可以從responseText或responseXML取得傳回的資料*/
                json = oRequest.responseText;

                /* 處理其他錯誤 HTTP 狀態碼 */
            }else{
                /*接收資料失敗，可以從 statusText 取得錯誤狀態資訊*/
                alert(oRequest.statusText);
            }
        }
    }

    /* (在此處可以加入一些網頁選項停用的設置,以防止重複送出) */

    /* 送出 Ajax 要求 */
    oRequest.send(postData);
    /*以POST傳送時,這裡可以輸入(XML,串流,字串,JSON格式)*/
    /*以GET傳送時,這裡只要輸入 null 或是空的 */
}

參考網頁：
小正正教室：Ajax 兩層連動選單

相關連結：
爪哇豆的秘密：AJAX深度歷險1(Getting Started)
Ajax内部交流文档
MoztwWiki：AJAX 上手篇
維基百科：AJAX
語言技術：Ajax Gossip