<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String params = request.getParameter("params"); String callback = request.getParameter("callback"); // 经过该接口一系列操作，然后得到data，将data返回给调用者 String data = "{'result':'"+params+"'}"; out.println(callback + "("+data+")"); %>
代码很简单，也就是传递一个回调函数的参数名，然后经过该接口一系列操作，将返回数据，塞到回调函数里面，调用端的函数就得到了该接口的数据，也就是类似于ajax中succsss：function(data)，然后处理data一样，这里的success回调函数，相当于上面的getResult函数。当然你也可以写的优雅一点，比如：
function CreateScript(src) { $("<script><//script>").attr("src", src).appendTo("body") } function jsonp_fun(){ CreateScript("http://localhost:8888/other/other.jsp?params=fromjsonp&callback=getResult") }
4、Jquery的JSONP
至此跨域请求的原理已经讲清楚了，但是仍然还有一个问题，总觉得这样用有点怪是不是，如果用jquery的话，调用就很简单了，其实jquery底层实现也是拼了一个script，然后指定src这种方式，跟上面讲的一样，只是jquery封装了一下，显得更加优雅，跟ajax调用方式差不多，所以容易记，代码如下：
<script type="text/javascript"> function getResult(data){ alert("through jsonp,receive data from other domain : "+data.result); } function jsonp_fun(){ $.ajax({ url:'http://localhost:8888/other/other.jsp', type:'post', data:{'params':'fromjsonp'}, dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"getResult",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以不写这个参数，jQuery会自动为你处理数据 success: function(data){ }, error: function(){ alert('fail'); } }); } </script> <body> <input type="button" value="jsonp"/> </body>
这里的jsonCallback，回调函数设置为getResult，那么返回后会先调用getResult函数中的代码，再调用success函数中的代码，一般情况下，不用定义getResult函数，同样jsonCallback不需要设置，那么就只执行success中的代码，也就跟平时的ajax一样用啦。
所以实际工作用法如下：
function jsonp_fun(){ $.ajax({ url:'http://localhost:8888/other/other.jsp', type:'post', data:{'params':'fromjsonp'}, dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) success: function(data){ alert("through jsonp,receive data from other domain : "+data.result); }, error: function(){ alert('fail'); } }); } <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String params = request.getParameter("params"); String callback = request.getParameter("callback"); // 经过该接口一系列操作，然后得到data，将data返回给调用者 String data = "{\"result\":\""+params+"\"}"; out.println(callback + "("+data+")"); %>
这里没有指定jsonpCallback，实际上jquery底层拼装了一个函数名，当然生成函数规则就没研究了。
补充：
1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。
4、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。