ajax数据传输方式实例详解
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
<html> <head> <title>js test</title> <script src="js/testJs.js" type="text/javascript"></script> </head> <body> <form id="form1"> <p> 用户名：<input id="txtUserName" name="txtUserName" type="text" /> 密码：<input id="txtPwd" name="txtPwd" type="password" onblur="validatePwd(this)" /></p> </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"> <p> 用户名：<input id="txtUserName" name="txtUserName" type="text" /> 密码：<input id="txtPwd" name="txtPwd" type="password" onblur="validatePwd(this)" /></p> </form> </body> </html>
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是ajax数据传输方式实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
Win11管理员权限获取详解
Mar 08, 2024 pm 03:06 PM
Windows操作系统是全球最流行的操作系统之一，其新版本Win11备受瞩目。在Win11系统中，管理员权限的获取是一个重要的操作，管理员权限可以让用户对系统进行更多的操作和设置。本文将详细介绍在Win11系统中如何获取管理员权限，以及如何有效地管理权限。在Win11系统中，管理员权限分为本地管理员和域管理员两种。本地管理员是指具有对本地计算机的完全管理权限
Oracle SQL中的除法运算详解
Mar 10, 2024 am 09:51 AM
OracleSQL中的除法运算详解在OracleSQL中，除法运算是一种常见且重要的数学运算操作，用于计算两个数相除的结果。除法在数据库查询中经常用到，因此了解OracleSQL中的除法运算及其用法是数据库开发人员必备的技能之一。本文将详细讨论OracleSQL中除法运算的相关知识，并提供具体的代码示例供读者参考。一、OracleSQL中的除法运算
解决jQuery AJAX请求遇到403错误的方法
Feb 20, 2024 am 10:07 AM
标题：解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求，通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时，有时候会遇到这种情况，本文将介绍如何解决这个问题，并提供代码示例。解决方法：检查权限：首先要确保请求的URL地址是正确的，同时验证是否有足够的权限来访问该资
解决jQuery AJAX请求403错误的方法
Feb 19, 2024 pm 05:55 PM
jQuery是一个流行的JavaScript库，用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下，通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时，有时会遇到403错误。403错误通常是服务器禁止访问的错误，可能是由于安全策略或权限问题导致的。在本文中，我们将讨论如何解决jQueryAJAX请求遭遇403错误
PHP模运算符的作用及用法详解
Mar 19, 2024 pm 04:33 PM
PHP中的模运算符（%）是用来获取两个数值相除的余数的。在本文中，我们将详细讨论模运算符的作用及用法，并提供具体的代码示例来帮助读者更好地理解。1.模运算符的作用在数学中，当我们将一个整数除以另一个整数时，会得到一个商和一个余数。例如，当我们将10除以3时，商为3，余数为1。模运算符就是用来获取这个余数的。2.模运算符的用法在PHP中，使用%符号来表示模
两个iphone怎么传输所有数据 详细讲解：迁移旧手机数据 的方法
Mar 18, 2024 pm 06:31 PM
很多朋友朋友在更换苹果手机时，想把旧手机内的所有数据全部导入到新手机里，理论上是完全可行的，但在实际操作中是无法做到“转移所有”数据的，本期文章列举几种“转移部分数据”的方法。一、iTunesiTunes是苹果手机预装的软件，可用于迁移旧手机中的所有数据，但需要与电脑配合使用。可通过在电脑上安装iTunes，然后通过数据线连接手机和电脑，使用iTunes进行备份手机内的应用和数据，最后将备份恢复到新的苹果手机上来完成迁移。二、iCloudiCloud是苹果专属的“云空间”工具，可以先在旧手机内登
linux系统调用system()函数详解
Feb 22, 2024 pm 08:21 PM
Linux系统调用system()函数详解系统调用是Linux操作系统中非常重要的一部分，它提供了一种与系统内核进行交互的方式。其中，system()函数是一个常用的系统调用函数之一。本文将详细介绍system()函数的使用方法，并提供相应的代码示例。系统调用的基本概念系统调用是用户程序与操作系统内核交互的一种方式。用户程序通过调用系统调用函数来请求操作系统
如何使用Ajax从PHP方法中获取变量？
Mar 09, 2024 pm 05:36 PM
使用Ajax从PHP方法中获取变量是Web开发中常见的场景，通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中，将介绍如何使用Ajax从PHP方法中获取变量，并提供具体的代码示例。首先，我们需要编写一个PHP文件来处理Ajax请求，并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码：
