ITPub博客

首页 > 应用开发 > Java > JSONP的例子

JSONP的例子

原创 Java 作者:壹頁書 时间:2013-12-03 21:47:24 0 删除 编辑
    JSONP技术可以解决AJAX跨域请求的问题。
    主要是使用script标签,请求一段JS脚本执行。

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <script type="text/javascript">
  6.     function callback(data)
  7.     {
  8.         alert(data);
  9.     }
  10. </script>
  11. </head>
  12. <body>
  13.     <script type="text/javascript" src="./InitServlet"></script>
  14. </body>
  15. </html>

  1. @WebServlet("/InitServlet")
  2. public class InitServlet extends HttpServlet {
  3.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  4.         doPost(request, response);
  5.     }

  6.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  7.         response.setCharacterEncoding("utf-8");
  8.         response.getWriter().print("callback('你好')");
  9.     }

  10. }
请求返回的结果会直接以JS脚本运行。
需要注意的是,JSONP只以Get方式请求,请求的结果也可能被浏览器缓存。
JQuery可以简化这个流程。

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <script type="text/javascript"
  6.     src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  7. <script type="text/javascript">
  8.     $(document).ready(function() {
  9.         $.getJSON("./InitServlet?jsoncallback=?", function(data) {
  10.             alert(data);
  11.         })
  12.     })
  13. </script>
  14. </head>
  15. <body>
  16. </body>
  17. </html>

  1. @WebServlet("/InitServlet")
  2. public class InitServlet extends HttpServlet {
  3.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  4.         doPost(request, response);
  5.     }

  6.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  7.         response.setCharacterEncoding("utf-8");
  8.         String callback = request.getParameter("jsoncallback");
  9.         response.getWriter().print(callback + "('你好')");
  10.     }

  11. }
jsoncallback会自动生成一个随机名称,这个名称就是回调函数的名称。
因为是随机生成的,所以避免了浏览器缓存数据。

从服务器返回的结果
jQuery203022411514748819172_1386078136124('你好')

参考:
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/29254281/viewspace-1062082/ ,如需转载,请注明出处,否则将追究法律责任。

上一篇: 单例模式
请登录后发表评论 登录
全部评论

注册时间:2013-10-19

  • 博文量
    620
  • 访问量
    6339837