java：jsonp前后端实例演示

来源：互联网发布：vero moda淘宝旗舰店编辑：程序博客网时间：2024/05/21 22:32

1.后端用servlet，放在tomcat中启动。

jsonpServlet.java:

package test;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;//@WebServlet("/jsonpServlet")public class jsonpServlet extends HttpServlet {private static final long serialVersionUID = 1L;           public jsonpServlet() {        super();    }protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//response.getWriter().append("Served at: ").append(request.getContextPath());String callback = (String)request.getParameter("callback");  String jsonData = "{\"id\":\"3\", \"name\":\"zhangsan\", \"telephone\":\"13612345678\"}";//为了演示效果，json数据是写死的  String retStr = callback + "(" + jsonData + ")"; response.getWriter().append(retStr);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}

2.前端测试页面testjsonp.html：

<!doctype html><html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>测试页面</title>  <script type="text/javascript" src="jquery.js"></script> </head> <body><input type="button" value="点我测试本地" onclick="r()" /> <script>var tt=null;function r(){rds();console.log("第1次tt："+tt);d();console.log("第2次tt："+tt);}function rds(){var url="http://localhost:8080/demoProj/jsonpServlet";$.ajax({url: url,                              type:'get',dataType:'jsonp',async: false,jsonp:'callback',jsonpCallback:"cb",data:"",success:function(rs) {tt=rs;console.log("我是rds()里面的tt:"+tt);console.log("我是rds的方法："+rs);}});}function d(){tt="ddfdd";}function cb(r){  tt=r;console.log("我是rds()里面的tt:"+tt);        console.log("我是cb方法！ "+r);       }</script> </body></html>

3.调试过程：

4.结果：

5.解析：

（1）为了测试jsonp，在servlet写了个小例子，发布到tomcat启动，就可以用ajax请求url测试后端接口，不需要搭建spring web项目，只需在web.xml里配置一下servlet和servlet-mapping，简单快捷，这个值得借鉴。

（2）后端Servlet的doGet()方法只能无返回值（void），别急，幸好这时就可以用response.getWriter().append(str);将后端数据返回给前端。

（3）如果前端定义的回调函数名cb，后端也用这个名+括号包裹参数：cb(result)，返回给前端，前端页面定义的cb函数就能获取到后端return给他的值result。

（4）执行顺序是：console.log("第1次tt："+tt);——d()——console.log("第2次tt："+tt);——rds()的success——cb()

（5）在rds()和回调函数cb()中两次对全局变量tt赋值都没用成功，控制台显示tt结果还是初始化的值null。其实不是赋值不成功了，赋值其实是成功了，控制台打印的就是tt的初始化值而不是赋值后的值。因为在ajax向后端接口发送请求的时候，console.log("第1次tt："+tt)和console.log("第2次tt："+tt)依次执行了还没等tt被赋值，也就是几乎和rds()同时ajax中的success还没没tt赋值之前就执行，这就是ajax的异步特性，但是

在ajax中配置了async: false即同步了，那也不管用,也改不了ajax的异步特性。

注：

async

类型：Boolean

默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

也就是async只影响用户其他操作对tt值的影响，但不影响浏览器对js解释性运行的特性的认定，也不影响浏览器对js中的ajax异步特性的认定。此规定就是让ajax动态改变布局页面时，锁死浏览器禁止用户的其他操作再次对此局部页面产生影响，此规定不会影响浏览器内部已经解释性运行着js。

但是没有ajax异步请求的d()能顺利赋值成功且几乎同时执行，就证明了rds()中ajax的这一步特性和异步回调cb()也是异步的。

这就解决了跨域问题的同时也解决了前端报错：

Uncaught SyntaxError: Unexpected token :

这个错就是在说后端返回的数据格式不对，后端返回的直接是json格式数据，遇到了冒号救护报错，不是cb(result)格式的。所以这时就要改后端代码，用前端传过来的回调函数名+括号包裹数据，再返回给前端。

阅读全文

0 0