Fork me on GitHub

关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例

关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例

开发环境:Visual Studio 2010 SP1

部署环境:Window 7 SP1+IIS7

 

现在的JQuery中$.ajax方法支持跨域读取json数据了，原理是利用一个叫做jsonp的概念。当然，究其本质还是通过script标签动态加载js，似乎这是实现真正跨域的好方法。

$.ajax的用法JQuery手册已经写得很详细，参考手册就可以了，很简单。需要指出的一点是$.ajax利用的jsonp需要客户端与服务端作出配合。

 

先整理几种之前尝试过但是失败的方案吧!

  1. 方案一:我尝试过自己写一个Ajax函数去请求WebService,JavaScript代码没有报错.但是回调函数没有执行,证明服务器(IIS)没有响应,我用了个手段测试下是否有请求到该WebService,在其初始化时,创建一个txt文件,写入任意数据表示它请求到,然后在其方法内也做了个类似手段测试,结果证明自己写的Ajax函数并没有请求WebService,为什么?我也不清楚,如果有碰到过这样情况的朋友并且已经解决的请告知我,谢谢.
  2. 方案二:我刚开始的时候,以为是IIS的环境或权限问题,我改为Visual Studio测试环境发布该WebService,结果一样,没有请求.
  3. 方案三:上Google查了很多资料,包括MSDN,cnblogs,JQuery等官方示例,但是官方示例只给了片段,代码不完全,而且他们url地址填的是本地地址,而不是远程(网络)地址,甚至不同的资料上其$.ajax函数内的格式有不同的写法,都试过了,失败告终.
  4. 方案四:后来看到有人说我的WebService没有加上类特性[System.Web.Script.Services.ScriptService]以及方法特性[System.Web.Script.Services.ScriptMethod],我很纳闷,这远程访问(跨域调用)跟这特性有什么关系?不过我还是照做,加了上去,事实证明,一点意义都没有.

 

成功方案:

其成功解决问题的几个重要因素如下:

1.       由于WebService默认不支持Get请求,所以要在Web.config配置文件内的<system.web>节点内添加如下元素:

1 <system.web>
2 <webServices>
3         <protocols>
4           <add name="HttpGet"/>
5           <add name="HttpPost"/>
6         </protocols>
7 </webServices>
8 </system.web>

有些网友没有在这里问，而是通过QQ问我问题。

我在帮他们远程调试的时候，没注意看，后来才发现原来问题是他们把这段配置放在客户端程序，而不是web service服务程序。郁闷..

在此强调下：是放在web service网站的web.config里面，而不是放在客户端程序的web.config里。

 

2.       在请求的URL加参数jsoncallback=?,注意这里jsoncallback=?是关键所在！其中?符号会被JQuery自动替换成其它的回调方法名称，具体过程和原理我们这里不予理会。我们关心的是jsoncallback=?起什么作用了？原来jsoncallback=?被替换后，会把方法名称传给服务器。我们在服务器端要做什么工作呢？服务器要接受参数jsoncallback，然后把jsoncallback的值作为JSON数据方法名称返回。

 

3.       设置dataType类型为”jsonp”

 

WebService代码如下:

 1 using System.Web;
 2 using System.Web.Services;
 3 /// <summary>
 4 ///UserService 的摘要说明
 5 /// </summary>
 6 [WebService(Namespace = "http://tempuri.org/")]
 7 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 8 public class UserService : System.Web.Services.WebService
 9 { 
10     [WebMethod]
11     public void GetLoginId(string loginId)
12     {
13         string callback = HttpContext.Current.Request["jsoncallback"];
14         bool bl= true;//这是我调用业务逻辑层(BLL)的一个方法
15                               //返回一个布尔(boolean)值
16                               //现在我省略掉,直接赋值true
17         HttpContext.Current.Response.Write(callback +
18             "({result:'" + bl + "'})");
19         //关于result这词是你自己自定义的属性
20         //会作为回调参数的属性供你调用结果
21         HttpContext.Current.Response.End();
22     }
23 }

aspx页面及javascript脚本代码如下:

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 2  
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head runat="server">
 6     <title>测试</title>
 7     <script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
 8     <script type="text/javascript">
 9         //Document加载完毕后初始化方法
10         $(function Init() {
11             $("#TxtLoginId").bind("blur", CkLoginId);
12         }); 
13         //帐号验证及提示
14         function CkLoginId() {
15             var Id = $("#TxtLoginId");
16             $.ajax({
17                 url: "http://localhost:5311/UserService.asmx/GetLoginId?jsoncallback=?",
18                 dataType:"jsonp",
19                 data:{"loginId":Id.val()},
20                 success:OnSuccess,
21                 error:OnError
22             });
23         }
24         function OnSuccess(json) {
25             alert(json.result);
26         }
27         function OnError(XMLHttpRequest, textStatus, errorThrown) {
28             targetDiv = $("#data");
29             if (errorThrown || textStatus == "error" || textStatus == "parsererror" || textStatus == "notmodified") {
30                 targetDiv.replaceWith("请求数据时发生错误！");
31                 return;
32             }
33             if (textStatus == "timeout") {
34                 targetDiv.replaceWith("请求数据超时！");
35                 return;
36             }
37         }  
38     </script>
39 </head>
40 <body>
41     <form id="form1" runat="server">
42     <table border="0" cellspacing="0" cellpadding="0" width="100%">
43         <tr>
44             <td>
45                 <asp:Label ID="LblLoginId" runat="server" Text="帐&nbsp;&nbsp;号" ClientIDMode="Static"></asp:Label>
46                 <asp:TextBox ID="TxtLoginId" runat="server" ClientIDMode="Static"></asp:TextBox>
47             </td>
48         </tr>
49     </table>
50     </form>
51 </body>
52 </html>

运行结果:

转载的朋友,请不要删除以下行,对此,表示感谢!!!

原文链接:http://www.cnblogs.com/VAllen/archive/2012/07/12/JQueryAjaxRegion.html

posted @ 2012-07-12 00:40  VAllen  阅读(7158)  评论(19)  编辑  收藏  举报