AJAX 跨域请求 - JSONP获取JSON数据 - Just Code

天梯梦

浏览: 13747469 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

AJAX 跨域请求 - JSONP获取JSON数据

博客分类：

Javascript /Jquery / Bootstrap / Web

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 服务，了解它能造成的威胁非常重要。

关联：

征服 Ajax 应用程序的安全威胁

防止伪造跨站请求

分享到：

征服 Ajax 应用程序的安全威胁 | Objective-C中的一些特殊的数据类及NSLog ...

2012-01-20 23:00
浏览 517500
评论(23)
分类:编程语言
查看更多

23 楼天梯梦 2015-06-23

niunan 写道

终于学会啦。。感谢LZ。。。。

不客气！

22 楼 niunan 2015-06-21

终于学会啦。。感谢LZ。。。。

21 楼天梯梦 2015-06-02

107x 写道

不错，谢谢！

有帮助就好！

20 楼 107x 2015-06-01

不错，谢谢！

19 楼天梯梦 2015-02-04

Ripin_Yan 写道

呵呵，没事。stackoverflow的我看了，都没有成功解决http访问https的，有回复说针对火狐浏览器的那个，试了也不行，有成功访问的，但是是添加证书了的，关于php的我就不清楚了，不会这个。还是弄个HttpsUtil去访问https了

会php的话，这个就非常容易了。。。加油！

18 楼 Ripin_Yan 2015-02-02

天梯梦写道

Ripin_Yan 写道

	
		$("input[lang='jsonp']").click(function(){

			var url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx59df2ba56720ee7d&secret=7a2790cf4235ca07ba40a8516047296c&jsoncallback=?";
			$.getJSON(url,function(data){
		         
		         console.info("weixin:"+data);

		    });
			
		});

hi, 这两天太忙，没有来得及回复，不好意思。你的问题的确是因为https安全引起的，我们正在使用的是jquery，当你从http获取https加密网站的数据时候，jquery默认会认为是不安全的，所以程序根本就得不到返回值，那就更谈不上打印出来了。我觉得比较简单的方法如下（如果你是一个phper的话）：

	$(function(){
	 	//$("input[lang='jsonp']").click(function(){  
  			
  			/*
        	var url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx59df2ba56720ee7d&secret=7a2790cf4235ca07ba40a8516047296c&callback=?";  
        	
        	alert(url);
        	
        	$.getJSON(url,function(data){ alert(data);
		        //for(var i in data) alert(i+":"+data[i]);
        	});  
        	*/
    	//});  
    	
    	var data = JSON.parse('<?php echo file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx59df2ba56720ee7d&secret=7a2790cf4235ca07ba40a8516047296c&callback=?') ?>');
    	
    	for(var i in data) alert(i+":"+data[i]);
	})

参考网站（如果没有被屏蔽的话）：http://stackoverflow.com/questions/14133484/jsonp-request-fails-when-https-is-used-instead-of-http

17 楼天梯梦 2015-01-31

Ripin_Yan 写道

	
		$("input[lang='jsonp']").click(function(){

			var url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx59df2ba56720ee7d&secret=7a2790cf4235ca07ba40a8516047296c&jsoncallback=?";
			$.getJSON(url,function(data){
		         
		         console.info("weixin:"+data);

		    });
			
		});

	$(function(){
	 	//$("input[lang='jsonp']").click(function(){  
  			
  			/*
        	var url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx59df2ba56720ee7d&secret=7a2790cf4235ca07ba40a8516047296c&callback=?";  
        	
        	alert(url);
        	
        	$.getJSON(url,function(data){ alert(data);
		        //for(var i in data) alert(i+":"+data[i]);
        	});  
        	*/
    	//});  
    	
    	var data = JSON.parse('<?php echo file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx59df2ba56720ee7d&secret=7a2790cf4235ca07ba40a8516047296c&callback=?') ?>');
    	
    	for(var i in data) alert(i+":"+data[i]);
	})

参考网站（如果没有被屏蔽的话）：http://stackoverflow.com/questions/14133484/jsonp-request-fails-when-https-is-used-instead-of-http

16 楼 Ripin_Yan 2015-01-29

JSON：JavaScript 对象表示法（JavaScript Object Notation）。其实JSON也算是对象了。至于你的问题，能不能给我你的https地址，以及代码，我调试一下。

嗯，这么早就开始看论坛了啊。

	
		$("input[lang='jsonp']").click(function(){

			var url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx59df2ba56720ee7d&secret=7a2790cf4235ca07ba40a8516047296c&jsoncallback=?";
			$.getJSON(url,function(data){
		         
		         console.info("weixin:"+data);

		    });
			
		});

15 楼天梯梦 2015-01-29

引用

看完你那篇文章，感觉不是很理解，用confole.info(result);结果是：[object Object]，这些不懂的就不去想了，反正理解一点，json不能脱离string，就是一串字符串，只不过元素会使用特定的符号标注。
回到我这个问题的开始，能正确拿到返回的数据，就是会出现SyntaxError: missing ; before statement的错误，试了IE也是如此，问题的本质是不是因为我的url跨了协议，不能是https的url

JSON：JavaScript 对象表示法（JavaScript Object Notation）。其实JSON也算是对象了。至于你的问题，能不能给我你的https地址，以及代码，我调试一下。

14 楼 Ripin_Yan 2015-01-28

天梯梦写道

Ripin_Yan 写道

天梯梦写道

Ripin_Yan 写道

这个测试也可以，我对比了一下，发现你这个代码返回的就是字符串格式，我跨域访问的微信服务器返回的是json格式的数据，难道是不能返回json格式的？不应该啊

{"access_token":"BQ7FC0Ja1U152b3kNcH14bs2gDqN4awoVZbAYR7aDRcLMxqU8diroUIPK0eG_Ej0MangnpKm7Dp4MnZkcynD5r_1dzlIyT6R78e0abo1LoQ","expires_in":7200}
---------------------------------------------------------------------
jQuery183005031723691165679_1422004244273({"a":1,"b":2,"c":3,"d":4,"e":5})

我觉得你还是没有明白什么json，没有所谓的字符串格式，而所谓的json格式就是字符串组成的。

好吧，我表达的有问题，我的意思是返回的字符串符不符合json规则，从返回值上看我这个{"access_token":"BQ7FC0Ja1U152b3kNcH14bs2gDqN4awoVZbAYR7aDRcLMxqU8diroUIPK0eG_Ej0MangnpKm7Dp4MnZkcynD5r_1dzlIyT6R78e0abo1LoQ","expires_in":7200}就是有效的json数据，你这个jQuery183005031723691165679_1422004244273({"a":1,"b":2,"c":3,"d":4,"e":5})就不是，但是奇怪的是你这个字符串也能被javascript解析，可以直接alert(result.c);得到值3

我想说的有三点：

第一：跨域名获取网页内容时，返回的内容无论是什么，整个内容都将视为字符串的属性，因为返回时候，不会验证内容，而是一概视为字符串。
第二：参考另一篇文章http://justcoding.iteye.com/blog/2180289，在字符串里，JSON才是JSON
第三：我返回的 jQuery183005031723691165679_1422004244273({"a":1,"b":2,"c":3,"d":4,"e":5}) 你就当做是 {"a":1,"b":2,"c":3,"d":4,"e":5} 就可以了，我想jQuery183005031723691165679_1422004244273()应该是跟jquery有关的。

不知道这么解释，是不是和你的问题对口...

13 楼天梯梦 2015-01-27

Ripin_Yan 写道

天梯梦写道

Ripin_Yan 写道

{"access_token":"BQ7FC0Ja1U152b3kNcH14bs2gDqN4awoVZbAYR7aDRcLMxqU8diroUIPK0eG_Ej0MangnpKm7Dp4MnZkcynD5r_1dzlIyT6R78e0abo1LoQ","expires_in":7200}
---------------------------------------------------------------------
jQuery183005031723691165679_1422004244273({"a":1,"b":2,"c":3,"d":4,"e":5})

我觉得你还是没有明白什么json，没有所谓的字符串格式，而所谓的json格式就是字符串组成的。

12 楼 Ripin_Yan 2015-01-26

天梯梦写道

Ripin_Yan 写道

{"access_token":"BQ7FC0Ja1U152b3kNcH14bs2gDqN4awoVZbAYR7aDRcLMxqU8diroUIPK0eG_Ej0MangnpKm7Dp4MnZkcynD5r_1dzlIyT6R78e0abo1LoQ","expires_in":7200}
---------------------------------------------------------------------
jQuery183005031723691165679_1422004244273({"a":1,"b":2,"c":3,"d":4,"e":5})

我觉得你还是没有明白什么json，没有所谓的字符串格式，而所谓的json格式就是字符串组成的。

11 楼天梯梦 2015-01-24

Ripin_Yan 写道

{"access_token":"BQ7FC0Ja1U152b3kNcH14bs2gDqN4awoVZbAYR7aDRcLMxqU8diroUIPK0eG_Ej0MangnpKm7Dp4MnZkcynD5r_1dzlIyT6R78e0abo1LoQ","expires_in":7200}
---------------------------------------------------------------------
jQuery183005031723691165679_1422004244273({"a":1,"b":2,"c":3,"d":4,"e":5})

我觉得你还是没有明白什么json，没有所谓的字符串格式，而所谓的json格式就是字符串组成的。

10 楼 Ripin_Yan 2015-01-23

天梯梦写道

Ripin_Yan 写道

不知博主在使用
$.getJSON(url,function(json){
alert("abc");
});
是否用火狐测过，始终报错SyntaxError: missing ; before statement

{"access_token":"G0ygr95aKC7mpRSj0todNxf1Gia8IFXroqTytb6JOb83w9nZfKgNAQJT9f

，网上看到有php的解决方案： echo "{$_GET['jsoncallback']}({$b})";
但是jsp上却不知道怎么解决。

你可以在本地运行一下如下代码：

<script type="text/javascript" src="http://sources.ikeepstudying.com/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	$.getJSON("http://test.ikeepstudying.com/json.php?callback=?",
	function(result) {
		for(var i in result) {
			alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
		}
	});
</script>

我的火狐通过测试

{"access_token":"BQ7FC0Ja1U152b3kNcH14bs2gDqN4awoVZbAYR7aDRcLMxqU8diroUIPK0eG_Ej0MangnpKm7Dp4MnZkcynD5r_1dzlIyT6R78e0abo1LoQ","expires_in":7200}
---------------------------------------------------------------------
jQuery183005031723691165679_1422004244273({"a":1,"b":2,"c":3,"d":4,"e":5})

9 楼天梯梦 2015-01-22

Ripin_Yan 写道

你可以在本地运行一下如下代码：

<script type="text/javascript" src="http://sources.ikeepstudying.com/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	$.getJSON("http://test.ikeepstudying.com/json.php?callback=?",
	function(result) {
		for(var i in result) {
			alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
		}
	});
</script>

我的火狐通过测试

8 楼 Ripin_Yan 2015-01-19

7 楼天梯梦 2014-02-18

simpleDean 写道

hi，请教一下，服务端是个单纯的json数据的api，该如何操作呢。我按照你的方法写客户端html，发现取不到数据返回后不会调用callback函数，不知道数据去哪里了。

你可以打开firebug之后，再进行调试，看看有什么报错。

6 楼 simpleDean 2014-02-17

5 楼 meigong568 2013-09-29

推荐看一下，这篇方法也不错
http://www.biuman.com/2013/01/jsonp-example-html/

4 楼天梯梦 2013-03-07

wangpenghua 写道

请问如何跨域提交xlm格式的数据到服务器？

简单的方法就是通过curl获取页面内容，然后再解析xml，最后上传到数据库。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

AJAX 跨域请求 - JSONP获取JSON数据

征服 Ajax 应用程序的安全威胁

防止伪造跨站请求

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

AJAX 跨域请求 - JSONP获取JSON数据

征服 Ajax 应用程序的安全威胁

防止伪造跨站请求

评论

发表评论

相关推荐

使用jQuery和Pure.CSS创建一个可编辑的表格

2016十大优秀jQuery插件推荐

jQuery .tmpl() 用法

jQuery：从零开始，DIY一个jQuery（2）

jQuery：从零开始，DIY一个jQuery（1）

Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar

jQuery: 操作select option方法集合

jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()

jQuery: 选择器(DOM,name,属性,元素)

jQuery: 合并表格中相同文本的相邻单元格

Bootstrap 3: 使用注意box-sizing细节及解决方法

域名详解

Bootstrap 3: 图标转换事件 Change icons when toggle

Bootstrap 3: 图标转换事件 Change icons when toggle

jQuery：无限循环两个或者多个事件 click / toggle between two functions

javascript 中面向对象实现 如何继承

javascript 中的面向对象实现 如何封装

AngularJS jQuery 共存法则

七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX

七步从Angular.JS菜鸟到专家（2）：Scopes

最近访客更多访客>>

javascript 中面向对象实现如何继承

javascript 中的面向对象实现如何封装