Ajax jsonp跨域请求实现方法

网络编程 2024/12/26 佚名

3 1 2

什么是跨域？

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

具体策略限制情况可看下表：

URL 说明允许通信 http://www.a.com/a.js
http://www.a.com/b.js 同一域名下允许 http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹允许 http://www.a.com:8000/a.js
http://www.a.com/b.js 同一域名，不同端口不允许 http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议不允许 http://www.a.com/a.js
http://127.0.0.100/b.js 域名和域名对应ip 不允许 http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同不允许 http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上）不允许 http://www.a.com/a.js
http://www.b.com/b.js 不同域名不允许

什么是JSONP？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。

JSONP跨域的原理

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

跨域: js有一个同源限制,简单说来源不一样的话就无法相互间交互.那么怎么算来源不一样呢, 举个例子:浏览器访问-->服务器A--->得到页面A---页面A中的js脚本只能访问服务器A的资源(相同域名和端口,此外域名与对应的ip也算不同源,要么都域名,要么都ip).

以上就是js的跨域问题,但是这里需要注意一点的是服务器A是没有跨域的问题的,这个只有js存在这个问题,也就是说: 页面A中js-->服务器A--->跨域资源,这个路径是可以.只有页面A中的js--->跨域资源,这个路径是不行的.

然后说一下解决方案中的jsonp,这个不是一种格式,而是一种解决方案.

jsonp的原理:js虽然有同源限制,但是引入js文件的时候却没有这个限制,也就是说:

其中src属性引入js文件的时候是没有同源限制的,此时是可以引入域外资源的.jsonp的原理就在这里,通过动态的创建一个以上那行js引入语句,通过其src属性访问域外资源.而域外资源服务器只要返回一个能被解析为js语句的字符串即可达到返回结果的目的,形如:

callback({"key":"value",...})

其中callback是需要事先约定的名字,绿字部分为要返回到json字符串,然后拼接成以上那种形式直接返回即可.这样页面中的js从服务端接收到这个拼接的字符串后,就会直接执行本地的名为callback的js方法,这也就是为何callback这个需要事先约定的原因,需要保证页面侧要存在这个js方法,这个方法传入的参数就为服务器侧的返回值.

ajax是支持jsonp的,所以以上那些麻烦事情都会替我们做,写法如下:

$.ajax({
     type: 'GET',
     url: "http://127.0.0.1:8080/xxx/xxx",
     async: false,
     dataType: "jsonp",
     jsonp: "callback",
     success: function(result){
       .....
     },
     timeout:3000 
  });

红字部分标识我们使用jsonp的方式调用,实际上此时这个已经不是传统意义上的ajax的get请求了,它的真实实现方式就是我们上文中说的那样.其中红字部分的callback为我们要和服务器端进行沟通的部分,这个请求发送到服务器端,实际上这样的:

http://127.0.0.1:8080/xxx/xxx"callback")),也就是取后面的jqueryxxxx等自动生成的值,这个值实际上就是对应的我们发送请求的ajax方法中的success回调方法,服务器端如果返回

jqueryxxxx({"ret":"ok"})

页面中会自动执行success方法,且将{"ret":"ok"}传给success方法的参数result.

以上就是ajax通过jsonp的方式实现跨域访问的过程.可以看出基本不用我们做什么额外操作,全都封装好了.

ps：在jQuery中如何通过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为'jsonp'：

$.ajax({
    dataType: 'jsonp',
    url: 'http://www.a.com/user"color: #0000ff">第二种方法是利用getJSON来实现，只要在地址中加上callback="htmlcode">

$.getJSON('http://www.a.com/user"htmlcode">

//此时也可以在函数外定义foo方法
function foo(data){
    //处理data数据
}
$.getJSON('http://www.a.com/user"color: #0000ff">JSONP的应用
JSONP在开放API中可以起到非常重要的作用，开放API是运用在开发者自己的应用上，而许多应用往往是在开发者的服务器上而不是在新浪微博的服务器上，因此跨域请求数据成为开发者们所需要解决的一大问题，广大开放平台应该实现对JSONP的支持，这一点新浪微博开放平台便做的非常好（虽然某些API里没有说明，但实际上是可以使用JSONP方式调用的）。

                                
                                
                                    ajax_jsonp跨域,jsonp跨域请求,ajax跨域请求jsonp 
                                华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Ajax jsonp跨域请求实现方法”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年12月26日

Ajax jsonp跨域请求实现方法

asp.net+ajax简单分页实例分析

简单谈谈AJAX核心对象

评论“Ajax jsonp跨域请求实现方法”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接