asp.net_ajax:数据传输方式简介

最新推荐文章于 2021-08-05 21:10:28 发布

Baple

最新推荐文章于 2021-08-05 21:10:28 发布

阅读量2.5k

点赞数

分类专栏： C#/.NET WEB前端 WebForm 文章标签： C# ajax

C#/.NET 同时被 3 个专栏收录

103 篇文章 2 订阅

订阅专栏

WEB前端

79 篇文章 0 订阅

订阅专栏

WebForm

12 篇文章 0 订阅

订阅专栏

在异步应用程序中发送和接收信息时，常见的可以选择以纯文本和XML作为数据格式（您可以参考jquery下的ajax）,现在还有一种比较流行的方式：JSON（JavaScript Object Notation）。好了，下面举例说明这三种数据格式在ajax的异步应用。
一、纯文本方式
1、发送/接收数据：
Code is cheap.看代码：

Code
/*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);
    }
}

几个附加文件源码：

Code
//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" οnblur="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数据

Code
//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处理代码如下：

Code
// 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属性：

Code
//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处理代码稍作修改如下：

Code
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处理函数。下载下来，，将其引入然后就可以简单的使用object.toJSONString()转换成json数据。看代码：

Code
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);
}

Code
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：

Code
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发送/接收数据：

Code
// 此函数等价于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代码稍作调整如下：

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

Code
<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>

json入门学习就到这里了。希望这篇入门文章对你有帮助。

作者：Jeff Wong

Baple

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
asp.net_ajax:数据传输方式简介

在异步应用程序中发送和接收信息时，常见的可以选择以纯文本和XML作为数据格式（您可以参考jquery下的ajax）,现在还有一种比较流行的方式：JSON（JavaScript Object Notation）。好了，下面举例说明这三种数据格式在ajax的异步应用。一、纯文本方式1、发送/接收数据：Code is cheap.看代码： Code/*testJs.js*//
复制链接

扫一扫