JSONP原理与jQuery应用-优快云博客

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