[jQuery] jsonp跨域請求
以下內容來源：https://www.cnblogs.com/chiangchou/p/jsonp.html，本文只做記錄。
jQuery jsonp跨域請求
跨域的安全限制都是對瀏覽器端來說的，伺服器端是不存在跨域安全限制的。
瀏覽器的同源策略限制從一個源載入的文件或指令碼與來自另一個源的資源進行互動。
如果協議，埠和主機對於兩個頁面是相同的，則兩個頁面具有相同的源，否則就是不同源的。
如果要在js裡發起跨域請求，則要進行一些特殊處理了。或者，你可以把請求發到自己的服務端，再通過後臺程式碼發起請求，再將資料返回前端。
這裡講下使用jquery的jsonp如何發起跨域請求及其原理。
先看下準備環境：兩個埠不一樣，構成跨域請求的條件。
獲取資料：獲取資料的埠為9090
請求資料：請求資料的埠為8080
1、先看下直接發起ajax請求會怎麼樣
下面是發起請求端的程式碼：
1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %> 2 <html> 3 <head> 4 <title>跨域測試</title> 5 <script src="js/jquery-1.7.2.js"></script> 6 <script> 7 $(document).ready(function () { 8 9 $("#btn").click(function () { 10 $.ajax({ 11 url: 'http://localhost:9090/student', 12 type: 'GET', 13 success: function (data) { 14 $(text).val(data); 15 } 16 }); 17 18 }); 19 20 }); 21 </script> 22 </head> 23 <body> 24 <input id="btn" type="button" value="跨域獲取資料" /> 25 <textarea id="text" style="width: 400px; height: 100px;"></textarea> 26 </body> 27 </html>
請求的結果如下圖：可以看到跨域請求因為瀏覽器的同源策略被攔截了。
2、接下來看如何發起跨域請求。解決跨域請求的方式有很多，這裡只說一下jquery的jsop方式及其原理。
首先我們需要明白，在頁面上直接發起一個跨域的ajax請求是不可以的，但是，在頁面上引入不同域上的js指令碼卻是可以的，就像你可以在自己的頁面上使用<img src=""> 標籤來隨意顯示某個域上的圖片一樣。
比如我在8080埠的頁面上請求一個9090埠的圖片：可以看到直接通過src跨域請求是可以的。
3、那麼看下如何使用<script src="">來完成一個跨域請求：
當點選"跨域獲取資料"的按鈕時，新增一個<script>標籤，用於發起跨域請求；注意看請求地址後面帶了一個callback=showData的引數；
showData即是回撥函式名稱，傳到後臺，用於包裹資料。資料返回到前端後，就是showData(result)的形式，因為是script指令碼，所以自動呼叫showData函式，而result就是showData的引數。
至此，我們算是跨域把資料請求回來了，但是比較麻煩，需要自己寫指令碼發起請求，然後寫個回撥函式處理資料，不是很方便。
1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>跨域測試</title>
5 <script src="js/jquery-1.7.2.js"></script>
6 <script>
7 //回撥函式
8 function showData (result) {
9 var data = JSON.stringify(result); //json物件轉成字串
10 $("#text").val(data);
11 }
12
13 $(document).ready(function () {
14
15 $("#btn").click(function () {
16 //向頭部輸入一個指令碼，該指令碼發起一個跨域請求
17 $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
18 });
19
20 });
21 </script>
22 </head>
23 <body>
24 <input id="btn" type="button" value="跨域獲取資料" />
25 <textarea id="text" style="width: 400px; height: 100px;"></textarea>
26
27 </body>
28 </html>
服務端：
1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
2 response.setCharacterEncoding("UTF-8");
3 response.setContentType("text/html;charset=UTF-8");
4
5 //資料
6 List<Student> studentList = getStudentList();
7
8
9 JSONArray jsonArray = JSONArray.fromObject(studentList);
10 String result = jsonArray.toString();
11
12 //前端傳過來的回撥函式名稱
13 String callback = request.getParameter("callback");
14 //用回撥函式名稱包裹返回資料，這樣，返回資料就作為回撥函式的引數傳回去了
15 result = callback + "(" + result + ")";
16
17 response.getWriter().write(result);
18 }
結果：
4、再來看jquery的jsonp方式跨域請求：
服務端程式碼不變，js程式碼如下：最簡單的方式，只需配置一個dataType:'jsonp'，就可以發起一個跨域請求。jsonp指定伺服器返回的資料型別為jsonp格式，可以看發起的請求路徑，自動帶了一個callback=xxx，xxx是jquery隨機生成的一個回撥函式名稱。
這裡的success就跟上面的showData一樣，如果有success函式則預設success()作為回撥函式。
1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>跨域測試</title>
5 <script src="js/jquery-1.7.2.js"></script>
6 <script>
7
8 $(document).ready(function () {
9
10 $("#btn").click(function () {
11
12 $.ajax({
13 url: "http://localhost:9090/student",
14 type: "GET",
15 dataType: "jsonp", //指定伺服器返回的資料型別
16 success: function (data) {
17 var result = JSON.stringify(data); //json物件轉成字串
18 $("#text").val(result);
19 }
20 });
21
22 });
23
24 });
25 </script>
26 </head>
27 <body>
28 <input id="btn" type="button" value="跨域獲取資料" />
29 <textarea id="text" style="width: 400px; height: 100px;"></textarea>
30
31 </body>
32 </html>
效果：
再看看如何指定特定的回撥函式：第30行程式碼
回撥函式你可以寫到<script>下(預設屬於window物件)，或者指明寫到window物件裡，看jquery原始碼，可以看到jsonp呼叫回撥函式時，是呼叫的window.callback。
然後看呼叫結果，發現，請求時帶的引數是：callback=showData；呼叫回撥函式的時候，先呼叫了指定的showData，然後再呼叫了success。所以，success是返回成功後必定會呼叫的函式，就看你怎麼寫了。
1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>跨域測試</title>
5 <script src="js/jquery-1.7.2.js"></script>
6 <script>
7
8 function showData (data) {
9 console.info("呼叫showData");
10
11 var result = JSON.stringify(data);
12 $("#text").val(result);
13 }
14
15 $(document).ready(function () {
16
17 // window.showData = function (data) {
18 // console.info("呼叫showData");
19 //
20 // var result = JSON.stringify(data);
21 // $("#text").val(result);
22 // }
23
24 $("#btn").click(function () {
25
26 $.ajax({
27 url: "http://localhost:9090/student",
28 type: "GET",
29 dataType: "jsonp", //指定伺服器返回的資料型別
30 jsonpCallback: "showData", //指定回撥函式名稱
31 success: function (data) {
32 console.info("呼叫success");
33 }
34 });
35 });
36
37 });
38 </script>
39 </head>
40 <body>
41 <input id="btn" type="button" value="跨域獲取資料" />
42 <textarea id="text" style="width: 400px; height: 100px;"></textarea>
43
44 </body>
45 </html>
效果圖：
再看看如何改變callback這個名稱：第23行程式碼
指定callback這個名稱後，後臺也需要跟著更改。
1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>跨域測試</title>
5 <script src="js/jquery-1.7.2.js"></script>
6 <script>
7
8 function showData (data) {
9 console.info("呼叫showData");
10
11 var result = JSON.stringify(data);
12 $("#text").val(result);
13 }
14
15 $(document).ready(function () {
16
17 $("#btn").click(function () {
18
19 $.ajax({
20 url: "http://localhost:9090/student",
21 type: "GET",
22 dataType: "jsonp", //指定伺服器返回的資料型別
23 jsonp: "theFunction", //指定引數名稱
24 jsonpCallback: "showData", //指定回撥函式名稱
25 success: function (data) {
26 console.info("呼叫success");
27 }
28 });
29 });
30
31 });
32 </script>
33 </head>
34 <body>
35 <input id="btn" type="button" value="跨域獲取資料" />
36 <textarea id="text" style="width: 400px; height: 100px;"></textarea>
37
38 </body>
39 </html>
後臺程式碼：
1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
2 response.setCharacterEncoding("UTF-8");
3 response.setContentType("text/html;charset=UTF-8");
4
5 //資料
6 List<Student> studentList = getStudentList();
7
8
9 JSONArray jsonArray = JSONArray.fromObject(studentList);
10 String result = jsonArray.toString();
11
12 //前端傳過來的回撥函式名稱
13 String callback = request.getParameter("theFunction");
14 //用回撥函式名稱包裹返回資料，這樣，返回資料就作為回撥函式的引數傳回去了
15 result = callback + "(" + result + ")";
16
17 response.getWriter().write(result);
18 }
效果圖：
最後看看jsonp是否支援POST方式：ajax請求指定POST方式
可以看到，jsonp方式不支援POST方式跨域請求，就算指定成POST方式，會自動轉為GET方式；而後端如果設定成POST方式了，那就請求不了了。
jsonp的實現方式其實就是<script>指令碼請求地址的方式一樣，只是ajax的jsonp對其做了封裝，所以可想而知，jsonp是不支援POST方式的。
1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>跨域測試</title>
5 <script src="js/jquery-1.7.2.js"></script>
6 <script>
7
8 $(document).ready(function () {
9
10 $("#btn").click(function () {
11
12 $.ajax({
13 url: "http://localhost:9090/student",
14 type: "POST", //post請求方式
15 dataType: "jsonp",
16 jsonp: "callback",
17 success: function (data) {
18 var result = JSON.stringify(data);
19 $("#text").val(result);
20 }
21 });
22 });
23
24 });
25 </script>
26 </head>
27 <body>
28 <input id="btn" type="button" value="跨域獲取資料" />
29 <textarea id="text" style="width: 400px; height: 100px;"></textarea>
30 </body>
31 </html>
效果圖：
再補充一點，回到第一條：CORS頭缺少“Access-Control-Allow-Origin”。
有時候你會發現其它都沒問題，出現這個錯誤：這個錯誤代表服務端拒絕跨域訪問。如果出現這個錯誤，就需要在服務端設定允許跨域請求。
response.setHeader("Access-Control-Allow-Origin", "*"); 設定允許任何域名跨域訪問
設定可以跨域訪問：第6行程式碼或第8行程式碼，設定其中一個即可。
1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
2 response.setCharacterEncoding("UTF-8");
3 response.setContentType("text/html;charset=UTF-8");
4
5 // * 表示允許任何域名跨域訪問
6 response.setHeader("Access-Control-Allow-Origin", "*");
7 // 指定特定域名可以訪問
8 response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");
9
10 //資料
11 List<Student> studentList = getStudentList();
12
13 JSONArray jsonArray = JSONArray.fromObject(studentList);
14 String result = jsonArray.toString();
15
16 //前端傳過來的回撥函式名稱
17 String callback = request.getParameter("callback");
18 //用回撥函式名稱包裹返回資料，這樣，返回資料就作為回撥函式的引數傳回去了
19 result = callback + "(" + result + ")";
20
21 response.getWriter().write(result);
22 }
總結：jQuery ajax方式以jsonp型別發起跨域請求，其原理跟<script>指令碼請求一樣，因此使用jsonp時也只能使用GET方式發起跨域請求。跨域請求需要服務端配合，設定callback，才能完成跨域請求。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
作者：bojiangzhou
出處：http://www.cnblogs.com/chiangchou/
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。