JSONP的例子

壹頁書發表於2013-12-03
JSON
    JSONP技術可以解決AJAX跨域請求的問題。
    主要是使用script標籤，請求一段JS指令碼執行。

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"\">
  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.     }

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

  12. }
請求返回的結果會直接以JS指令碼執行。
需要注意的是，JSONP只以Get方式請求，請求的結果也可能被瀏覽器快取。
JQuery可以簡化這個流程。

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"\">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <script type="text/javascript"
  6.     src=""></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.     }

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

  13. }
jsoncallback會自動生成一個隨機名稱，這個名稱就是回撥函式的名稱。
因為是隨機生成的，所以避免了瀏覽器快取資料。

從伺服器返回的結果
jQuery203022411514748819172_1386078136124('你好')

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

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/29254281/viewspace-1062082/，如需轉載，請註明出處，否則將追究法律責任。

相關文章