[JS] AJAX GET and POST HTTP request (II)

這一篇文章是延續前一篇：[JS] AJAX GET and POST HTTP request (I)。

先從網頁的主體部份來介紹。這個網頁非常地簡單，只要求輸入使用者的帳號和密碼，然後傳送給後端的伺服器。這裡帳號和密碼都固定為PabloPicasso.G / 0123456789。

<form  action="" method="">

<form>標籤的部份，action=""指的是資料要給後端伺服器的程式處理；method=""指的是傳送的方法 (GET / POST)，這裡都不填，因為我要讓XMLHttpRequest物件來送。

<input type="text" name="nmUsername" value=""/>
<input type="password" name="nmPassword" value=""/>

我們有2筆資料要讓使用者輸入，而Server端也只需要這2筆資料。

<input type="button" value="GET" OnClick="AjaxTest(0);"/>
<input type="button" value="POST" OnClick="AjaxTest(1);"/>

這邊要注意，按鈕的類型一定要是"button"，不能夠是"submit"，因為我們在Send出XMLHTTPRequest物件時，就已經是一個Submit的行為；如果這邊也用submit，就變成送出2次，我們的程序反而會出錯。

<div id="ajax-ServerBack"></div>

最後，我們再獨立一個區塊出來；假如，我們有成功地送出HTTP GET / POST Request，就會再這邊顯示相對應的文字。

再回過頭來看JavaScript的部份：

var g_strUri = function() {
    var strTemp = window.location.protocol + "//" + window.location.host;

    if (window.location.port)
        strTemp += ":" + window.location.port;

    return strTemp;
};

這個函式很簡單，就只為了取得Web Server的IP Address，像http://192.168.1.18:80；假如瀏灠器不支援window.location.port，就變成http://192.168.1.18

var request = function()
{
    var i = -1;
    var activexmodes = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"];

    if (window.ActiveXObject) {
        for (i = 0; i < activexmodes.length; i++) {
            try {
                return new ActiveXObject(activexmodes[i]);
            }
            catch (e) {
            //suppress error
            }
        }
    }
    else if (window.XMLHttpRequest)
        return new XMLHttpRequest();
    else {
        alert("Don't create any ActiveXObject / XMLHttpRequest!! \n");
        return false;
    }
}

request()這個Function，就是用來建立XMLHTTPRequest物件。如果是用比較舊一點的MSIE，是用ActiveXObject來建立；其它的瀏灠器則是用XMLHttpRequest。接下來的AjaxTest()才是重點，我們該怎麼送??

var ajaxRequest = new request();
var strUsername = document.forms[0].nmUsername.value;
var strPassword = document.forms[0].nmPassword.value;
var strUri = g_strUri() + "/JavaScriptAjax.html";
var strData = "nmUsername=" + strUsername + "&nmPassword=" + strPassword;

我們先宣告一個XMLHttpRequest的物件變數：ajaxRequest。然後把使用者所輸入的帳密給串接起來，長得像這樣：nmUsername=PabloPicasso.G&nmPassword=0123456789；而我們要給後端Server處理的網址則是：http://192.168.1.18:80/JavaScriptAjax.html。因為我們的後端並沒有任何程序來處理，所以就直接指到我們自己的網頁。

下面的if-else判斷就非常容易理解；假如是以GET來送出HTTP Request，送出的資料長得像這樣：

ajaxRequest.open("GET", "http://192.168.1.18:80/JavaScriptAjax.html?nmUsername=PabloPicasso.G&nmPassword=0123456789", true);
ajaxRequest.send(null);

網址後面先接一個"?"；後面的每一筆資料則是用"&"做區隔。假如是以POST方式送出，則是長得像這樣：

ajaxRequest.open("POST", "http://192.168.1.18:80/JavaScriptAjax.html", true);
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxRequest.send("nmUsername=PabloPicasso.G&nmPassword=0123456789");

最後這一段：

//document.getElementById("ajax-ServerBack").innerHTML = ajaxRequest.responseText;
  document.getElementById("ajax-ServerBack").innerHTML = "AJAX: Success!! ";

假如我們的AJAX程序正常地運作，且能夠從Web Server收到HTTP Response，就會跑到上述的2行程式碼。因為我們後端並沒有程序再做處理，所以ajaxRequest.responseText並不會有任何東西，所以我把它註解掉；取而代之的是在原本的<div id="ajax-ServerBack"></div>區塊秀出AJAX: Success!! 的訊息。

下一篇，再簡介一下XMLHTTPRequest這個物件。

(To be continue....)