当前位置:Gxlcms > JavaScript > ajax数据传输方式实例详解

ajax数据传输方式实例详解

时间:2021-07-01 10:21:17 帮助过:13人阅读

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

本文实例讲述了ajax数据传输方式。分享给大家供大家参考,具体如下:

在异步应用程序中发送和接收信息时,常见的可以选择以纯文本和XML作为数据格式(可参考《jQuery学习笔记之Ajax用法实例详解》),现在还有一种比较流行的方式:JSON(JavaScript Object Notation)。好了,下面举例说明这三种数据格式在ajax的异步应用。

一、纯文本方式

1、发送/接收数据:

Code is cheap.看代码:
testJs.js

几个附加文件源码:

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

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

同样,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的语法规则其实很简单:对象是一个无序的“‘名称/值'对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值' 对”之间使用“,”(逗号)分隔。看个例子先:

上面的定义方式看起来很简单,但是如果字段众多,命名方式混杂,出错的概率大大增加,怎么办?这时候你就会想到用程序的方式生成json数据。json提供了json.js包,专门提供了几种常用的json处理函数。下载下来,(json.js点击此处本站下载。) ,将其引入然后就可以简单的使用object.toJSONString()转换成json数据。看代码:

也可以使用eval或者parseJSON()方法来转换json数据到object:

关于json.js的学习,请参考网上其他资源,这里我不再赘述了。说了这么多,实践环节开始了:

ajax利用json发送/接收数据:

附加文件,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的简单搜索实现方法

js与jQuery终止正在发送的ajax请求的方法

ajax调用中ie缓存问题解决方法

以上就是ajax数据传输方式实例详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行