|
在 AJAX 請求中，最常見的客戶端傳遞參數(shù)的方式有兩種：一種是 GET 請求，另一種是 POST 請求。POST 請求是向服務(wù)器傳送數(shù)據(jù)，而 GET 請求是從服務(wù)器上獲取數(shù)據(jù)。GET 請求傳送的數(shù)據(jù)量非常小，而 POST 請求傳送的數(shù)據(jù)量較大，一般被默認為不受限制。 發(fā)送 GET 請求 在 JavaScript 中，發(fā)送 GET 請求簡單、方便，適用于簡單字符串，不適用于大容量或加密數(shù)據(jù)。實現(xiàn)方法：將包含查詢字符串的 URL 傳入 open() 方法，設(shè)置第 1 個參數(shù)值為 GET 即可。服務(wù)器能夠通過查詢字符串接收用戶信息。 示例 下面示例以 GET 方式向服務(wù)器傳遞一條信息 callback=functionName。 window.onload = function () { //頁面初始化 var b = document.getElementsByTagName('input')[0]; b.onclick = function () { var url = 'server.php?callback=functionName'； //設(shè)置查詢字符串 var xhr = createXHR(); //實例化XMLHttpRequest 對象 xhr.open('GET', url, false); //建立連接，要求同步響應(yīng) xhr.send(null); //發(fā)送請求 console.log(xhr.responseText); //接收數(shù)據(jù) } } 在服務(wù)器端文件(server.php)中輸入下面的代碼，獲取查詢字符串中 callback 的參數(shù)值，并把該值響應(yīng)給客戶端。 echo $_GET['callback']; ?> 在瀏覽器中預(yù)覽頁面，當(dāng)單擊提交按鈕時，在控制臺顯示傳遞的參數(shù)值。 查詢字符串通過問號?作為前綴附加在 URL 的末尾，發(fā)送數(shù)據(jù)是以連字符&連接的一個或多個名值對。 發(fā)送 POST 請求 在 JavaScript 中，POST 請求允許發(fā)送任意類型、長度的數(shù)據(jù)，多用于表單提交，以 send() 方法進行傳遞，而不以查詢字符串的方式進行傳遞。POST 字符串與 GET 字符串的格式相同。格式如下： send('name1=value1&name2=value2...'); 示例 使用 POST 方法向服務(wù)器傳遞數(shù)據(jù)。 window.onload = function () { //頁面初始化 var b = document.getElementsByTagName('input')[0]; b.onclick = function () { var url = 'server.php'; //設(shè)置請求的地址 var xhr = createXHR(); //實例化XMLHttpRequest 對象 xhr.open('POST', url, false); //建立連接，要求同步響應(yīng) xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded'); //設(shè)置為表單方式提交 xhr.send('callback=functionName'); //發(fā)送請求 console.log(xhr.responseText); //接收數(shù)據(jù) } } 在 open() 方法中，設(shè)置第一個參數(shù)為 POST，然后使用 setRequestHeader() 方法設(shè)置請求消息的內(nèi)容類型為“application/x-www-form-urlencoded”，它表示傳遞的是表單值，一般使用 POST 發(fā)送請求時都必須設(shè)置該選項，否則服務(wù)器無法識別傳遞過來的數(shù)據(jù)。 在服務(wù)器端設(shè)計接收 POST 方式傳遞的數(shù)據(jù)，并進行響應(yīng)。 echo $_POST['callback']; ?> 將 JSON 轉(zhuǎn)換為字符串 GET 和 POST 方法都是以名值對的字符串格式發(fā)送數(shù)據(jù)的。 對象信息 下面是一個包含 3 個名值對的 JSON 類型數(shù)據(jù)。 { user : 'css8', pass : '123456', email : 'css8@123.cn' } 將 JSON 數(shù)據(jù)轉(zhuǎn)換為串行格式化顯示如下。 '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ù)轉(zhuǎn)換為串行格式顯示如下。 'user='css8' & pass='123456' & email='css8@123.cn'' 【示例】為了方便開發(fā)，下面定義一個工具函數(shù)，該函數(shù)能夠把數(shù)據(jù)轉(zhuǎn)換為串行格式化字符串并返回。 //把JSON數(shù)據(jù)轉(zhuǎn)換為串行字符串 //參數(shù)：data表示數(shù)組或?qū)ο箢愋偷臄?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ù)組轉(zhuǎn)換為串行字符串，并返回 } |
|
|
