Ajax与Wcf交互-JSON

在WCF的序列化中有DataContractJsonSerializer的格式化器,这就使得WCF相比传统的Xml Web Serice多了一种输入输出的编码格式:JSON.本文将介绍如何使用JSON实现Ajax与WCF之间的数据交互.

JSON的全称是JavaScript Object Notation,是专门用于适应AjaxRestful而出现的取代xml的编码格式.相比xml而言,它更适合javascript,

第一步: VS2008中创建一个.Net framework 3.5的网站项目,命名为AjaxWcfJson,不用多说,不会创建的可以参考上一篇文章AjaxWCF交互-WCF之美,

第二步: 在网站项目中添加一个启用了AjaxWCF服务: WcfJsonService.svc,将其中代码更改为如下:

[DataContract] 

public class Person 



[DataMember] 

public string Name getset; } 

[DataMember] 

public string Address getset;} 

}
 

[ServiceContract(Namespace 
= "")] 

[AspNetCompatibilityRequirements(RequirementsMode 
= AspNetCompatibilityRequirementsMode.Allowed)] 

public class WcfJsonService 



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

 

// 添加 [WebGet] 属性以使用 HTTP GET 

[OperationContract] 

[WebInvoke(RequestFormat 
= WebMessageFormat.Json)] 

public bool CreatePerson(Person p) 



// 在此处添加操作实现 

foreach (Person person in list) 



if (p.Name ==person.Name) 



return false

}
 

}
 

list.Add(p); 

Trace.WriteLine(
"-----------------------------------------"); 

foreach (Person person in list) 



Trace.WriteLine(
"Name:" + person.Name + ",Address:" + person.Address); 

}
 

Trace.WriteLine(
"-----------------------------------------"); 

return true

}
 

 

[OperationContract] 

[WebInvoke(ResponseFormat
=WebMessageFormat.Json)] 

public Person GetPerson(string name) 



foreach(Person p in list) 



if(p.Name == name) 



return p; 

}
 

}
 

return new Person(); 

}
 

// 在此处添加更多操作并使用 [OperationContract] 标记它们 

}
 

其中的Person是一个数据契约,WcfJsonService是服务契约,关注一下WcfJsonService中的两个服务操作,他们的方法内容无从紧要,关键是在声明中的WebInvoke

第三步: Default.aspx中添加ScriptManager,并设定<asp:ScriptReference Path="~/WcfJsonService.svc/js" />,使其能够访问WCF服务,然后在页面中增加如下的页面元素:

<div> 

<h2> 

ajax调用wcf示例2-json
</h2> 

<p> 

名字:
<input id="txtName" type="text" /> 

</p> 

<p> 

地址:
<input id="txtAddress" type="text" /> 

</p> 

<p> 

<input id="Button1" type="button" value="提交" onclick="createPerson()" /></p> 

<p> 

名字:
<input id="txtName2" type="text" /> 

</p> 

<p> 

<input id="Button2" type="button" value="提交" onclick="getPerson()" /></p> 

</div> 

<head></head>中增加如下的脚本



<script type="text/javascript"> 

function createPerson() 



var name = $get("txtName").value; 

var address = $get("txtAddress").value; 

var p = 

Name:
''+name+''

Address:
''+address+'' 

}
 

WcfJsonService.CreatePerson(p,onSuccess); 

}
 

function onSuccess(res) 



alert(res); 

}
 

function getPerson() 



var name = $get("txtName2").value; 

 

WcfJsonService.GetPerson(name,onSuccess2); 

}
 

function onSuccess2(res) 



alert(
"Name:"+res.Name+",Address:"+res.Address); 

}
 

</script> 

第四步:Default.aspx设置为项目起始页,然后F5调试,浏览default.aspx,进行测试,现在上面的两个文本框中输入信息,点击提交,出现以下效果,说明运行正常:

此时,察看IDE中的输出窗口,有如下的输出:

在网页中第一个提交按钮下面的文本框中输入刚才输入到名字,点击提交,出现如下的效果说明能运行正常

整个程序实现起来比较简单,没有太多问题,下面对几个比较重要的地方做一下说明:

WebInvokeAttribute:

对服务操作(OperationContract)添加WebInvoke之后表明该操作可用于Web编程模型。通过指定它的RequestFormatResponseFormat属性可以更改服务请求和响应的编码格式。如

在上面的示例中,第一个方法是将请求参数的编码格式设置为了JSON,此时在default.aspx页面中传递的javascript对象p,就能在WCF服务端解析成为服务端数据契约Person的实例

对象。而在第二个方法中,请求的编码是普通编码,而响应的编码通过ResponseFormat=WebMessageFormat.Json被指定为了JSON,服务端返回的数据契约对

象Person对象返回到javascript的时候,javascript也能将其解析为对象,从而加以处理或者显示。

Ajax与WCF之间的JSON操作远远不止这么简单,其他地方还有很多需要注意的,本文先简单的做下铺垫,很看好这种开发模式。特别是它

这种也适合extjs和jquery的编程模型。

程序示例代码: /Files/jillzhang/AjaxWcfJson.rar

posted @ 2008-06-14 13:27  Robin Zhang  阅读(11836)  评论(18编辑  收藏  举报