关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例
2012-07-12 00:40
1616 查看
[b]关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例[/b]
开发环境:Visual Studio 2010 SP1
部署环境:Window 7 SP1+IIS7
现在的JQuery中$.ajax方法支持跨域读取json数据了,原理是利用一个叫做jsonp的概念。当然,究其本质还是通过script标签动态加载js,似乎这是实现真正跨域的好方法。
$.ajax的用法JQuery手册已经写得很详细,参考手册就可以了,很简单。需要指出的一点是$.ajax利用的jsonp需要客户端与服务端作出配合。
先整理几种之前尝试过但是失败的方案吧!
方案一:我尝试过自己写一个Ajax函数去请求WebService,JavaScript代码没有报错.但是回调函数没有执行,证明服务器(IIS)没有响应,我用了个手段测试下是否有请求到该WebService,在其初始化时,创建一个txt文件,写入任意数据表示它请求到,然后在其方法内也做了个类似手段测试,结果证明自己写的Ajax函数并没有请求WebService,为什么?我也不清楚,如果有碰到过这样情况的朋友并且已经解决的请告知我,谢谢.
方案二:我刚开始的时候,以为是IIS的环境或权限问题,我改为Visual Studio测试环境发布该WebService,结果一样,没有请求.
方案三:上Google查了很多资料,包括MSDN,cnblogs,JQuery等官方示例,但是官方示例只给了片段,代码不完全,而且他们url地址填的是本地地址,而不是远程(网络)地址,甚至不同的资料上其$.ajax函数内的格式有不同的写法,都试过了,失败告终.
方案四:后来看到有人说我的WebService没有加上类特性[System.Web.Script.Services.ScriptService]以及方法特性[System.Web.Script.Services.ScriptMethod],我很纳闷,这远程访问(跨域调用)跟这特性有什么关系?不过我还是照做,加了上去,事实证明,一点意义都没有.
成功方案:
其成功解决问题的几个重要因素如下:
1. 由于WebService默认不支持Get请求,所以要在Web.config配置文件内的<system.web>节点内添加如下元素:
有些网友没有在这里问,而是通过QQ问我问题。
我在帮他们远程调试的时候,没注意看,后来才发现原来问题是他们把这段配置放在客户端程序,而不是web service服务程序。郁闷..
在此强调下:是放在web service网站的web.config里面,而不是放在客户端程序的web.config里。
2. 在请求的URL加参数jsoncallback=?,注意这里jsoncallback=?是关键所在!其中?符号会被JQuery自动替换成其它的回调方法名称,具体过程和原理我们这里不予理会。我们关心的是jsoncallback=?起什么作用了?原来jsoncallback=?被替换后,会把方法名称传给服务器。我们在服务器端要做什么工作呢?服务器要接受参数jsoncallback,然后把jsoncallback的值作为JSON数据方法名称返回。
[b][b]3. 设置dataType类型为”jsonp”[/b][/b]
WebService代码如下:
aspx页面及javascript脚本代码如下:
运行结果:
转载的朋友,请不要删除以下行,对此,表示感谢!!!
原文链接:/article/5173478.html
开发环境:Visual Studio 2010 SP1
部署环境:Window 7 SP1+IIS7
现在的JQuery中$.ajax方法支持跨域读取json数据了,原理是利用一个叫做jsonp的概念。当然,究其本质还是通过script标签动态加载js,似乎这是实现真正跨域的好方法。
$.ajax的用法JQuery手册已经写得很详细,参考手册就可以了,很简单。需要指出的一点是$.ajax利用的jsonp需要客户端与服务端作出配合。
先整理几种之前尝试过但是失败的方案吧!
方案一:我尝试过自己写一个Ajax函数去请求WebService,JavaScript代码没有报错.但是回调函数没有执行,证明服务器(IIS)没有响应,我用了个手段测试下是否有请求到该WebService,在其初始化时,创建一个txt文件,写入任意数据表示它请求到,然后在其方法内也做了个类似手段测试,结果证明自己写的Ajax函数并没有请求WebService,为什么?我也不清楚,如果有碰到过这样情况的朋友并且已经解决的请告知我,谢谢.
方案二:我刚开始的时候,以为是IIS的环境或权限问题,我改为Visual Studio测试环境发布该WebService,结果一样,没有请求.
方案三:上Google查了很多资料,包括MSDN,cnblogs,JQuery等官方示例,但是官方示例只给了片段,代码不完全,而且他们url地址填的是本地地址,而不是远程(网络)地址,甚至不同的资料上其$.ajax函数内的格式有不同的写法,都试过了,失败告终.
方案四:后来看到有人说我的WebService没有加上类特性[System.Web.Script.Services.ScriptService]以及方法特性[System.Web.Script.Services.ScriptMethod],我很纳闷,这远程访问(跨域调用)跟这特性有什么关系?不过我还是照做,加了上去,事实证明,一点意义都没有.
成功方案:
其成功解决问题的几个重要因素如下:
1. 由于WebService默认不支持Get请求,所以要在Web.config配置文件内的<system.web>节点内添加如下元素:
<system.web> <webServices> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> </protocols> </webServices> </system.web>
有些网友没有在这里问,而是通过QQ问我问题。
我在帮他们远程调试的时候,没注意看,后来才发现原来问题是他们把这段配置放在客户端程序,而不是web service服务程序。郁闷..
在此强调下:是放在web service网站的web.config里面,而不是放在客户端程序的web.config里。
2. 在请求的URL加参数jsoncallback=?,注意这里jsoncallback=?是关键所在!其中?符号会被JQuery自动替换成其它的回调方法名称,具体过程和原理我们这里不予理会。我们关心的是jsoncallback=?起什么作用了?原来jsoncallback=?被替换后,会把方法名称传给服务器。我们在服务器端要做什么工作呢?服务器要接受参数jsoncallback,然后把jsoncallback的值作为JSON数据方法名称返回。
[b][b]3. 设置dataType类型为”jsonp”[/b][/b]
WebService代码如下:
using System.Web; using System.Web.Services; /// <summary> ///UserService 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class UserService : System.Web.Services.WebService { [WebMethod] public void GetLoginId(string loginId) { string callback = HttpContext.Current.Request["jsoncallback"]; bool bl= true;//这是我调用业务逻辑层(BLL)的一个方法 //返回一个布尔(boolean)值 //现在我省略掉,直接赋值true HttpContext.Current.Response.Write(callback + "({result:'" + bl + "'})"); //关于result这词是你自己自定义的属性 //会作为回调参数的属性供你调用结果 HttpContext.Current.Response.End(); } }
aspx页面及javascript脚本代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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"> <title>测试</title> <script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script> <script type="text/javascript"> //Document加载完毕后初始化方法 $(function Init() { $("#TxtLoginId").bind("blur", CkLoginId); }); //帐号验证及提示 function CkLoginId() { var Id = $("#TxtLoginId"); $.ajax({ url: "http://localhost:5311/UserService.asmx/GetLoginId?jsoncallback=?", dataType:"jsonp", data:{"loginId":Id.val()}, success:OnSuccess, error:OnError }); } function OnSuccess(json) { alert(json.result); } function OnError(XMLHttpRequest, textStatus, errorThrown) { targetDiv = $("#data"); if (errorThrown || textStatus == "error" || textStatus == "parsererror" || textStatus == "notmodified") { targetDiv.replaceWith("请求数据时发生错误!"); return; } if (textStatus == "timeout") { targetDiv.replaceWith("请求数据超时!"); return; } } </script> </head> <body> <form id="form1" runat="server"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td> <asp:Label ID="LblLoginId" runat="server" Text="帐 号" ClientIDMode="Static"></asp:Label> <asp:TextBox ID="TxtLoginId" runat="server" ClientIDMode="Static"></asp:TextBox> </td> </tr> </table> </form> </body> </html>
运行结果:
转载的朋友,请不要删除以下行,对此,表示感谢!!!
原文链接:/article/5173478.html
相关文章推荐
- 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- 关于试用jquery的jsonp实现ajax跨域请求数据的问题
- dhl:asp.net mvc下用jQuery通过AJAX 实现HTTP 请求加载远程数据
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
- ASP.NET利用JQuery中的Aajax实现JSON数据后台交互
- 通过jsonp获取json数据实现AJAX跨域请求
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
- ASP.NET 跨域请求之jQuery的ajax jsonp的使用解惑 (转载)
- jQuery使用JSONP实现跨域获取数据的三种方法详解
- 解决:在使用JSONP跨域请求时.AJAX的dataFilter获取返回数据出现undifined
- 利用JQuery实现更简单的Ajax跨域请求
- ASP.NET MVC中 Jquery AJAX 获取数据利用MVC模型绑定实现输出
- AJAX 跨域请求 - JSONP获取JSON数据