写在前面
跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP。
什么是跨域?
简单的来说,出于安全方面的考虑,页面中的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代码。
举个例子,假如需要从服务器(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:-
<scripttype="text/javascript"src="http://www.a.com/user?id=123?callback=foo"></script>
便可以使用foo函数来调用返回的数据了。
在jQuery中如何通过JSONP来跨域获取数据
第一种方法是在ajax函数中设置dataType为'jsonp':
-
$.ajax({
-
dataType:'jsonp',
-
url:'http://www.a.com/user?id=123',
-
success:function(data){
-
//处理data数据
-
}
- });
第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可:
-
$.getJSON('http://www.a.com/user?id=123&callback=?',function(data){
-
//处理data数据
- });
也可以简单地使用getScript方法:
-
//此时也可以在函数外定义foo方法
-
functionfoo(data){
-
//处理data数据
-
}
-
$.getScript('http://www.a.com/user?id=123&callback=foo');
JSONP的应用
JSONP在开放API中可以起到非常重要的作用,开放API是运用在开发者自己的应用上,而许多应用往往是在开发者的服务器上而不是在新浪微博的服务器上,因此跨域请求数据成为开发者们所需要解决的一大问题,广大开放平台应该实现对JSONP的支持,这一点新浪微博开放平台便做的非常好(虽然某些API里没有说明,但实际上是可以使用JSONP方式调用的)。
=======================签 名 档=======================
原文地址(我的博客):http://www.clanfei.com/2012/08/1637.html
欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================
分享到:
相关推荐
利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
主要从三方面来通过jsonp来实现ajax跨域问题: 1.javascript方法 2.jquery $.ajax方法 3.jquery $.getJSON方法 不看会后悔的!
NULL 博文链接:https://sagewsg.iteye.com/blog/1670992
本文将给您介绍如何使用getJSON来实现异步跨域提交表单
注意一点是,这里是用Jsonp解决ajax的跨域问题,具体的实现其实不是ajax。 1、同源策略 浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指,域名,协议,端口相同。不同源的客户端脚本...
基于jQuery的jsonp ajax跨域请求,
本文主要讲解了如何去解决AJAX跨域的问题,从跨域的简单原理到JONP实现模式详细的讲解整个解决方案,最后利用jQuery可以很方便的实现JSONP来进行跨域访问。
实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址。难道...
ajax跨域请求,jquery.jsonp插件
直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery...
实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址。难道...
本文给大家汇总介绍了JavaScript的AJax,JQuery的AJax以及利用jsonp实现跨域访问的问题,非常的细致全面,有需要的小伙伴可以参考下。
直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery...
这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过...
由于JS同源策略的影响,因此js只能访问同域名下的文档。因此要实现跨域,一般有以下几个方法: 一、处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的... ajax本身是不可以跨域的, 通过产生一个script标签来实
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友
使用Jquery中的Aajx方法利用Jsonp方式访问豆瓣公开的api接口,跨域获取书籍信息。
求解决办法 代码如下: ajax{ url :“http://xxxx/app”, type:... 您可能感兴趣的文章:跨域请求之jQuery的ajax jsonp的使用解惑AJAX跨域请求json数据的实现方法jQuery.ajax 跨域请求webapi设置headers的解决方案JQuer
了解了jsonp之后,大家应该也都明白了,jsonp主要就是用来实现跨域的获取数据,今天我们就来详细探讨下如何在实际中应用jsonp实现跨域