当前位置:首页 > JS > jQuery Ajax 实现跨域名请求的方法 JSONP – 服务端C#/ASP.NET示例代码图文讲解

jQuery Ajax 实现跨域名请求的方法 JSONP – 服务端C#/ASP.NET示例代码图文讲解

Web Service 是不能进行跨域请求数据的,但是我们应该怎么解决jQuery Ajax 跨域请求数据的方法呢。JSONP就是答案,我们可以使用JSONP实现jQuery Ajax跨域访问的问题。

什么是JSONP?

说说jsonp是怎么产生的吧,首先下面几个问题应该了解:

  • Ajax直接请求跨域的静态、动态网页、Web Service等等,只要是跨域的,一律是不允许的。
  • 回忆一下,我们在HTML页面中使用script、img标签的时候是没有受到跨域的影响。
  • 于是想到了解决方案,就是把服务器端的数据封装在js文件中,客户端可以通过获取js跨域文件的方法来获取数据
  • 回想一下,我们服务端如果直接返回给Ajax请求返回json格式的数据时候,客服端Ajax方法的success:function(e)是可以接受json数据的。所以我们服务端动态生成json文件返回给客服端使用是可以实现的。
  • 所以在这种思想下,形成了一种看似非正常的网络协议,这就是JSONP,这个协议的关键点是允许用户传递一个callback参数给服务端,然后服务端将这个callback参数的值作为js的函数名来封装JSON数据,这样客户端就可以实现跨域访问来处理数据了。

示例代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
        type : "post",
        url :'http://跨域域名/test?callback=GetPersonName', 
        dataType : "jsonp",
        jsonpCallback:"callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonpCallback:"GetPersonName",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
		success: function(json){
             alert('用户名为: ' + json.Name);
         },
         error: function(){
             alert('fail');
         }
    });

服务端C#代码如下所示

1
2
    String callbackFunName = Request.QueryString["callback"];
    Response.Write(callbackFunName + "({ \"name\":\"知道91博客\"})");

服务端获取到callback的值为GetPersonName,然后返回GetPersonName({ \”name\”:\”知道91博客\”})这个字符串给客服端,jQuery由于封装了JSONP,在处理jsonp类型的ajax时会自动将返回GetPersonName({ \”name\”:\”知道91博客\”})中的参数{ \”name\”:\”知道91博客\”}传递给success:function(json)的属性方法,因此我们可以看到显示“用户名为:知道91博客”的弹出框。

好了,到此通过jQuery的Ajax的JSONP方法就可以实现跨域请求数据。

  • << 控制反转(IoC)和依赖注入(Dependency In...
  • 翻墙代理软件免费下载 - 绿豆VPN推荐介绍 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/jquery-ajax-jsonp-csharp-aspnet/

    相关文章 近期热评 最新文章

    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。