ajax数据传输方式实例详解
程序员文章站
2023-10-31 14:28:58
本文实例讲述了ajax数据传输方式。分享给大家供大家参考，具体如下：
在异步应用程序中发送和接收信息时，常见的可以选择以纯文本和xml作为数据格式（可参考《jquery学...
本文实例讲述了ajax数据传输方式。分享给大家供大家参考，具体如下：
在异步应用程序中发送和接收信息时，常见的可以选择以纯文本和xml作为数据格式（可参考《jquery学习笔记之ajax用法实例详解》）,现在还有一种比较流行的方式：json（javascript object notation）。好了，下面举例说明这三种数据格式在ajax的异步应用。
一、纯文本方式
1、发送/接收数据：
code is cheap.看代码：
testjs.js
// 此函数等价于document.getelementbyid /document.all
function $(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
复制代码 代码如下:
<%@ 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.all
function $(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.all
function $(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.all
function $(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程序设计有所帮助。