JSONP

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指定的方法。

评论

5 楼 antlove 2013-08-08  

lijiejava 写道

antlove 写道

lijiejava 写道

这片博客写得很不错，首先，我觉得对成龙这个角色的处理就非常好。完全打破了之前成龙对周星驰言听计从的风格。周星驰也不像以前总是跟李连杰叽叽歪歪，不务正业。包括严守一大战许三多的那场戏也拍的非常到位。完全颠覆了许三多在我们心目中高大威猛的形象。并且严守一也并不是按原著里说的从一开始就对鲁西西产生了好感。而是在经历了武则天的移情别恋后才和她擦出的火花。这样剧情的逻辑性就变的非常的顺畅。让观众有耳目一新的感觉。故事的情节也是丝丝入扣，引人入胜。比如，段誉为什么不顾自己亲身母亲的危险去救海尔兄弟？天线xx到底有没有对希曼实施报复计划？二营长老婆的肚子到底是谁搞大的？这些问题都紧紧的锁住了观众的眼球

大哥，你想说什么？

写得不错！

4 楼 lijiejava 2013-08-08  

antlove 写道

lijiejava 写道

这片博客写得很不错，首先，我觉得对成龙这个角色的处理就非常好。完全打破了之前成龙对周星驰言听计从的风格。周星驰也不像以前总是跟李连杰叽叽歪歪，不务正业。包括严守一大战许三多的那场戏也拍的非常到位。完全颠覆了许三多在我们心目中高大威猛的形象。并且严守一也并不是按原著里说的从一开始就对鲁西西产生了好感。而是在经历了武则天的移情别恋后才和她擦出的火花。这样剧情的逻辑性就变的非常的顺畅。让观众有耳目一新的感觉。故事的情节也是丝丝入扣，引人入胜。比如，段誉为什么不顾自己亲身母亲的危险去救海尔兄弟？天线xx到底有没有对希曼实施报复计划？二营长老婆的肚子到底是谁搞大的？这些问题都紧紧的锁住了观众的眼球

大哥，你想说什么？

写得不错！

3 楼 antlove 2013-08-08  

lijiejava 写道

这片博客写得很不错，首先，我觉得对成龙这个角色的处理就非常好。完全打破了之前成龙对周星驰言听计从的风格。周星驰也不像以前总是跟李连杰叽叽歪歪，不务正业。包括严守一大战许三多的那场戏也拍的非常到位。完全颠覆了许三多在我们心目中高大威猛的形象。并且严守一也并不是按原著里说的从一开始就对鲁西西产生了好感。而是在经历了武则天的移情别恋后才和她擦出的火花。这样剧情的逻辑性就变的非常的顺畅。让观众有耳目一新的感觉。故事的情节也是丝丝入扣，引人入胜。比如，段誉为什么不顾自己亲身母亲的危险去救海尔兄弟？天线xx到底有没有对希曼实施报复计划？二营长老婆的肚子到底是谁搞大的？这些问题都紧紧的锁住了观众的眼球

大哥，你想说什么？

2 楼 lijiejava 2013-08-08  

这片博客写得很不错，首先，我觉得对成龙这个角色的处理就非常好。完全打破了之前成龙对周星驰言听计从的风格。周星驰也不像以前总是跟李连杰叽叽歪歪，不务正业。包括严守一大战许三多的那场戏也拍的非常到位。完全颠覆了许三多在我们心目中高大威猛的形象。并且严守一也并不是按原著里说的从一开始就对鲁西西产生了好感。而是在经历了武则天的移情别恋后才和她擦出的火花。这样剧情的逻辑性就变的非常的顺畅。让观众有耳目一新的感觉。故事的情节也是丝丝入扣，引人入胜。比如，段誉为什么不顾自己亲身母亲的危险去救海尔兄弟？天线xx到底有没有对希曼实施报复计划？二营长老婆的肚子到底是谁搞大的？这些问题都紧紧的锁住了观众的眼球

1 楼 lijiejava 2013-08-08  

好好好！！！