在 AJAX 請求中，最常見的客戶端傳遞參數(shù)的方式有兩種：一種是 GET 請求，另一種是 POST 請求。POST 請求是向服務器傳送數(shù)據(jù)，而 GET 請求是從服務器上獲取數(shù)據(jù)。GET 請求傳送的數(shù)據(jù)量非常小，而 POST 請求傳送的數(shù)據(jù)量較大，一般被默認為不受限制。

發(fā)送 GET 請求

在 JavaScript 中，發(fā)送 GET 請求簡單、方便，適用于簡單字符串，不適用于大容量或加密數(shù)據(jù)。實現(xiàn)方法：將包含查詢字符串的 URL 傳入 open() 方法，設置第 1 個參數(shù)值為 GET 即可。服務器能夠通過查詢字符串接收用戶信息。

示例

下面示例以 GET 方式向服務器傳遞一條信息 callback=functionName。

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); //發(fā)送請求

console.log(xhr.responseText); //接收數(shù)據(jù)

}

}

在服務器端文件(server.php)中輸入下面的代碼，獲取查詢字符串中 callback 的參數(shù)值，并把該值響應給客戶端。

echo $_GET['callback'];

?>

在瀏覽器中預覽頁面，當單擊提交按鈕時，在控制臺顯示傳遞的參數(shù)值。

查詢字符串通過問號?作為前綴附加在 URL 的末尾，發(fā)送數(shù)據(jù)是以連字符&連接的一個或多個名值對。

發(fā)送 POST 請求

在 JavaScript 中，POST 請求允許發(fā)送任意類型、長度的數(shù)據(jù)，多用于表單提交，以 send() 方法進行傳遞，而不以查詢字符串的方式進行傳遞。POST 字符串與 GET 字符串的格式相同。格式如下：

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

示例

使用 POST 方法向服務器傳遞數(shù)據(jù)。

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'); //發(fā)送請求

console.log(xhr.responseText); //接收數(shù)據(jù)

}

}

在 open() 方法中，設置第一個參數(shù)為 POST，然后使用 setRequestHeader() 方法設置請求消息的內(nèi)容類型為“application/x-www-form-urlencoded”，它表示傳遞的是表單值，一般使用 POST 發(fā)送請求時都必須設置該選項，否則服務器無法識別傳遞過來的數(shù)據(jù)。

在服務器端設計接收 POST 方式傳遞的數(shù)據(jù)，并進行響應。

echo $_POST['callback'];

?>

將 JSON 轉換為字符串

GET 和 POST 方法都是以名值對的字符串格式發(fā)送數(shù)據(jù)的。

對象信息

下面是一個包含 3 個名值對的 JSON 類型數(shù)據(jù)。

{ user : 'css8', pass : '123456', email : 'css8@123.cn' }

將 JSON 數(shù)據(jù)轉換為串行格式化顯示如下。

'user='css8' & pass='123456' & email='css8@123.cn''

數(shù)組信息

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

[{name : 'user', value : 'css8'} , {name : 'pass', value : '123456'), {name : 'email', value : 'css8@123.cn'}]

將上面數(shù)據(jù)轉換為串行格式顯示如下。

'user='css8' & pass='123456' & email='css8@123.cn''

【示例】為了方便開發(fā)，下面定義一個工具函數(shù)，該函數(shù)能夠把數(shù)據(jù)轉換為串行格式化字符串并返回。

//把JSON數(shù)據(jù)轉換為串行字符串

//參數(shù)：data表示數(shù)組或對象類型的數(shù)據(jù)

//返回值：串行字符串

function JSONtoString (data) {

var a = []; //臨時數(shù)組

if (data.constructor == Array) { //處理數(shù)組

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('&'); //把數(shù)組轉換為串行字符串，并返回

}