利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService，返回json数据

原文： http://blog.csdn.net/polarissky/article/details/6429554

1.新建数据源项目CrossDomain

主要文件如下：

1.Handler.ashx 作为jquery跨域请求*.handler的响应，代码如下：

    using System;  using System.Collections.Generic;  using System.Web;  using System.Web.Services;  namespace CrossDomain  {  /// <summary>  /// $codebehindclassname$ 的摘要说明  /// </summary>  [WebService(Namespace = "http://tempuri.org/")]  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  public class Handler : IHttpHandler  {  public void ProcessRequest(HttpContext context)  {  context.Response.ContentType = "text/plain";  string callbackMethodName = context.Request.Params["jsoncallback"];  string currentCity = context.Request["city"];  currentCity = string.IsNullOrEmpty(currentCity) ? "北京" : "沈阳";  string result = callbackMethodName + "({/"city/":" + "/"" + currentCity + "/", /"dateTime/":" + "/"" + DateTime.Now + "/"});";  context.Response.Write(result);  }  public bool IsReusable  {  get  {  return false;  }  }  }  }

2.WebService.asmx 作为jquery跨域请求WebService的响应，代码如下：

    using System;  using System.Collections.Generic;  using System.Web;  using System.Web.Services;  namespace CrossDomain  {  /// <summary>  /// WebService 的摘要说明  /// </summary>  [WebService(Namespace = "http://tempuri.org/")]  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  [System.ComponentModel.ToolboxItem(false)]  public class WebService : System.Web.Services.WebService  {  [WebMethod]  public void HelloWorld(string city)  {  string callbackMethodName = HttpContext.Current.Request.Params["jsoncallback"] ?? "";  city = string.IsNullOrEmpty(city) ? "北京" : "沈阳";  string result = callbackMethodName + "({/"city/":" + "/"" + city + "/", /"dateTime/":" + "/"" + DateTime.Now + "/"});";  HttpContext.Current.Response.Write(result);  HttpContext.Current.Response.End();  }  [WebMethod]  public void ws(string name, string time)  {  HttpRequest Request = HttpContext.Current.Request;  string callback = Request["callback"];  HttpResponse Response = HttpContext.Current.Response;  Response.Write(callback + "({msg:'this is" + name + "jsonp'})");  Response.End();  }  }  }

3.Web.config 需要修改web.config文件，注意webServices节（这是请求webservice获取数据的关键）具体如下：

    <?xml version="1.0" encoding="utf-8"?>  <configuration>  <appSettings/>  <connectionStrings/>  <system.web>  <!--   设置 compilation debug="true" 可将调试符号插入  已编译的页面中。但由于这会   影响性能，因此只在开发过程中将此值   设置为 true。  -->  <compilation debug="false">  </compilation>  <!--  通过 <authentication> 节可以配置 ASP.NET 用来   识别进入用户的  安全身份验证模式。   -->  <authentication mode="Windows" />  <!--  如果在执行请求的过程中出现未处理的错误，  则通过 <customErrors> 节可以配置相应的处理步骤。具体说来，  开发人员通过该节可以配置  要显示的 html 错误页  以代替错误堆栈跟踪。  <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">  <error statusCode="403" redirect="NoAccess.htm" />  <error statusCode="404" redirect="FileNotFound.htm" />  </customErrors>  -->  <webServices>  <protocols>  <add name="HttpGet"/>  <add name="HttpPost"/>  </protocols>  </webServices>  </system.web>  </configuration>

2.新建跨域请求测试项目CrossDomainRequestTest

主要文件如下：

1.CrossDomainRequestHandler.htm 跨域请求*.handler获取josn格式数据测试页，代码如下：

    <!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>  <title></title>  <mce:script type="text/javascript" language="javascript" src="js/jquery-1.4.4.js" mce_src="js/jquery-1.4.4.js"></mce:script>  <mce:script type="text/javascript" language="javascript" src="js/jquery-1.4.4.js" mce_src="js/jquery-1.4.4.js"></mce:script>  <mce:script type="text/javascript" language="javascript"><!--  $(document).ready(function() {  //        var clientUrl = "http://localhost:4508/Handler.ashx?jsoncallback=?";  var clientUrl = "http://192.168.120.179:8086/Handler.ashx?jsoncallback=?"  var currentCity = "哈尔滨";  $.ajax({  url: clientUrl,  dataType: "jsonp",  data : {city : currentCity},  success : OnSuccess,  error : OnError  });  });  function OnSuccess(json) {  $("#data").html("城市：" + json.city + "，时间：" + json.dateTime);  }  function OnError(XMLHttpRequest, textStatus, errorThrown) {  targetDiv = $("#data");  if (errorThrown || textStatus == "error" || textStatus == "parsererror" || textStatus == "notmodified") {  targetDiv.replaceWith("请求数据时发生错误！");  return;  }  if (textStatus == "timeout") {  targetDiv.replaceWith("请求数据超时！");  return;  }  }  // --></mce:script>  </head>  <body>  <div id="data"></div>  </body>  </html>

2.CrossDomainRequestWebService.htm 跨域请求WebService *.asmx获取josn格式数据测试页，代码如下:

    <!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>  <title></title>  <mce:script type="text/javascript" language="javascript" src="js/jquery-1.4.4.js" mce_src="js/jquery-1.4.4.js"></mce:script>  <mce:script type="text/javascript" language="javascript"><!--  $(document).ready(function() {  //            var clientUrl = "http://localhost:4508/WebService.asmx/HelloWorld?jsoncallback=?";  var clientUrl = "http://192.168.120.179:8086/WebService.asmx/HelloWorld?jsoncallback=?";  var currentCity = "哈尔滨";  $.getJSON(  clientUrl,  { city: currentCity },  function(json) {  $("#data").html("城市：" + json.city + "，时间：" + json.dateTime);  }  );  });  function OnSuccess(responseData) {  $("#data").html(responseData.city);  }  function OnError(XMLHttpRequest, textStatus, errorThrown) {  targetDiv = $("#data");  if (errorThrown || textStatus == "error" || textStatus == "parsererror" || textStatus == "notmodified") {  targetDiv.replaceWith("请求数据时发生错误！");  return;  }  if (textStatus == "timeout") {  targetDiv.replaceWith("请求数据超时！");  return;  }  }  // --></mce:script>  </head>  <body>  <div id="data"></div>  </body>  </html>

利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService，返回json数据相关推荐

ajax跨域请求Jsonp实现,使用jsonp实现ajax跨域请求
Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example ...
JSONP实现Ajax跨域请求
前言由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...
jQuery利用JSONP解决AJAX跨域请求
出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. JSON(Ja ...
AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
AJAX跨域请求数据原理与案例
1.如何通过AJAX跨域请求数据 AJAX通过jsonp来实现跨域请求数据,通过设置dataType(jquery)为jsonp即可. 2.AJAX如何通过jsonp实现跨域(来源于其他网站资料) J ...
AJAX 跨域请求（转发）
什么是JSONP:JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访 ...
js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...
先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
jQuery使用ajax跨域请求获取数据
jQuery使用ajax跨域请求获取数据跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内 ...

利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService，返回json数据

利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService，返回json数据相关推荐

最新文章

热门文章