随着框架的越来越流行,对于后台业务逻辑框架和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>" +