本文实例讲述了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."）;} elsealert（"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
复制代码 代码如下:<%@ 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"];/* 测试用 实际项目中可以对数据库进行检索等等相关操作，这里简化了 */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 XMLxmlReq.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."）;} elsealert（"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 XMLxmlReq.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."）;} elsealert（"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）; // 写xmlResponse.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 JSONxmlReq.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."）;} elsealert（"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.Netif （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程序设计有所帮助。
易网时代-编程资源站