php与ajax传输数据格式,ajax数据传输方式实例详解

最新推荐文章于 2021-08-06 03:42:29 发布

weixin_39534395

最新推荐文章于 2021-08-06 03:42:29 发布

阅读量216

点赞数

文章标签： php与ajax传输数据格式

这篇文章主要介绍了ajax数据传输方式,结合实例形式较为详细的分析总结了ajax数据传输的原理与传输文本、xml及json格式数据的具体实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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

js test

用户名：密码：

AjaxOperations.aspx

AjaxOperations.aspx.csusing 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 = "" +

" " + escape($("txtUserName").value) + "" +

" " + escape($("txtPwd").value) + "" +

"";

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.csusing 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 = "" +

" " + escape($("txtUserName").value) + "" +

" " + escape($("txtPwd").value) + "" +

"";

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\" ?> 验证通过！"; // 测试用，简单的xml文件

}

else responseXmlTxt = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>验证失败！";

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报错)，如下：

js test

用户名：

密码：

上面是我整理给大家的，希望今后会对大家有帮助。

weixin_39534395

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
php与ajax传输数据格式,ajax数据传输方式实例详解

这篇文章主要介绍了ajax数据传输方式,结合实例形式较为详细的分析总结了ajax数据传输的原理与传输文本、xml及json格式数据的具体实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了ajax数据传输方式。分享给大家供大家参考，具体如下：在异步应用程序中发送和接收信息时，常见的可以选择以纯文本和XML作为数据格式(可参考《jQuery学习笔记之Ajax用法实例详解》),现在还有一...
复制链接

扫一扫