本文執行個體講述了ajax資料轉送方式。分享給大家供大家參考，具體如下：
在非同步應用程式中發送和接收資訊時，常見的可以選擇以純文字和XML作為資料格式（可參考《jQuery學習筆記之Ajax用法執行個體詳解》）,現在還有一種比較流行的方式：JSON（JavaScript Object Notation）。好了，下面舉例說明這三種資料格式在ajax的非同步應用。
一、純文字方式
1、發送/接收資料：
Code is cheap.看代碼：
testJs.js
// 此函數等價於document.getElementById /document.allfunction $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }// 建立 XMLHttpRequest對象，以發送ajax請求 function createXMLHTTP() { var xmlHttp = false; 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 { xmlHttp = new ActiveXObject(arrSignatures[i]); return xmlHttp; } catch (oError) { xmlHttp = false; //ignore } } // throw new Error("MSXML is not installed on your system."); if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } return xmlHttp;}var xmlReq = createXMLHTTP();// 發送ajax處理請求(這裡簡單驗證使用者名稱和密碼的有效性，預設正確的輸入：使用者名稱和密碼都是test)function validatePwd(oTxt) { var url = "/AjaxOperations.aspx"; xmlReq.open("post", url, true); xmlReq.setRequestHeader("Content-Length", oTxt.value.length + $("txtUserName").value.length); xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlReq.onreadystatechange = callBack; xmlReq.send("action=chkPwd&userInfos=" + escape(oTxt.value + "/" + $("txtUserName").value)); // 發送文本}function callBack() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { alert(xmlReq.responseText); // 接收文本 } else if (xmlReq.status == 404) { alert("Requested URL is not found."); } else if (xmlReq.status == 403) { alert("Access denied."); } else alert("status is " + xmlReq.status); }}
幾個附加檔案源碼：
jsTest.htm
<html><head><title>js test</title> <script src="js/testJs.js" type="text/javascript"></script> </head><body><form id="form1"><div> 使用者名稱：<input id="txtUserName" name="txtUserName" type="text" /> 密碼：<input id="txtPwd" name="txtPwd" type="password" onblur="validatePwd(this)" /></div></form></body></html>
AjaxOperations.aspx
AjaxOperations.aspx.cs
using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace WebTest2008{ public partial class AjaxOperations : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "chkPwd") { string responseTxt = "使用者名稱和密碼不匹配！"; string tempStr = Request["userInfos"]; /* 測試用 實際項目中可以對資料庫進行檢索等等相關操作，這裡簡化了 */ if (tempStr.Split(new char[] { '/' }, StringSplitOptions.RemoveEmptyEntries)[0] == "test" && tempStr.Split(new char[] { '/' }, StringSplitOptions.RemoveEmptyEntries)[1] == "test") { responseTxt = "驗證通過！"; } Response.Write(responseTxt); } } }}
一一儲存檔案，ctrl+F5，運行試試看吧。
上面這種方式是最簡單最直接也是最有效方式。熟練使用最佳。
二、XML方式
1、發送XML資料
testJs.js
// 此函數等價於document.getElementById /document.allfunction $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }// 建立 XMLHttpRequest對象，以發送ajax請求 function createXMLHTTP() { var xmlHttp = false; 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 { xmlHttp = new ActiveXObject(arrSignatures[i]); return xmlHttp; } catch (oError) { xmlHttp = false; //ignore } } // throw new Error("MSXML is not installed on your system."); if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } return xmlHttp;}var xmlReq = createXMLHTTP();// 發送ajax處理請求(這裡簡單驗證使用者名稱和密碼的有效性，預設正確的輸入：使用者名稱和密碼都是test)function validatePwd(oTxt) { var url = "/AjaxOperations.aspx?action=xmlOp"; var xmlStr = "<profile>" + " <userName>" + escape($("txtUserName").value) + "</userName>" + " <userPwd>" + escape($("txtPwd").value) + "</userPwd>" + "</profile>"; xmlReq.open("post", url, true); // Tell the server you're sending it XML xmlReq.setRequestHeader("Content-Type", "text/xml"); // 這裡注意 xmlReq.onreadystatechange = callBack; xmlReq.send(xmlStr); // 發送XML}function callBack() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { alert(xmlReq.responseText); // 接收文本 } else if (xmlReq.status == 404) { alert("Requested URL is not found."); } else if (xmlReq.status == 403) { alert("Access denied."); } else alert("status is " + xmlReq.status); }}
jsTest.htm檔案不變，AjaxOperations.aspx的HTML檔案內容不變，伺服器端.CS處理代碼如下：
AjaxOperations.aspx.cs
using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Xml;namespace WebTest2008{ public partial class AjaxOperations : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "xmlOp") // 處理xml { XmlDocument doc = new XmlDocument(); try { doc.Load(Request.InputStream); //擷取xml資料(這裡需要注意接受xml資料的方法) } catch (Exception ex) { throw ex; } string responseTxt = ""; string tempName = doc.SelectSingleNode("profile/userName").InnerText; string tempPwd = doc.SelectSingleNode("profile/userPwd").InnerText; if (tempName == "test" && tempPwd == "test") { responseTxt = "驗證通過！"; } else responseTxt = "驗證失敗！"; Response.Write(responseTxt); // 寫文本 } } }}
很簡單的代碼，運行看看吧。
2、接收XML資料：
我們看到，上面兩個.js檔案裡處理返回資料時都用到了xmlReq.responseText的屬性，下面我們試試看xmlReq.responseXML屬性：
testJs.js
// 此函數等價於document.getElementById /document.allfunction $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }// 建立 XMLHttpRequest對象，以發送ajax請求 function createXMLHTTP() { var xmlHttp = false; 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 { xmlHttp = new ActiveXObject(arrSignatures[i]); return xmlHttp; } catch (oError) { xmlHttp = false; //ignore } } // throw new Error("MSXML is not installed on your system."); if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } return xmlHttp;}var xmlReq = createXMLHTTP();// 發送ajax處理請求(這裡簡單驗證使用者名稱和密碼的有效性，預設正確的輸入：使用者名稱和密碼都是test)function validatePwd(oTxt) { var url = "/AjaxOperations.aspx?action=xmlOp"; var xmlStr = "<profile>" + " <userName>" + escape($("txtUserName").value) + "</userName>" + " <userPwd>" + escape($("txtPwd").value) + "</userPwd>" + "</profile>"; xmlReq.open("post", url, true); // Tell the server you're sending it XML xmlReq.setRequestHeader("Content-Type", "text/xml"); xmlReq.onreadystatechange = callBack; xmlReq.send(xmlStr); // 發送XML}function callBack() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { var xmlDoc = xmlReq.responseXML; // 接收XML // var nodes = xmlDoc.childNodes; // alert("檔案根標籤的名稱： " + xmlDoc.documentElement.tagName); // alert("根項目共有子節點個數: " + xmlDoc.documentElement.childNodes.length); alert(xmlDoc.documentElement.childNodes(0).text); } else if (xmlReq.status == 404) { alert("Requested URL is not found."); } else if (xmlReq.status == 403) { alert("Access denied."); } else alert("status is " + xmlReq.status); }}
同樣，jsTest.htm檔案不變，AjaxOperations.aspx的HTML檔案內容不變，伺服器端.CS處理代碼稍作修改如下：
using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Xml;namespace WebTest2008{ public partial class AjaxOperations : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "xmlOp") // 處理xml { XmlDocument doc = new XmlDocument(); try { doc.Load(Request.InputStream); //擷取xml資料 } catch (Exception ex) { throw ex; } string responseXmlTxt = ""; string tempName = doc.SelectSingleNode("profile/userName").InnerText; string tempPwd = doc.SelectSingleNode("profile/userPwd").InnerText; if (tempName == "test" && tempPwd == "test") { responseXmlTxt = "<?xml version=\"1.0\" encoding=\"utf-8\" ?> <msg>驗證通過！</msg>"; // 測試用，簡單的xml檔案 } else responseXmlTxt = "<?xml version=\"1.0\" encoding=\"utf-8\" ?><msg>驗證失敗！</msg>"; Response.ContentType = ("text/xml;charset=UTF-8"); // 這裡必須要設定，否則用戶端接收不到這裡寫好的xml檔案 Response.Write(responseXmlTxt); // 寫xml Response.End(); } } }}
好了，前面兩種方法是大家平時開發中比較熟悉的方式，下面我們來看看第三種方式。
三、JSON方式
json的準備知識：
json是一種簡單的資料格式，比xml更輕巧。json是JavaScript 的原生格式，這意味著在 JavaScript 中處理json格式的 資料不需要任何特殊的API 或工具包。json的文法規則其實很簡單：對象是一個無序的“‘名稱/值'對”集合。一個對象以“{”（左括弧）開始，“}”（右括弧）結束。每個“名稱”後跟一個“:”（冒號）；“‘名稱/值' 對”之間使用“,”（逗號）分隔。看個例子先：
function testJson() { //定義一個user(json的格式,其實就是定義一個js函數(變數)的方式而已) var user = { "username": "jeff wong", "age": 25, "info": { "tel": "12345678", "cellphone": "13312345678" }, "address": // 數組 [ { "city": "beijing", "postcode": "101110" }, { "city": "ny city", "postcode": "911119" } ] } alert(user.username); alert(user.age); alert(user.info.cellphone); alert(user.address[0].city); alert(user.address[0].postcode); user.username = "xiao wang"; alert(user.username); }
上面的定義方式看起來很簡單，但是如果欄位眾多，命名方式混雜，出錯的機率大大增加，怎麼辦？這時候你就會想到用程式的方式產生json資料。json提供了json.js包，專門提供了幾種常用的json處理函數。下載下來，（json.js點擊此處本站下載。） ，將其引入然後就可以簡單的使用object.toJSONString()轉換成json資料。看代碼：
function Car(maker, model, year, color) { this.maker = maker; this.model = model; this.year = year; this.color = color;}function testJson() { var tempCar = new Car("VW", "S", 1999, "yellow"); alert(tempCar.toJSONString());}
也可以使用eval或者parseJSON()方法來轉換json資料到object：
function testJson() { var str = '{ "name": "jeff wong", "age": 25,"address":"beijing"}'; var tempObj = eval('(' + str + ')'); alert(tempObj.toJSONString()); //使用eval方法 var tempObj1 = str.parseJSON(); alert(tempObj1.toJSONString()); // 或者使用parseJSON()方法}
關於json.js的學習，請參考網上其他資源，這裡我不再贅述了。說了這麼多，實踐環節開始了：
ajax利用json發送/接收資料：
// 此函數等價於document.getElementById /document.allfunction $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }// 建立 XMLHttpRequest對象，以發送ajax請求 function createXMLHTTP() { var xmlHttp = false; 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 { xmlHttp = new ActiveXObject(arrSignatures[i]); return xmlHttp; } catch (oError) { xmlHttp = false; //ignore } } // throw new Error("MSXML is not installed on your system."); if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } return xmlHttp;}var xmlReq = createXMLHTTP();// 發送ajax處理請求(這裡簡單驗證使用者名稱和密碼的有效性，預設正確的輸入：使用者名稱和密碼都是test)function validatePwd(oTxt) { var url = "/AjaxOperations.aspx?action=jsonOp"; // JSON就只是文本,由於不需要特殊編碼而且每個伺服器端指令碼都能處理文本資料，所以可以輕鬆利用JSON並將其應用到伺服器。 var str = '{ "userName":"' + $("txtUserName").value + '", "userPwd": "' + $("txtPwd").value + '"}'; var jsonStr = str.parseJSON().toJSONString(); // you're sending it JSON xmlReq.open("post", url, true); xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlReq.onreadystatechange = callBack; xmlReq.send("sendStr=" + jsonStr); // 發送JSON(在伺服器上解釋JSON)}function callBack() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { var jsonStr = xmlReq.responseText.parseJSON().toJSONString(); //轉化為json資料 alert(jsonStr); } else if (xmlReq.status == 404) { alert("Requested URL is not found."); } else if (xmlReq.status == 403) { alert("Access denied."); } else alert("status is " + xmlReq.status); }}
附加檔案，AjaxOperations.aspx的html頁面沒有改變，AjaxOperations.aspx.cs代碼稍作調整如下：
using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace WebTest2008{ public partial class AjaxOperations : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "jsonOp") // 處理JSON { string responseJsonTxt = ""; string tempStr = Request["sendStr"].Trim(new char[] { '{', '}' }); // 在伺服器上解釋JSON需要引用一個能夠轉化JSON的組件:Json.Net,這裡簡單測試，略過Json.Net if (tempStr.Split(new char[] { ',' })[0].Split(new char[] { ':' })[1] == "\"test\"" && tempStr.Split(new char[] { ',' })[1].Split(new char[] { ':' })[1] == "\"test\"") { responseJsonTxt = "{\"msg\":\"驗證通過！\"}"; // 測試用 } else responseJsonTxt = "{\"msg\":\"驗證失敗！\"}"; Response.Write(responseJsonTxt); Response.End(); } }
jsTest.html引入json.js檔案（必須下載json.js檔案，否則js報錯），如下：
<html><head> <title>js test</title> <script src="js/json.js" type="text/javascript"></script> <script src="js/testJs.js" type="text/javascript"></script></head><body> <form id="form1"> <div> 使用者名稱：<input id="txtUserName" name="txtUserName" type="text" /> 密碼：<input id="txtPwd" name="txtPwd" type="password" onblur="validatePwd(this)" /></div> </form></body></html>
希望本文所述對大家ajax程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
