ajax实现JSONP跨域
2017-06-22 14:37
309 查看
摘要: 简单的说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果
AJAX的一大限制是不允许跨域请求。 不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果
简单的说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果
具体策略限制情况可看下表:
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取
JSONP在开放API中可以起到非常重要的作用,开放API是运用在开发者自己的应用上,而许多应用往往是在开发者的服务器上,因此跨域请求数据成为开发者们所需要解决的一大问题,广大开放平台应该实现对JSONP的支持,这一点新浪微博开放平台便做的非常好(虽然某些API里没有说明,但实际上是可以使用JSONP方式调用的)
同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码
举个例子,假如需要从服务器(http://www.a.com/user?id=123)获取的数据如下:
那么,使用JSONP方式请求(http://www.a.com/user?id=123?callback=foo)的数据将会是如下:
当然,如果服务端考虑得更加充分,返回的数据可能如下:
这时候我们只要定义一个foo()函数,并动态地创建一个script标签,使其的src属性为http://www.a.com/user?id=123?callback=foo
第一种方法是在ajax函数中设置dataType为'jsonp':
第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可:
也可以简单地使用getScript方法:
type:请求方式 GET/POST
原文链接
AJAX的一大限制是不允许跨域请求。 不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果
什么是跨域
简单的说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果具体策略限制情况可看下表:
什么是JSONP?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取
JSONP的应用
JSONP在开放API中可以起到非常重要的作用,开放API是运用在开发者自己的应用上,而许多应用往往是在开发者的服务器上,因此跨域请求数据成为开发者们所需要解决的一大问题,广大开放平台应该实现对JSONP的支持,这一点新浪微博开放平台便做的非常好(虽然某些API里没有说明,但实际上是可以使用JSONP方式调用的)
JSONP跨域的原理
同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码举个例子,假如需要从服务器(http://www.a.com/user?id=123)获取的数据如下:
{"id": 123, "name" : 张三, "age": 17}
那么,使用JSONP方式请求(http://www.a.com/user?id=123?callback=foo)的数据将会是如下:
foo({"id": 123, "name" : 张三, "age": 17});
当然,如果服务端考虑得更加充分,返回的数据可能如下:
try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}
这时候我们只要定义一个foo()函数,并动态地创建一个script标签,使其的src属性为http://www.a.com/user?id=123?callback=foo
function executeJsonp(url){ var eleScript= document.createElement("script"); eleScript.type = "text/javascript"; eleScript.src = url; document.getElementsByTagName("head")[0].appendChild(eleScript); } function foo(data){ for(var p in data){ console.log(data[p]); } } var url = "http://www.a.com/user?id=123?callback=foo"; executeJsonp(url)
在jQuery中如何通过JSONP来跨域获取数据
第一种方法是在ajax函数中设置dataType为'jsonp':$.ajax({ type:"get", data:"random="+Math.random(), url:url, dataType:"jsonp", jsonp:"callback", success:function(data){ //处理data数据 $.each(data, function(key, val) { $("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>"); }); } });
第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可:
jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{ q: "Arsenal" },function(tweets) { console.info("Twitter returned: ",tweets); });
也可以简单地使用getScript方法:
//此时也可以在函数外定义foo方法 function foo(data){}//处理data数据 $.getScript('http://www.a.com/user?id=123&callback=foo');
jquery中的ajax方法怎样通过JSONP进行远程调用
$.ajax的参数
type:请求方式 GET/POST原文链接
相关文章推荐
- jquery的ajax实现跨域调用---jsonp
- SSO(四) cas ajax + jsonp实现跨域登录
- Jquery之AJAX COOKIES跨域请求 - JSONP实现方法
- AJAX实现跨域的三种种方法(代理,JSONP,XHR2)
- 深入理解Ajax结合JSONP实现跨域请求
- jquery+ajax+jsonp实现跨域请求
- Ajax通过jsonp实现跨域访问,访问成功但走error不走success
- PHP AJAX JSONP实现跨域请求使用实例
- Ajax+Spring MVC实现跨域请求(JSONP)
- AJAX实现跨域的三种方法(代理,JSONP,XHR2)
- PHP AJAX JSONP实现跨域请求使用实例
- PHP AJAX JSONP实现跨域请求使用实例
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- Ajax+Spring MVC实现跨域请求(JSONP)JSONP 跨域
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- jsonp实现ajax跨域的使用经验
- Ajax+Spring MVC实现跨域请求(JSONP)
- Ajax+Spring MVC实现跨域请求(JSONP)
- 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例
- PHP AJAX JSONP实现跨域请求使用实例