jQuery $.ajax跨域-JSONP获取JSON数据(转载)
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序。
不过,由于受到浏览器的限制,该方法不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误。但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办?
理解同源策略限制
同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。
克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据,并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用,但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域,并且使用 GET 请求获取任何第三方资源。不过,获取资源后,框架中的内容会受到同源策略的限制。
克服该限制更理想方法是在 Web 页面中插入动态脚本元素,该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档,就不会成功。幸运的是,通过添加 JavaScript Object Notation (JSON) 可以改进该技术。
1、什么是JSONP?
要了解JSONP,不得不提一下JSON,那么什么是JSON ?
JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.
JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
2、JSONP有什么用?
由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。
3、如何使用JSONP?
下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数。
HTML代码 (任一 ):
- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
- <script type="text/javascript">
- function jsonpCallback(result) {
- //alert(result);
- for(var i in result) {
- alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
- }
- }
- var JSONP=document.createElement("script");
- JSONP.type="text/javascript";
- JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
- document.getElementsByTagName("head")[0].appendChild(JSONP);
- </script>
复制代码
或者
- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
- <script type="text/javascript">
- function jsonpCallback(result) {
- alert(result.a);
- alert(result.b);
- alert(result.c);
- for(var i in result) {
- alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
- }
- }
- </script>
- <script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>
复制代码
JavaScript的链接,必须在function的下面。
服务端PHP代码 (services.php):
- <?php
- //服务端返回JSON数据
- $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
- $result=json_encode($arr);
- //echo $_GET['callback'].'("Hello,World!")';
- //echo $_GET['callback']."($result)";
- //动态执行回调函数
- $callback=$_GET['callback'];
- echo $callback."($result)";
复制代码
如果将上述JS客户端代码用jQuery的方法来实现,也非常简单。
- $.getJSON
- $.ajax
- $.get
复制代码
客户端JS代码在jQuery中的实现方式1:
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript">
- $.getJSON("http://crossdomain.com/services.php?callback=?",
- function(result) {
- for(var i in result) {
- alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
- }
- });
- </script>
复制代码
客户端JS代码在jQuery中的实现方式2:
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript">
- $.ajax({
- url:"http://crossdomain.com/services.php",
- dataType:'jsonp',
- data:'',
- jsonp:'callback',
- success:function(result) {
- for(var i in result) {
- alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
- }
- },
- timeout:3000
- });
- </script>
复制代码
客户端JS代码在jQuery中的实现方式3:
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript">
- $.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');
- </script>
复制代码
其中 jsonCallback 是客户端注册的,获取 跨域服务器 上的json数据 后,回调的函数。
http://crossdomain.com/services.php?callback=jsonpCallback
这个 url 是跨域服务 器取 json 数据的接口,参数为回调函数的名字,返回的格式为
jsonpCallback({msg:'this is json data'})
Jsonp原理:
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)
使用JSON的优点在于:
比XML轻了很多,没有那么多冗余的东西。
JSON也是具有很好的可读性的,但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示,浏览器对于JSON的格式化的显示就需要借助一些插件了。
在JavaScript中处理JSON很简单。
其他语言例如PHP对于JSON的支持也不错。
JSON也有一些劣势:
JSON在服务端语言的支持不像XML那么广泛,不过JSON.org上提供很多语言的库。
如果你使用eval()来解析的话,会容易出现安全问题。
尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。
主要提示:
JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,在提交开发资源之前必须认真考虑它们。
第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。
JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。
jQuery $.ajax跨域-JSONP获取JSON数据(转载)的更多相关文章
- JSONP 跨域请求 - 获取JSON数据
如何用原生方式使用JSONP? 下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数. ...
- jQuery使用ajax跨域请求获取数据
jQuery使用ajax跨域请求获取数据 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...
- JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案
JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案 最近在开发WSS RESTful服务的时候, 碰到了这些个纠 ...
- 关于jquery ajax跨域请求获取response headers问题
背景:最近项目jwt用户认证方式,关于jwt本人就不再赘述,大家可自行百度. jwt token基本流程是这样的: 用户使用用户名密码来请求服务器 服务器进行验证用户的信息 服务器通过验证发送给用户一 ...
- jQuery的ajax跨域 Jsonp原理
1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...
- 【JS】AJAX跨域-JSONP解决方案(一)
AJAX跨域介绍 AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面 由于安全方面的原因, 客户端js使用xmlhttprequest只能用来向来源网站发送请求 ...
- AJAX跨域POST发送json时,会先发送一个OPTIONS预请求
我们会发现,在很多post,put,delete等请求之前,会有一次options请求. 根本原因就是,W3C规范这样要求了!在跨域请求中,分为简单请求(get和部分post,post时content ...
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 function BuildS ...
- jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。
从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...
随机推荐
- 转载:轻量级浏览器特性检测库:feature.js
feature.js是一个很简单.快速和轻量级的浏览器特性检测库,它没有任何依赖,体积压缩最后只有1KB,它可以自动初始化,在你需要知道某个特性是否可用时,直接引入即可.以下中文为个人理解. /*! ...
- spring重点一:处理对象创建时间 个数以及方式
/** * 1) 对象创建: 单例/多例(个数) * scope="singleton", 默认值, 即 默认是单例 [service/dao/工具类] * scope=&quo ...
- jQuery元素属性操作
在jQuery中,用attr()方法来获取或者设置元素属性,removeAttr()方法用来删除元素属性. attr() 实例: var $para=$('p');//获取<p>节点 va ...
- [Papers] Semantic Segmentation Papers(1)
目录 FCN Abstract Introduction Related Work FCN Adapting classifiers for dense prediction Shift-and-st ...
- Java工具类使用注意事项
(以下摘自阿里巴巴Java开发手册) 1. [强制]获取单例对象需要保证线程安全,其中的方法也要保证线程安全. 说明:资源驱动类.工具类.单例工厂类都需要注意. 5. [强制]SimpleDateFo ...
- 告诉你 SQL 数据库与 NoSQL 数据库的区别
简单来说 SQL 数据库和 NoSQL 数据库有着共同的目标:存储数据,但存储的方式不同 一. 表 SQL中的表结构具有严格的数据模式约束: 存储数据很难出错. NoSQL存储数据更加灵活自由:可能导 ...
- SGU 185 Two shortest
Two shortest Time Limit: 500ms Memory Limit: 4096KB This problem will be judged on SGU. Original ID: ...
- 洛谷 1144 最短路计数 bfs
洛谷1144 最短路计数 传送门 其实这道题目的正解应该是spfa里面加一些处理,,然而,,然而,,既然它是无权图,,那么就直接bfs了,用一个cnt记录一下每一个点的方案数,分几种情况讨论一下转移, ...
- Codeforces Round #168 (Div. 2)---A. Lights Out
Lights Out time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
- Python标准库:内置函数callable(object)
假设对象object參数是能够调用的对象,就返回True.否则返回False.只是要注意的是,当一个对象是能够调用的.并不表示调用该对象时运行一定成功,但不可调用的对象去调用时一定不会成功.假设类对象 ...