探索AJAX中的消息传输模式 (上)

开发 前端
在我们使用AJAX的应用中,消息传输有那些方式呢?纯文本、带HTML的文本、XML、JSON?还有哪些呢?在许多情况下,纯文本的消息传输就足够了。又比如复杂点的数据信息,表格、对象或者是其它的,这样我们可以使用XML或是JSON来格式化数据后进行传输。本文中将就AJAX中的消息传输模式进行探索研究。

相关文章:探索AJAX中的消息传输模式 (下)

有这样一个AJAX的应用场合,提供一系列的标签连接,让用户任意选择,浏览器向服务器发送请求查询得到想要的数据信息。下面就以这个应用讨论下消息传输。

一、普通的文本消息传输

建立一ASP.NET AJAX应用程序,先为AJAXMessageText.aspx页面做好简单的布局准备,我们采用HyperLink控件做为导航连接,放置在一个table里,并设置一单元格作为数据显示区,设置其作为服务器控件运行(runat="server"),如下图示:

各个控件的命名以数据显示区的名称如下:

<asp:HyperLink ID="hlAjax" runat="server" Text="AJAX" NavigateUrl="Java
Script:void(0);" /> <asp:HyperLink ID="hlAspnet" runat="server" Text="ASP.NET" NavigateUrl="Java
Script:void(0);" /> <asp:HyperLink ID="hlCastle" runat="server" Text="Castle" NavigateUrl="Java
Script:void(0);" /> <asp:HyperLink ID="hlService" runat="server" Text="WebService" NavigateUrl="Java
Script:void(0);" /> <asp:HyperLink ID="hlHtml" runat="server" Text="Html" NavigateUrl="JavaScript:void(0);"/> <td runat="server" colspan="2" rowspan="5" style="background-color: #00ffff; te
xt-align: left" valign="top" id="resultText">

用户通过点击HyperLink控件,客户端向服务器发送请求,返回的数据可能来自不同的地方(数据库,XML,普通的文件.....),这里以Message类来封装这些数据,详细代码定义如下:

 /// <summary>
 /// Message 的摘要说明
 /// </summary>
 public class Message
 {
     public  string AJAX=string.Empty;
     public  string ASPNET=string.Empty;
     public  string CASTLE=string.Empty;
     public  string WEBSERVICE=string.Empty;
    public string HTML = string.Empty; 

    StringBuilder str = null;

    public Message()    
{
        str = new StringBuilder();
        str.Append("Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。");
        str.Append("借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML立即更新UI,");
        str.Append(" 并向服务器发出异步请求,以执行更新或查询数据库。");
      AJAX = str.ToString();


        str = new StringBuilder();
        str.Append("Microsoft 的 ASP.NET 和 Visual Studio 组将出席于曼德勒海湾度假举行的 ASP.NET Connections 会议。");
        str.Append("请参加深入而前沿的 ASP.NET、Visual Studio & .NET、SQL 和 Mobile Connections 交流会并同与会的");
        str.Append("Microsoft 和业界专家会晤。即时了解 Microsoft 许多令人惊喜的公告。");
        ASPNET = str.ToString();

        str = new StringBuilder();
        str.Append("Castle是针对.NET平台的一个开源项目,从数据访问框架ORM到IOC容器,再到WEB层的MVC框架、AOP,");
        str.Append("基本包括了整个开发过程中的所有东西,为我们快速的构建企业级的应用程序提供了很好的服务。");
        CASTLE = str.ToString();


        str = new StringBuilder();
        str.Append("Web Service 是在 Internet 上进行分布式计算的基本构造块,是组件对象技术在 Internet 中的延伸,");
        str.Append("是一种部署在 Web 上的组件。它融合了以组件为基础的开发模式和 Web 的出色性能。");
        WEBSERVICE = str.ToString();

        str = new StringBuilder();
        str.Append("<span style="+"font-weight:bold;font-size:20;color:Red;>");
        str.Append("带有HTML的字符串,返回此字符串,所拥有的样式等都可以得到解析!");
        str.Append("</span>");
        HTML = str.ToString();
    }
}

在ASP.NET AJAX应用中,客户端和服务器端进行数据通信绝大多数都是通过WebService来完成,这里我们为Message所类的数据方便了与客户端交互提供一个WebService:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MessageWebService : System.Web.Services.WebService {

    public MessageWebService () { }

    [WebMethod]
    public string GetMessage(string text)
    {
        Message message = new Message();
        string str = string.Empty;
        switch (text)
        {
            case "AJAX": str = message.AJAX; break;
            case "ASPNET": str = message.ASPNET; break;
            case "CASTLE": str = message.CASTLE; break;
            case "SERVER": str = message.WEBSERVICE; break;
            case "HTML": str = message.HTML; break;
        }
        return str;
    }
}

方法GetMessage提供根据客户端传递过来的参数返回Message类里所封装的相应数据。此时,我们就应该着手客户端请求的发送处理,在ASP.NET AJAX应用里,我们可以很方便的通过ScriptManager引入WebService:

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="MessageWebService.asmx" />
</Services>
</asp:ScriptManager>

在客户端,通过ASP.NET AJAX对JavaScript的扩展,我们可以很方便的得到各个控件的引用,以及调用WebService方法,设置回调函数来处理返回值,下面是客户端JS的完整代码:

<script type="text/javascript">
     var hlAjax;
     var hlAspnet;
     var hlCastle;
     var hlService;
     var hlHtml;
     var resultText;
     
     //初始化控件引用及事件
     function pageLoad()
     {
        hlAjax = $get("<% =hlAjax.ClientID %>");
        hlAspnet = $get("<% =hlAspnet.ClientID %>");
        hlCastle = $get("<% =hlCastle.ClientID %>");
        hlService = $get("<% =hlService.ClientID %>")
        hlHtml = $get("<% = hlHtml.ClientID %>");
        
        $addHandler(hlAjax,"click",onClick);
        $addHandler(hlAspnet,"click",onClick);
        $addHandler(hlCastle,"click",onClick);
        $addHandler(hlService,"click",onClick);
        $addHandler(hlHtml,"click",onClick);
        
        resultText = $get("<% = resultText.ClientID %>");
     }
     
     function onClick(eventElement)
     {
        var topic = false;
        switch(eventElement.target.id)
        {
           case hlAjax.id:topic = "AJAX";break;
           case hlAspnet.id:topic = "ASPNET";break;
           case hlCastle.id:topic = "CASTLE";break;
           case hlService.id:topic = "SERVER";break;
           case hlHtml.id:topic = "HTML";break;
           
        }
        //引用WebService获取数据
        MessageWebService.GetMessage(topic,onGetTextMessageCallback);
     }
     
     //回调函数
     function onGetTextMessageCallback(text)
     {
        resultText.innerHTML=text;
     }
     </script>

上述中,通过AJAX所提供的$get()方法获取到各控件的客户端引用,并通过$addHandler()方法为其添加了客户端事件,注意有个HTML的连接,这里我们追逐到Message类里:

str = new StringBuilder();
str.Append("<span style="+"font-weight:bold;font-size:20;color:Red;>");
str.Append("带有HTML的字符串,返回此字符串,所拥有的样式等都可以得到解析!");
str.Append("</span>");
HTML = str.ToString();

类里所封装的html对应的字符传是带有css样式及html标识的字符串,返回这个html字符串那客户端是否能得到解析??答案是肯定的,这里只是做到了用户点击相应的连接就发送请求到服务器,要使这个应用完善,我们还得为这个应用初始化一个显示值:

public partial class AjaxMessageText : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.resultText.InnerHtml = new Message().AJAX;
    }
}

看看下面的运行结果:

#p#

二、复杂类型的消息传输

我们模拟一个数据库查询功能,根据客户端的请求条件查询数据库,把查询到的数据返回到客户端显示。这样一个应用一般来说可以通过XML来传输。ASPX页面设计如下:

正如上图所示,以MSSQL2000里的Northwind数据库里的Employees表为例,根据客户端的条件(排序字段,提取的记录条数)查询数据库,下面是数据库访问代码:

public class DataAccess
{
    private static string strCon = "Data Source=.;database=northwind;uid=sa;pwd=;";
    public DataAccess()
    {
    }

    public static DataTable GetEmployees(string orderBy, int maxRows)
    {
        string cmdText = "select top " + maxRows;
        cmdText += " EmployeeID,LastName,City,Country ";
        cmdText += "from Employees order by " + orderBy;
        return Exce(cmdText);
    }

    private static DataTable Exce(string cmdText)
    {
        SqlConnection conn = new SqlConnection(strCon);
        SqlDataAdapter sda = new SqlDataAdapter(cmdText, conn);
        DataSet ds = new DataSet();
        sda.Fill(ds);
        return ds.Tables[0];
    }
}


数据库访问方法GetEmployees提供根据客户传递的参数查询Employees表里的数据并以DataTable的形式返回,到这里我们同上面一样可以借助WebService来处理返回的DataTable,将数据处理为一个XML字符串返回到客户端:

[WebMethod]
public string GetEmployees(string orderBy, int manxRows)
{
    DataTable dt = DataAccess.GetEmployees(orderBy, manxRows);
    StringBuilder xml = new StringBuilder();
    xml.Append("<?xml version='1.0' ?>");
    xml.Append("<Employees>");

    foreach (DataRow row in dt.Rows)
    {
        string id = row["EmployeeID"].ToString();
        string name = row["LastName"].ToString();
        string city = row["City"].ToString();
        string country = row["Country"].ToString();
        xml.Append("<Employee>");
        xml.Append("<EmployeeID>" + id + "</EmployeeID>");
        xml.Append("<LastName>" + name + "</LastName>");
        xml.Append("<City>" + city + "</City>");
        xml.Append("<Country>" + country + "</Country>");
        xml.Append("</Employee>");
    }
    xml.Append("</Employees>");
    return xml.ToString();
}

在客户端的处理程序上,大致和上面的普通的文本消息差不多,其实整个AJAX应用基本上都是应用的一个模式,从发送请求--->响应请求--->数据传输--->处理回调。客户端工作量最大的就是在回调函数里,下面是本示例的回调函数定义:

//回调函数
function onXmlMessageCallback(result)
{
   var xml;
   if(window.ActiveXObject)  //IE
   {
       xml = new ActiveXObject("Microsoft.XMLDOM");
       xml.async = false;
       xml.loadXML(result);
   }
   else
   {
       var parser = new DOMParser();
       xml = parser.parseFromString(result,"text/xml");
   }
   
   var employees = xml.getElementsByTagName("Employee");
   var html = new Sys.StringBuilder();
   html.append("<table width='500px' cellspacing='1' cellpadding='0' border='0' bgcolor='#999999'>");
   //构建表头
   html.append("<tr>");
   if(cbID.checked)
      html.append("<td bgcolor='lightblue'><b>ID</b></td>");
   if(cbLastName.checked)
      html.append("<td bgcolor='lightblue'><b>LastName</b></td>"); 
   if(cbCity.checked)
      html.append("<td bgcolor='lightblue'><b>City</b></td>"); 
   if(cbCountry.checked)
      html.append("<td bgcolor='lightblue'><b>Country</b></td>");
   html.append("<tr>");
   
   //构建数据行
   for (var i=0; i<employees.length;i++)
   {
       html.append("<tr>");
       if(cbID.checked)
       {
           var id= employees[i].getElementsByTagName("EmployeeID")[0].childNodes[0].nodeValue;
           html.append("<td>"+id+"</td>");
       }
       if(cbLastName.checked)
       {
           var LastName= employees[i].getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
           html.append("<td>"+LastName+"</td>");
       }
       if(cbCity.checked)
       {
           var City= employees[i].getElementsByTagName("City")[0].childNodes[0].nodeValue;
           html.append("<td>"+City+"</td>");
       }
       if(cbCountry.checked)
       {
           var Country= employees[i].getElementsByTagName("Country")[0].childNodes[0].nodeValue;
           html.append("<td>"+Country+"</td>");
       }
       html.append("</tr>");
   }
   
   html.append("</table>");
   resultXml.innerHTML=html.toString();
}

在客户端的回调函数里,把服务器端返回的字符串解析为一个xml对象,通过JavaScript操作DOM将xml对象里的每一条数据解析后存入数组,随后根据页面上选择要显示字段动态构造html代码并显示在指定的位置(resutlXml)。 下面是客户端的完整代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxMessageXML.aspx.cs" Inherits="AjaxMessageXML" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Services>
         <asp:ServiceReference Path="MessageWebService.asmx" />
      </Services>
    </asp:ScriptManager>
        以MSSQL 2000里的示例数据库Northwind里的Employees表为例<br />
         所要显示的列                      
                                
         方式字段      提取记录行数<br />
         <asp:CheckBox ID="cbID" runat="server" Text="ID" />
          
         <asp:CheckBox ID="cbLastName" runat="server" Text="LastName" />
          
         <asp:CheckBox ID="cbCity" runat="server" Text="City" />
            
         <asp:CheckBox ID="cbCountry" runat="server" Text="Country" />
          
         <asp:DropDownList ID="ddlOrder" runat="server">
             <asp:ListItem Value="EmployeeID" Text="ID"></asp:ListItem>
             <asp:ListItem Value="LastName" Text="LastName"></asp:ListItem>
             <asp:ListItem Value="City" Text="City"></asp:ListItem>
             <asp:ListItem Value="Country" Text="Country"></asp:ListItem>
         </asp:DropDownList>
              <asp:DropDownList ID="ddlRows" runat="server">
             <asp:ListItem>1</asp:ListItem>
             <asp:ListItem>2</asp:ListItem>
             <asp:ListItem>3</asp:ListItem>
             <asp:ListItem>5</asp:ListItem>
             <asp:ListItem>8</asp:ListItem>
             <asp:ListItem>10</asp:ListItem>
         </asp:DropDownList>
           
        <input id="buttonGO" style="width: 53px" type="button" value="GO" />
         <hr />
         <div id="resultXml"></div>
         
         <script type="text/javascript">
         var cbID;
         var cbLastName;
         var cbCity;
         var cbCountry;
         var ddlOrder;
         var ddlRows;
         var resultXml;
         var buttonGO;
         
         //初始化控件引用及事件
         function pageLoad()
         {
            cbID = $get("<% =cbID.ClientID %>");
            cbLastName = $get("<% =cbLastName.ClientID %>");
            cbCity = $get("<% =cbCity.ClientID %>");
            cbCountry = $get("<% =cbCountry.ClientID %>");
            
            ddlOrder = $get("<% =ddlOrder.ClientID %>");
            ddlRows = $get("<% =ddlRows.ClientID %>");
            
            resultXml = $get("resultXml");
           buttonGO = $get("buttonGO");
            $addHandler(buttonGO,"click",onButtonClicked);
            
            onButtonClicked(null);
         }
         
         function onButtonClicked(eventElement)
         {
            if(!cbID.checked && !cbLastName.checked && cbCity.checked && cbCountry.checked)
            {
                alert("至少选择一列!");
                return;
            }
            
            var orderBy = ddlOrder.options[ddlOrder.selectedIndex].value;
            var maxRows = ddlRows.options[ddlRows.selectedIndex].value;
            
            //调用WebService获取数据
            MessageWebService.GetEmployees(orderBy,maxRows,onXmlMessageCallback);
         }
         
         //回调函数
         function onXmlMessageCallback(result)
         {
            var xml;
            if(window.ActiveXObject)  //IE
            {
                xml = new ActiveXObject("Microsoft.XMLDOM");
                xml.async = false;
                xml.loadXML(result);
            }
           else
           {
               var parser = new DOMParser();
               xml = parser.parseFromString(result,"text/xml");
           }
           
           var employees = xml.getElementsByTagName("Employee");
           var html = new Sys.StringBuilder();
           html.append("<table width='500px' cellspacing='1' cellpadding='0' border='0' bgcolor='#999999'>");
           //构建表头
           html.append("<tr>");
           if(cbID.checked)
              html.append("<td bgcolor='lightblue'><b>ID</b></td>");
           if(cbLastName.checked)
              html.append("<td bgcolor='lightblue'><b>LastName</b></td>"); 
           if(cbCity.checked)
              html.append("<td bgcolor='lightblue'><b>City</b></td>"); 
           if(cbCountry.checked)
              html.append("<td bgcolor='lightblue'><b>Country</b></td>");
           html.append("<tr>");
          
           //构建数据行
           for (var i=0; i<employees.length;i++)
           {
               html.append("<tr>");
               if(cbID.checked)
               {
                   var id= employees[i].getElementsByTagName("EmployeeID")[0].childNodes[0].nodeValue;
                   html.append("<td>"+id+"</td>");
               }
               if(cbLastName.checked)
               {
                   var LastName= employees[i].getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
                   html.append("<td>"+LastName+"</td>");
               }
               if(cbCity.checked)
               {
                   var City= employees[i].getElementsByTagName("City")[0].childNodes[0].nodeValue;
                   html.append("<td>"+City+"</td>");
               }
               if(cbCountry.checked)
               {
                   var Country= employees[i].getElementsByTagName("Country")[0].childNodes[0].nodeValue;
                   html.append("<td>"+Country+"</td>");
               }
               html.append("</tr>");
           }
           
           html.append("</table>");
           resultXml.innerHTML=html.toString();
        }
        </script>
    </form>
</body>
</html>

文章中有部分内容我作了修改,在原文中加入了示例分析。希这篇文章对大家有所帮助,要更深入的学习AJAX是数据传输请查阅其他相关书籍或资料。欢迎大家拍砖指正,谢谢。

【编辑推荐】

  1. 探索AJAX中的消息传输模式 (下)
  2. ASP.NET AJAX框架调用后台代码的基本方法
  3. 使用AJAX构建更优秀的Web应用程序
  4. 使用 jQuery 简化 Ajax 开发
责任编辑:杨鹏飞 来源: 博客园
相关推荐

2009-01-03 16:29:45

AJAXASP.NET.NET

2018-01-12 17:03:29

HTTPgzip压缩

2014-03-04 15:28:32

iOS开发消息传递机制

2022-10-28 13:33:05

Push模式互联网高并发

2010-07-14 17:16:35

SOAP协议

2017-08-14 15:14:33

2019-06-24 16:00:17

探索Linuxrun

2018-10-29 08:47:48

传输模式无线

2012-09-04 09:23:45

HTML5消息传输传输机制

2023-01-04 07:39:39

2013-04-16 13:57:36

2021-05-19 07:50:53

Node.js数据传输

2010-06-28 17:00:58

FTP传输模式

2009-06-18 15:23:49

缓存控制器模式Ajax模式

2022-09-14 11:25:15

BFF架构分布式系统

2016-07-05 10:53:56

2022-07-21 07:14:16

无代码模式

2009-02-12 09:55:22

AjaxMVCDojo

2012-05-14 10:18:54

jQuery

2011-03-04 09:58:47

FileZillaWindowsXP
点赞
收藏

51CTO技术栈公众号