AJAX傳送GET和POST請求

在 AJAX 請求中，最常見的用戶端傳遞引數的方式有兩種：一種是 GET 請求，另一種是 POST 請求。POST 請求是向伺服器傳送資料，而 GET 請求是從伺服器上獲取資料。GET 請求傳送的資料量非常小，而 POST 請求傳送的資料量較大，一般被預設為不受限制。

傳送 GET 請求

在 JavaScript 中，傳送 GET 請求簡單、方便，適用於簡單字串，不適用於大容量或加密資料。實現方法：將包含查詢字串的 URL 傳入 open() 方法，設定第 1 個引數值為 GET 即可。伺服器能夠通過查詢字串接收使用者資訊。

範例

下面範例以 GET 方式向伺服器傳遞一條資訊 callback=functionName。

<input name="submit" type="button" id="submit" value="向伺服器發出請求" />
<script>
    window.onload = function () {  //頁面初始化
        var b = document.getElementsByTagName("input")[0];
        b.onclick = function () {
            var url = "server.php?callback=functionName"；  //設定查詢字串
            var xhr = createXHR();  //範例化XMLHttpRequest 物件
            xhr.open("GET", url, false);  //建立連線，要求同步響應
            xhr.send(null);  //傳送請求
            console.log(xhr.responseText);  //接收資料
        }
    }
</script>

在伺服器端檔案（server.php）中輸入下面的程式碼，獲取查詢字串中 callback 的引數值，並把該值響應給用戶端。

<?php
    echo $_GET["callback"];
?>

在瀏覽器中預覽頁面，當單擊提交按鈕時，在控制台顯示傳遞的引數值。

查詢字串通過問號?作為字首附加在 URL 的末尾，傳送資料是以連字元&連線的一個或多個名值對。

傳送 POST 請求

在 JavaScript 中，POST 請求允許傳送任意型別、長度的資料，多用於表單提交，以 send() 方法進行傳遞，而不以查詢字串的方式進行傳遞。POST 字串與 GET 字串的格式相同。格式如下：

send("name1=value1&name2=value2...");

範例

使用 POST 方法向伺服器傳遞資料。

window.onload = function () {  //頁面初始化
    var b = document.getElementsByTagName("input")[0];
    b.onclick = function () {
        var url = "server.php";  //設定請求的地址
        var xhr = createXHR();  //範例化XMLHttpRequest 物件
        xhr.open("POST", url, false);  //建立連線，要求同步響應
        xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded');  //設定為表單方式提交
        xhr.send("callback=functionName");  //傳送請求
        console.log(xhr.responseText);  //接收資料
    }
}

在 open() 方法中，設定第一個引數為 POST，然後使用 setRequestHeader() 方法設定請求訊息的內容型別為“application/x-www-form-urlencoded”，它表示傳遞的是表單值，一般使用 POST 傳送請求時都必須設定該選項，否則伺服器無法識別傳遞過來的資料。

在伺服器端設計接收 POST 方式傳遞的資料，並進行響應。

<?php
    echo $_POST["callback"];
?>

將 JSON 轉換為字串

GET 和 POST 方法都是以名值對的字串格式傳送資料的。

物件資訊

下面是一個包含 3 個名值對的 JSON 型別資料。

{ user : "css8", pass : "123456", email : "[email protected]" }

將 JSON 資料轉換為序列格式化顯示如下。

'user="css8" & pass="123456" & email="[email protected]"'

陣列資訊

下面是一組有序的 JSON 資訊，包含多個值。

[{name : "user", value : "css8"} , {name : "pass", value : "123456"), {name : "email", value : "[email protected]"}]

將上面資料轉換為序列格式顯示如下。

'user="css8" & pass="123456" & email="[email protected]"'

【範例】為了方便開發，下面定義一個工具函數，該函數能夠把資料轉換為序列格式化字串並返回。

//把JSON資料轉換為序列字串
//引數：data表示陣列或物件型別的資料
//返回值：序列字串
function JSONtoString (data) {
    var a = [];  //臨時陣列
    if (data.constructor == Array) {  //處理陣列
        for (var i = 0; i < data.length; i ++) {
            a.push(data[i].name + "=" + encodeURIComponent(data[i].value));
        }
    } else {  //處理物件
        for (var i in data) {
            a.push(i + "=" + encodeURIComponent(data[i]));
        }
    }
    return a.join("&");  //把陣列轉換為序列字串，並返回
}