ajax數(shù)據(jù)傳輸方式實例詳解
更新時間：2015年12月01日 12:04:35 作者：Jeff Wong
這篇文章主要介紹了ajax數(shù)據(jù)傳輸方式,結(jié)合實例形式較為詳細的分析總結(jié)了ajax數(shù)據(jù)傳輸?shù)脑砼c傳輸文本、xml及json格式數(shù)據(jù)的具體實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了ajax數(shù)據(jù)傳輸方式。分享給大家供大家參考，具體如下：
在異步應(yīng)用程序中發(fā)送和接收信息時，常見的可以選擇以純文本和XML作為數(shù)據(jù)格式（可參考《jQuery學(xué)習(xí)筆記之Ajax用法實例詳解》）,現(xiàn)在還有一種比較流行的方式：JSON（JavaScript Object Notation）。好了，下面舉例說明這三種數(shù)據(jù)格式在ajax的異步應(yīng)用。
一、純文本方式
1、發(fā)送/接收數(shù)據(jù)：
Code is cheap.看代碼：
testJs.js
// 此函數(shù)等價于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }
// 創(chuàng)建 XMLHttpRequest對象，以發(fā)送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();
// 發(fā)送ajax處理請求(這里簡單驗證用戶名和密碼的有效性，默認(rèn)正確的輸入：用戶名和密碼都是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)); // 發(fā)送文本
}
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
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxOperations.aspx.cs" Inherits="WebTest2008.AjaxOperations" %>
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"];
/* 測試用 實際項目中可以對數(shù)據(jù)庫進行檢索等等相關(guān)操作，這里簡化了 */
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、發(fā)送XML數(shù)據(jù)
testJs.js
// 此函數(shù)等價于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }
// 創(chuàng)建 XMLHttpRequest對象，以發(fā)送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();
// 發(fā)送ajax處理請求(這里簡單驗證用戶名和密碼的有效性，默認(rèn)正確的輸入：用戶名和密碼都是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); // 發(fā)送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文件內(nèi)容不變，服務(wù)器端.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數(shù)據(jù)(這里需要注意接受xml數(shù)據(jù)的方法)
}
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數(shù)據(jù)：
我們看到，上面兩個.js文件里處理返回數(shù)據(jù)時都用到了xmlReq.responseText的屬性，下面我們試試看xmlReq.responseXML屬性：
testJs.js
// 此函數(shù)等價于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }
// 創(chuàng)建 XMLHttpRequest對象，以發(fā)送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();
// 發(fā)送ajax處理請求(這里簡單驗證用戶名和密碼的有效性，默認(rèn)正確的輸入：用戶名和密碼都是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); // 發(fā)送XML
}
function callBack() {
if (xmlReq.readyState == 4) {
if (xmlReq.status == 200) {
var xmlDoc = xmlReq.responseXML; // 接收XML
// var nodes = xmlDoc.childNodes;
// alert("文件根標(biāo)簽的名稱： " + xmlDoc.documentElement.tagName);
// alert("根元素共有子節(jié)點個數(shù): " + 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文件內(nèi)容不變，服務(wù)器端.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數(shù)據(jù)
}
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"); // 這里必須要設(shè)置，否則客戶端接收不到這里寫好的xml文件
Response.Write(responseXmlTxt); // 寫xml
Response.End();
}
}
}
}
好了，前面兩種方法是大家平時開發(fā)中比較熟悉的方式，下面我們來看看第三種方式。
三、JSON方式
json的準(zhǔn)備知識：
json是一種簡單的數(shù)據(jù)格式，比xml更輕巧。json是JavaScript 的原生格式，這意味著在 JavaScript 中處理json格式的 數(shù)據(jù)不需要任何特殊的API 或工具包。json的語法規(guī)則其實很簡單：對象是一個無序的“‘名稱/值'對”集合。一個對象以“{”（左括號）開始，“}”（右括號）結(jié)束。每個“名稱”后跟一個“:”（冒號）；“‘名稱/值' 對”之間使用“,”（逗號）分隔?？磦€例子先：
function testJson() {
//定義一個user(json的格式,其實就是定義一個js函數(shù)(變量)的方式而已)
var user =
{
"username": "jeff wong",
"age": 25,
"info": { "tel": "12345678", "cellphone": "13312345678" },
"address": // 數(shù)組
[
{ "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數(shù)據(jù)。json提供了json.js包，專門提供了幾種常用的json處理函數(shù)。下載下來，（json.js點擊此處本站下載。） ，將其引入然后就可以簡單的使用object.toJSONString()轉(zhuǎn)換成json數(shù)據(jù)?？创a：
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()方法來轉(zhuǎn)換json數(shù)據(jù)到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()方法
}
關(guān)于json.js的學(xué)習(xí)，請參考網(wǎng)上其他資源，這里我不再贅述了。說了這么多，實踐環(huán)節(jié)開始了：
ajax利用json發(fā)送/接收數(shù)據(jù)：
// 此函數(shù)等價于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }
// 創(chuàng)建 XMLHttpRequest對象，以發(fā)送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();
// 發(fā)送ajax處理請求(這里簡單驗證用戶名和密碼的有效性，默認(rèn)正確的輸入：用戶名和密碼都是test)
function validatePwd(oTxt) {
var url = "/AjaxOperations.aspx?action=jsonOp";
// JSON就只是文本,由于不需要特殊編碼而且每個服務(wù)器端腳本都能處理文本數(shù)據(jù)，所以可以輕松利用JSON并將其應(yīng)用到服務(wù)器。
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); // 發(fā)送JSON(在服務(wù)器上解釋JSON)
}
function callBack() {
if (xmlReq.readyState == 4) {
if (xmlReq.status == 200) {
var jsonStr = xmlReq.responseText.parseJSON().toJSONString(); //轉(zhuǎn)化為json數(shù)據(jù)
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代碼稍作調(diào)整如下：
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[] { '{', '}' }); // 在服務(wù)器上解釋JSON需要引用一個能夠轉(zhuǎn)化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程序設(shè)計有所幫助。
相關(guān)文章
Ajax 和 Asp 的編程...2006-10-10
ajax中的async屬性值之同步和異步及同步和異步區(qū)別
在Jquery中ajax方法中async用于控制同步和異步，當(dāng)async值為true時是異步請求，當(dāng)async值為fase時是同步請求。ajax中async這個屬性，用于控制請求數(shù)據(jù)的方式，默認(rèn)是true，即默認(rèn)以異步的方式請求數(shù)據(jù)。2015-10-10
這篇文章主要為大家詳細介紹了ajaxFileupload實現(xiàn)多文件上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
本文為大家介紹下ajax如何打開新窗口，下面有段代碼，需要的朋友可以了解下2014-01-01
據(jù)不可靠消息JavaScript是用Unicode UTF-8作為內(nèi)碼的，但是在目前混亂的瀏覽器環(huán)境中各種錯誤都有，特別是加入了更加混亂的AJAX后2013-07-07
jQuery+Ajax+PHP實現(xiàn)“喜歡”評級功能附源碼下載
有同學(xué)問我如何實現(xiàn)一個像美麗說那樣的“我喜歡”評級功能，當(dāng)用戶看到自己喜歡的圖片或文章時，點擊“紅心”按鈕，系統(tǒng)會自動記錄用戶的點擊，并將總數(shù)加1。這樣再結(jié)合不同的系統(tǒng)，可以將此功能應(yīng)用到投票或收藏商品中去（如淘寶的收藏商品）。2015-10-10
我們都知道，異步刷新是ajax中非常重要的一個功能，這篇文章主要來介紹一下有關(guān)ajax中異步刷新的知識，以及一個簡單的注冊案例。感興趣的小伙伴可以了解一下2021-11-11
jquery訪問servlet并返回數(shù)據(jù)到頁面的方法
這篇文章主要介紹了jquery訪問servlet并返回數(shù)據(jù)到頁面的方法,實例分析了jQuery操作servlet實現(xiàn)Ajax的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
本文給大家分享的是原生javascript結(jié)合ajax實現(xiàn)的異步交互的方法和代碼，非常的簡單實用，有需要的小伙伴可以參考下。2016-01-01
AJAX POST的使用實例 @ 2008-12-3 晚上調(diào)試成功2008-12-12