Asp.net2运用JQuery构建客户端/服务端分离的链接模型

随着框架的越来越流行,对于后台业务逻辑框架和WEB表现层框架,市面上可以找到很多非常好的开源框架。不过我始终在想一个问题,对于Java来说,只能使用java下的框架;而对于微软来说,也只能使用其体系下开发的框架,那么有没有可能混合使用呢?

    何为混合使用?就是表现层全部使用静态页面后缀(.htm),而后台可以是java构建的业务层模型,也可以是微软Donet构建的业务层模型,这样不管后台使用什么模型,只要提供方提供了足够我访问的接口,就可以调用不同的架构的接口来实现表现层上的内容。

    JQuery 是最近很流行的一个Ajax框架,其具体的运用和功能不在这里进行讲解,但我们可以使用其内嵌的Ajax方法,去调用后台服务端的代码,已实现客户端和服务端的通信。因为客户端是静态页面,其通过WebService调用服务端的方法,这样很明显,客户端可以完全不管服务端是何种语言开发的,达到了混合使用的目的。

   这种混合使用可以定义为 WEB端和后台业务逻辑端的连接架构模型。

 

这里仅仅是讨论了JQuery在Ajax层面与服务端的交互通信的用法,不涉及JQuery的其他用法

 

以下以一个小小的例子来说明一下:

注:本人javascript和JQuery基础较差,因此例子也相对简单。

 

环境说明:

Asp.net 2.0

外接类库: System.Web.Extensions.dll

JQuery框架: 1.3

 

第一步:创建一个WebService服务,修改Web.config

工程引入System.Web.Extensions.dll

 

<system.web> 下面

<httpHandlers>
    <remove verb="*" path="*.asmx"></remove>
    <add verb="*" path="*.asmx"

        type="System.Web.Script.Services.ScriptHandlerFactory,  System.Web.Extensions, 
        Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35"/>
</httpHandlers>

 

第二步:对asmx文件编码

JSon.asmx 

  JSon.cs

 

using System.Web.Script.Serialization;
using System.Web.Script.Services;

 

[ScriptService]
public class Json : System.Web.Services.WebService
{

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

     public string TestPersonJson(string name) {

        List<Person> list = new List<Person>();

        Person person = new Person();
        person.Birthday = DateTime.Now;
        person.ID = "111" + ">>" +name;
        person.Sex = "1";
        person.Status = 1;

        Person person1 = new Person();
        person1.Birthday = DateTime.Now;
        person1.ID = "222" + ">>" + yy;
        person1.Sex = "2";
        person1.Status = 1;

        Person person2 = new Person();
        person2.Birthday = DateTime.Now;
        person2.ID = "333" + ">>" + name;
        person2.Sex = "1";
        person2.Status = 1;

        list.Add(person);
        list.Add(person1);
        list.Add(person2);

        return new JavaScriptSerializer().Serialize(list);


    }

}

 

以上就是cs代码,重点关注有颜色的部分。这些有颜色的代码其实就是JSon的应用,后台返回方法编译成JSon格式的编码发到客户端(htm)页面上,客户端代码解码来获取值。

 

第三步:创建一个htm客户端页面

<script type="text/javascript"  src="../js_Core/jquery-1.3.2.min.js"></script>   这个不可少

 

看一下怎样从服务端获取值呈现在页面,见以下javascript代码

function testJson() {             
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:4000/Json.asmx/TestPersonJson",
            data: "{name:'小王'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg){
                 var data = ("(" + msg + ")");    
                 var t = "<table border='1'>" +
                         "<tr>"+
                             "<td>ID</td>" +
                             "<td>Sex</td>" +
                             "<td>Birthday</td>" +
                             "<td>Status</td>" +
                         "</tr>" ;
   
                 jQuery.each(data, function(rec) {    
                    t = t + "<tr>"+
                                "<td>" + this.ID + "</td>" +
                                "<td>" + this.Sex + "</td>" +
                                "<td>" + this.Birthday + "</td>" +
                                "<td>" + this.Status + "</td>" +
                            "</tr>";
                 });
                
                 t = t + " </table> ";

                 $("#S_Large").html(t);
            },
            error:function(msg){
                 alert( "Error: " + msg );
            }

        });
}//function

 

说明:

以上代码第一行红色部分:是引用的WebService的方法

中间的红色部分是循环从数组中取出从服务端返回的对象值

紫色代码不是核心代码,只是把生成的Table插入某个DOM节中。

 

以上这些就是全部核心的构成,通过这个简单的例子,我们可以看到构建这种客户端不依赖于服务端语言的模型的可行性。

 

我们完全可以在客户端采用这种模型,全部静态实现,并通过WebService调用后台服务端的接口获取数据,这种方法我认为还是有一定的应用范围的,特别是对于在一个长期项目中不同时期不同语言框架共存的情况(在政府信息化项目中这种情况最多)。

 

 

 

posted on 2010-01-07 15:41  淡定而看  阅读(772)  评论(1编辑  收藏  举报