当前位置:首页 > 开发 > 编程语言 > Json > 正文

JSONP

发表于: 2013-07-31   作者:antlove   来源:转载   浏览次数:
摘要: AJAX请求是无法跨域的。如果要实现跨域访问【好比要访问外部站点的公共接口】,有以下2种方式 1.使用JSONP 2.使用代理,及在本项目后台远程访问外部接口。   一 JSONP实现原理。 Javascript由于出于安全考虑,通常无法实现跨域访问。可是有个例外: <script type="text/javascript" src="h

AJAX请求是无法跨域的。如果要实现跨域访问【好比要访问外部站点的公共接口】,有以下2种方式

1.使用JSONP

2.使用代理,及在本项目后台远程访问外部接口。

 

一 JSONP实现原理。

Javascript由于出于安全考虑,通常无法实现跨域访问。可是有个例外:

<script type="text/javascript" src="http://localhost:8888/RemoteServer/jsonp.js"></script>

通过script标签的可以访问外部js文件的。

假如jsonp.js的内容如下

callback({name:"hello world."});

而引入json.js的html文件中有如下js方法定义

function callback(data){
	alert(JSON.stringify(data));
}

 那么当加载完<script type="text/javascript" src="http://localhost:8888/RemoteServer/jsonp.js"></script>会立马执行callback方法【注:script引入必须在callback方法定义之后】。

再假如我们将以上的script标签改为如下:

<script type="text/javascript" src="http://localhost:8888/RemoteServer/RemoteRequetHandler?callback=callback"></script>

src 引入的是由后台servlet生成的内容,后台servlet代码如下:

		String callbackName=request.getParameter("callback");
		
		response.setContentType("text/javascript; charset=utf-8");
		response.setStatus(200);
		
		PrintWriter pw=response.getWriter();
		pw.write(callbackName+"({\"name\":\"remote call\"});");
		pw.close();

这样执行哪个方法由前台的callback参数指定,而传入这个要执行的方法的内容由后台决定【传入的内容是一个json对象,或者是一个普通的string并不重要】。这就是JSONP。

JSONP的原理就是利用了script标签可以加载外部js文件的特性。

 

jquery使用JSONP

$.ajax({
	url : "http://localhost:8888/RemoteServer/RemoteRequetHandler",
	cache : false,
	type : "GET",
	dataType:"jsonp",
	success : function(data) {
		alert(JSON.stringify(data));
	}
});

 当指定dataType为jsonp是,jquery会自动在url后边添加callback=?,当请求返回是会执行success指定的方法。

JSONP

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

推荐文章
1 jsonp
2 JSONP
3 jsonp
4 JSONP
5 jsonp
6 JSONP
7 JSONP
8 jsonp
9 jsonp
10 JSONP
11 jsonp
12 jsonp
13 jsonp
15 JSONP
16 jsonp
17 JSONP
18 JSONP
19 JSONP
20 jsonp
编辑推荐
1 jsonp
一、JavaScript 远程web Target.ashx public class Target : IHttpHandler { public void ProcessRe
function handleResponse(response) { alert("You’re at IP address " + response.ip + ", which i
3 jsonp
转自:http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html jsonp详解 json相信大家
1.起因 js脚本做ajax异步调用的时候,直接请求普通文件存在跨域无权限访问的问题,不管你是静态页面
Cache jQuery’s JSONP Calls <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.
今天公司开会刚好看到冯经理给我们演示的jq的时候,偶尔瞥到公司项目中也有用到jsonP技术来解决跨域
json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不
json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不
json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不
觉得有用转的,源地址: http://hi.baidu.com/l4yn3/item/0a2b8ed3734921362b35c7e0 JSONP即JSON wi
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号