Jquery调用WCF经验分享

　　博客园申请开通有一段时间了，一直没写博客，真对不起博客园，郁闷费话少说，今天有时间，来总结一下最近项目中用的一些知识知，主要是Jquery调用WCF服务。本文讨论一下Jquery异步调用WCF服务的过程中需要注意的各种问题及经验分享。

　　我所使用的机器环境是：Windows7　VS2010　。

　　一、我们首先建好一个项目，在VS2010中，建立好一个Web项目，并添加一个“启用了Ajax的WCF服务”。

　　二、添加完成后，会自动打开刚才添加的文件，我们进行一些简的修改，便于一会客户端去调用，修改代码如下：

View Code

1 [ServiceContract(Namespace = "" )]
2 [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
3 public class DataService
4 {
5 /// <summary>
6 /// 一、简单调用服务端方法
7 /// </summary>
8 /// <returns></returns>
9   [OperationContract]
10 [WebGet()]
11 public string DoWork()
12 {
13 return string .Format( " Today is {0} " ,DateTime.Now.ToString( " yyyy年MM月dd日 HH:mm:ss:fff " ));
14 }
15
16
17 }

　　三、客户端代码中如下：

View Code

1 < html xmlns = " http://www.w3.org/1999/xhtml " >
2   < head runat = " server " >
3 < title >< / title>
4   < script src = " Scripts/jquery-1.4.1.min.js " type = " text/javascript " >< / script>
5   < script type = " text/javascript " >
6 $(document).ready( function () {
7 $( " #btnGetServerDate " ).click( function () {
8 $.ajax({
9 url: " DataService.svc/DoWork " ,
10 type: " get " ,
11 success: function (data) {
12 alert(data.d);
13 }
14 })
15 });
16 })
17 < / script>
18 < / head>
19 < body >
20 < form id = " form1 " runat = " server " >
21 < div >
22
23 < input id = " btnGetServerDate " type = " button " value = " 简单调用 " title = " 显示服务器上的时间 " / >< / div >
24 < / form>
25 < / body>
26 < / html>

以上是最基本的调用没有什么可说的.

　　

　　下面，我们来进行一个稍微复杂点的例子演示，我们在实现的效果是：“客户端提交一个注册信息，然后在服务器端取出并解析成一个实体类对象，然后返回客户端状态。服务端代码如下：

View Code

1 /// <summary>
2 /// 二、由客户端传入数据示例
3 /// </summary>
4 /// <param name="userInfo"> Json格式的UserInfo数据 </param>
5 /// <returns></returns>
6 [OperationContract]
7 [WebGet(ResponseFormat = WebMessageFormat.Json)] // 必须是WebGet，客户端对应着Get方式请求，如果是POST方式，服务端而是WebInvoke，不过很遗憾，暂时貌似好不支持，反正我是没使用成功，有知道的请告诉我
8 public string Register( string userInfo)
9 {
10 UserInfo model = JsonConvert.DeserializeObject < UserInfo > (userInfo); // Newtonsoft.Json 使用第三方类库将传入的Json字符串反序列化成实体类。
11 return string .Format( " hello {0} sir! " , model.LoginName);
12 }

　　然后客户端对应如下：

View Code

1 // 示例二
2 $( " #btnRegiter " ).click( function () {
3 var jsonString = " userinfo={\"loginName\":\"cheng\",\"password\":\"tomcat\"} " ; // 注意：我服务端只接收一个参数那就是String类型命称为userInfo的变量，所以前面对应也叫userInfo
4 $.ajax({
5 url: " DataService.svc/Register " ,
6 type: " get " , // 注意是Get方式，服务端对应着WebGet（）
7 data: jsonString,
8 success: function (data) {
9 alert(data.d);
10 }
11 })
12 })

　　此例子主要演示，客户端提交一个JSON字符串格式的数组到服务端，然后服务端通过反序列化方式将传入的字符串序列化成自定义对象。NET3.5自已也支持反序列化，但用的不爽，我用的是“Newtonsoft.Json”这个，但也需要注意一个问题，那就是如果客户端传入的数据是数值类型的话，请不要加引号，否则会反序列化失败。如“{"age":25}”,服务端对应“public int Age{get;set;}”。但具JSON.org上说的标准JSON格式，健/值好像都应该需要加上引号的，所以这里大家需要注意。

　　下面接着在演示一个客户端获取一个List<T>类型数据并解析，同样服务端代码如下：

View Code

1 [OperationContract]
2 [WebGet(ResponseFormat = WebMessageFormat.Json)]
3 public List < UserInfo > GetAll()
4 {
5 List < UserInfo > lists = new List < UserInfo > ()
6 {
7 new UserInfo() { LoginName = " cheng " , Password = " cheng " },
8 new UserInfo() { LoginName = " tomcat " , Password = " tomcat " }
9 };
10 return lists;
11 }
12
13 [DataContract]
14 public class UserInfo
15 {
16 private string _loginName;
17 private string _password;
18
19 [DataMember]
20 public string Password
21 {
22 get { return _password; }
23 set { _password = value; }
24 }
25 [DataMember]
26 public string LoginName
27 {
28 get { return _loginName; }
29 set { _loginName = value; }
30 }
31 }

　　客户端代码如下：

View Code

1 $( " #btnGetAllUser " ).click( function () {
2 $.ajax({
3 url: " DataService.svc/GetAll " ,
4 type: " get " , // 注意是Get方式，服务端对应着WebGet（）
5 success: function (data) {
6 for ( var i = 0 ; i < data.d.length; i ++ ) {
7 $( " #divContent " ).append( " <a>用户名： " + data.d[i].LoginName + " </a><a>密码： " + data.d[i].Password + " </a><br /> " );
8 }
9 },
10 error: function (msg) {
11 alert(msg.responseText);
12 }
13 })
14 })

　　好了，三种最常用的调用方式就这样了，当然，你可以稍微修改一下连接上数据库一起使用，最后我总结一下，在调用过程常见的错误及解决方法。

　　一、推荐使用Firebug去调试，在Firebug中有一个“网络”选项卡，在那里，你可以清楚的看到你是否成功调用WCF服务，而且可以看到返回的数据格工及详细内容，而且如果调用出错，也可以给出明确的出错信息。

　　

　　二、在调试阶端，推荐使用“GET”方式请求服务，然后在error:funcation(msg){alert(msg.responseText);}这样同样也能看到大部份出错提示。

　　三、配置文件，在添加时就自动配置好了，所以一般情况下没有特殊要求无需更改。这是VS2010中的好处。

　　四、可以参考一些文章如《 JQuery调用WCF需要注意的一些问题》

欢迎批评！

　　源码：《 http://dl.dbank.com/c0d0bdl7b6》

转载于:https://www.cnblogs.com/bdqlaccp/archive/2011/05/08/2039415.html