Ajax与Wcf交互-JSON

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

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

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

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

[DataContract]

public class Person

{

[DataMember]

public string Name { get; set; }

[DataMember]

public string Address { get; set;}

}

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

<p>

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

</p>

<p>

</div>

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

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编程模型。通过指定它的RequestFormat和ResponseFormat属性可以更改服务请求和响应的编码格式。如

在上面的示例中，第一个方法是将请求参数的编码格式设置为了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 阅读(11835) 评论(18) 编辑收藏举报

刷新页面返回顶部

Robin's Space

Ajax与Wcf交互-JSON

公告