Ajax与Wcf交互-JSON

xblues · 发表于 6-7-2008 15:08:47

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？FreeOZ用户注册

x

Ajax与WCF之间的JSON操作远远不止这么简单，特别是它这种也适合extjs和jquery的编程模型。这篇文章是入门文章，算是引路吧，一个很好的演练教材。可以大致了解WCF的工作方式。前端代码传递数值到JavaScript，再有JavaScript脚本调用WCF服务，WCF服务需要使用ScriptManager控件预先被引用到页面中。调用WCF与服务器交互，然后返回数据，传递到JavaScript脚本，动态改变页面。通过直接与JavaScript脚本交互，前端技术可以使用任何流行框架，例如ExtJS或者JQuery等，参数和数据是以JSON格式传递的。

这种开发方式应该会越来越流行，进而成为AJAX开发的主流方式，看看吧。

有问题的话去原文留言，或者在这里问我。

原文链接
http://www.cnblogs.com/jillzhang/archive/2008/06/14/1221081.html

源代码下载
http://www.cnblogs.com/Files/jillzhang/AjaxWcfJson.rar

原文有建立项目的关键步骤介绍，看代码的同学请注意，下面代码里面的是四组两个连着的单引号，（我开始看成了四个双引号，所以调试失败，后来认真看博主的代码才知道原来是这里的错误）

Name:''+name+'',
Address:''+address+''

复制代码

一共只需要在两个文件里增加代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxWcfJson._Default" %>
<!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">
<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>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/WcfJsonService.svc/js" />
</Scripts>
</asp:ScriptManager>
<h2>Ajax wcf json</h2>
Name: <input id="txtName" type="text" />
Address: <input id="txtAddress" type="text" />
<input id="button1" type="button" value="Submit" onclick="createPerson()" />
Name: <input id="txtName2" type="text" />
<input id="button2" type="button" value="Submit2" onclick="getPerson()" />
</div>
</form>
</body>
</html>

复制代码

using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Collections.Generic;
using System.Diagnostics;
namespace AjaxWcfJson
{
[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>();
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json)]
public bool CreatePerson(Person p)
{
// Add your operation implementation here
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(RequestFormat = WebMessageFormat.Json)]
public Person GetPerson(string name)
{
foreach (Person p in list)
{
if (p.Name == name)
{
return p;
}
}
return new Person();
}
// Add more operations here and mark them with [OperationContract]
}
}

复制代码

xblues · 发表于 6-7-2008 15:15:57

你可以用博主推荐的那个using System.Diagnostics的Trace功能调试，当然也可以直接用 FireFox+FireBug 查看到底调用了什么WCF服务，如图。

xblues · 发表于 6-7-2008 15:22:42

通过FireBug可以看到，JSON自动对输入的字符串进行编码，即使输入了引号，单引号，之类的其他控制字符分隔符也是没问题的。所以这一步不需要程序员自己担心。

输入
erw''''e""r'',''t'w'e"r"w,e

JSON编码
{"p":{"Name":"780","Address":"erw''''e\"\"r'',''t'w'e\"r\"w,e"}}

xblues · 发表于 6-7-2008 15:33:54

原来不知道可以通过这样写来读取表单值得，看起来这种写法比较简单

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

复制代码

原来我一直用DOM一步一步找下去的。。。。

xblues · 发表于 6-7-2008 15:36:45

再注意那个组装JSON对象的方法比较特殊，需要记住。

var p = {
Name:''+name+'',
Address:''+address+''
}

复制代码

xblues · 发表于 6-7-2008 15:38:54

注意，这个文件的位置是项目根目录下的~/WcfJsonService.svc，可是作者在后边加了一个 /js 我不知道是为什么，需要注意一下。

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/WcfJsonService.svc/js" />
</Scripts>
</asp:ScriptManager>

复制代码

xblues · 发表于 6-7-2008 15:47:06

WcfJsonService.CreatePerson(p, onSuccess)
服务名.功能函数名(参数, 回调函数)
那个参数如果是一个值得话，就可以随便写了，如果是两个或者两个以上的参数，或者是一组数据，就需要预先组装成JSON对象了。
调用成功的话，服务器传递回来的值传递给回调函数，同样传递回来的数据也是一个值，或者一个JSON对象。

.....................
WcfJsonService.CreatePerson(p, onSuccess);
}
function onSuccess(res) {
alert(res);
}

复制代码

xblues · 发表于 6-7-2008 15:52:05

JSON数据格式是通过这里定义的
[DataContract]

通过里声明
[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json)]

通过这里限定了服务类型
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

xblues · 发表于 6-7-2008 15:53:52

固定写法比较多，看来还是挺麻烦的，倒来倒去的，还需要在看进一步的例子，才能够学明白。我接着找。

空明七心 · 发表于 6-7-2008 16:17:53

虫虫写了这么多，我一句也看不懂，这个东东的好处在哪里呢?

[ 本帖最后由空明七心于 6-7-2008 16:24 编辑 ]

xblues · 发表于 6-7-2008 17:10:28

现在使用成型的AJAX框架开发web2.0网站应用很流行，怎么样结合这些流行框架和后台服务器技术呢？WCF就是微软提供的一种服务接口。
这样，你就可以服务器使用微软.net技术，前端随便选用你所喜欢的AJAX框架进行开发。

空明七心 · 发表于 6-7-2008 17:58:05

原帖由 xblues 于 6-7-2008 17:10 发表

 登录/注册后可看大图

现在使用成型的AJAX框架开发web2.0网站应用很流行，怎么样结合这些流行框架和后台服务器技术呢？WCF就是微软提供的一种服务接口。
这样，你就可以服务器使用微软.net技术，前端随便选用你所喜欢的AJAX框架进行开发。 ...

噢,是这样啊,谢谢虫虫

,个人认为什么web2.0和web3.0叫好像孔乙已的茴香豆,七种写法八种写法都一个意思,呵呵,期待着生物计算机时代的来到,哈哈,生物科技和IT的完美结合!

可能影响了虫虫的学习贴,虫虫莫怪啊!

[ 本帖最后由空明七心于 6-7-2008 18:01 编辑 ]

flyspirit · 发表于 6-7-2008 17:59:19

LZ厉害，不过这个发在这里，可能太专业了

xblues · 发表于 6-7-2008 18:26:35

一直都说136ACS的比较多，可是我看也是不好成气候。谁是研究.net的呀？报个名，我们一起研究。

lilianaya · 发表于 6-7-2008 19:59:58

不太明白这种编程模型跟微软的ASP.NET Ajax 其他编程模型有何区别？比如简单使用WebMethod/PageMethod ，也可以由前端的javascript 发起请求，后端WebService 返回数据，也可以返回JSON 数据吧？
理解有点乱，不太懂。

xblues · 发表于 6-7-2008 20:04:12

你说的是ASP.NET 自己的Atlas框架，当然可以了，但是和目前已经广发被使用的流行JavaScript框架来比，微软的Altlas框架还很不成熟，有待遇发展。你看看那现在的extjs和jquery可以做的事情，就知道atlas还需要怎么发展了。

flyspirit · 发表于 7-7-2008 11:23:26

LS，能说说EXTJS和JQUERY有哪些目前ASP.NET AJAX还做不到的功能吗？

xblues · 发表于 7-7-2008 12:03:20

你可以看看这个ExtJS的DEMO页面，看看他展示的界面。
http://extjs.com/deploy/dev/examples/samples.html

目前的ASP.NET AJAX还在不断的完善中，我个人认为还没有长成，不过微软最近已经发布了新的AJAX roadmap，希望新版马上出来，马上强大。既然是微软的技术，当然前端使用微软的技术才是最方便的。现阶段，如果也想要前端功能强，设计美观一些，就使用这些第三方框架吧。

使用第三方框架的另外一个好处是，后台技术比仅仅局限于微软，这些框架可以和任何流行后台技术结合。PHP，JAVA等等。

xblues · 发表于 7-7-2008 12:05:18

顺便拜访了一下你的博客，发现你也是搞技术的，欢迎以后常来交流，分享知识。大家互相帮助，一起提高。

flyspirit · 发表于 7-7-2008 13:15:05

原帖由 xblues 于 7-7-2008 12:03 发表

 登录/注册后可看大图

你可以看看这个ExtJS的DEMO页面，看看他展示的界面。
http://extjs.com/deploy/dev/examples/samples.html

目前的ASP.NET AJAX还在不断的完善中，我个人认为还没有长成，不过微软最近已经发布了新的AJAX roadmap ...

Extjs我接触过一下，很炫很漂亮，你是不是在视觉效果上, ASP.NET的AJAX还有很多路要走？

flyspirit · 发表于 7-7-2008 13:16:27

原帖由 xblues 于 7-7-2008 12:05 发表

 登录/注册后可看大图

顺便拜访了一下你的博客，发现你也是搞技术的，欢迎以后常来交流，分享知识。大家互相帮助，一起提高。

good, 以后多交流交流。

xblues · 发表于 7-7-2008 13:45:09

不仅是视觉效果吧，那些动态交互都是传统界面所无法达到的。你看看那个grid的相关操作吧，太强大了。.net的原装控件远远达不到那个功能。类似的功能则只有通过商业插件才能实现，要换很多钱的，还要破解，还不开源。

flyspirit · 发表于 7-7-2008 17:53:09

这也是AJAX的功劳。

		自动登录	找回密码
密码			FreeOZ用户注册

FreeOZ

[论坛技术] Ajax与Wcf交互-JSON

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

这一段就是用控件来引用WCF服务的

JavaScript调用WCF的方式

回复 #10 空明七心的帖子

回复 #13 flyspirit 的帖子

回复 #17 flyspirit 的帖子

回复 #20 flyspirit 的帖子

FreeOZ

[论坛技术] Ajax与Wcf交互-JSON

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

这一段就是用控件来引用WCF服务的

JavaScript调用WCF的方式

回复 #10 空明七心 的帖子

回复 #13 flyspirit 的帖子

回复 #17 flyspirit 的帖子

回复 #20 flyspirit 的帖子

回复 #10 空明七心的帖子