1. 如何使用<script src="">來完成一個跨域請求：
當點擊"跨域獲取數據"的按鈕時，添加一個<script>標籤，用於發起跨域請求；注意看請求地址後面帶了一個callback=showData的參數；
showData即是回調函數名稱，傳到後臺，用於包裹數據。數據返回到前端後，就是showData(result)的形式，因爲是script腳本，所以自動調用showData函數，而result就是showData的參數。
至此，我們算是跨域把數據請求回來了，但是比較麻煩，需要自己寫腳本發起請求，然後寫個回調函數處理數據，不是很方便。
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>跨域測試</title> <script src="js/jquery-1.7.2.js"></script> <script> //回調函數 function showData (result) { var data = JSON.stringify(result); //json對象轉成字符串 $("#text").val(data); } $(document).ready(function () { $("#btn").click(function () { //向頭部輸入一個腳本，該腳本發起一個跨域請求 $("head").append("<script src='http://localhost:8081/rest/itemCat/list3?callback=showData'><\/script>"); }); }); </script> </head> <body> <input id="btn" type="button" value="跨域獲取數據" /> <textarea id="text" style="width: 400px; height: 100px;"></textarea> </body> </html>
服務端：
// 第二種實現方式 防止響應數據中文亂碼 @RequestMapping(value = "/itemCat/list3", produces = MediaType.APPLICATION_JSON_VALUE + ";charset=utf-8") @ResponseBody public Object getItemCatList3(String callback) { CatResult catResult = itemCatService.getItemCatList2(); // 把pojo轉化成字符串 String json = JsonUtils.objectToJson(catResult); // 拼裝返回值 String result = callback + "(" + json + ");"; return result; }
2. 再來看jquery的jsonp方式跨域請求：
服務端代碼不變，js代碼如下：最簡單的方式，只需配置一個dataType:'jsonp'，就可以發起一個跨域請求。jsonp指定服務器返回的數據類型爲jsonp格式，可以看發起的請求路徑，自動帶了一個callback=xxx，xxx是jquery隨機生成的一個回調函數名稱。
這裏的success就跟上面的showData一樣，如果有success函數則默認success()作爲回調函數。
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>跨域測試</title> <script src="js/jquery-1.7.2.js"></script> <script> $(document).ready(function () { $("#btn").click(function () { $.ajax({ url: "http://localhost:8081/rest/itemCat/list3", type: "GET", dataType: "jsonp", //指定服務器返回的數據類型 success: function (data) { var result = JSON.stringify(data); //json對象轉成字符串 $("#text").val(result); } }); }); }); </script> </head> <body> <input id="btn" type="button" value="跨域獲取數據" /> <textarea id="text" style="width: 400px; height: 100px;"></textarea> </body> </html>
3. 再看看如何指定特定的回調函數：第30行代碼
回調函數你可以寫到<script>下(默認屬於window對象)，或者指明寫到window對象裏，看jquery源碼，可以看到jsonp調用回調函數時，是調用的window.callback。
然後看調用結果，發現，請求時帶的參數是：callback=showData；調用回調函數的時候，先調用了指定的showData，然後再調用了success。所以，success是返回成功後必定會調用的函數，就看你怎麼寫了。
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>跨域測試</title> <script src="js/jquery-1.7.2.js"></script> <script> function showData (data) { console.info("調用showData"); var result = JSON.stringify(data); $("#text").val(result); } $(document).ready(function () { // window.showData = function (data) { // console.info("調用showData"); // // var result = JSON.stringify(data); // $("#text").val(result); // } $("#btn").click(function () { $.ajax({ url: "http://localhost:8081/rest/itemCat/list3", type: "GET", dataType: "jsonp", //指定服務器返回的數據類型 jsonpCallback: "showData", //指定回調函數名稱 success: function (data) { console.info("調用success"); } }); }); }); </script> </head> <body> <input id="btn" type="button" value="跨域獲取數據" /> <textarea id="text" style="width: 400px; height: 100px;"></textarea> </body> </html>
4. 再看看如何改變callback這個名稱：第23行代碼
指定callback這個名稱後，後臺也需要跟着更改。
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>跨域測試</title> <script src="js/jquery-1.7.2.js"></script> <script> function showData (data) { console.info("調用showData"); var result = JSON.stringify(data); $("#text").val(result); } $(document).ready(function () { $("#btn").click(function () { $.ajax({ url: "http://localhost:8081/rest/itemCat/list3", type: "GET", dataType: "jsonp", //指定服務器返回的數據類型 jsonp: "", //指定參數名稱 jsonpCallback: "showData", //指定回調函數名稱 success: function (data) { console.info("調用success"); } }); }); }); </script> </head> <body> <input id="btn" type="button" value="跨域獲取數據" /> <textarea id="text" style="width: 400px; height: 100px;"></textarea> </body> </html>
後臺代碼：
