- 跨域?
跨域的安全限制都是對瀏覽器端來說的，服務器端是不存在跨域安全限制的。
- 同源策略?
一般來說 a.com 的網頁無法直接與 b.com的服務器溝通， 瀏覽器的同源策略限制從一個源加載的文檔或腳本與來自另一個源的資源進行交互。
如果協議，端口和主機對於兩個頁面是相同的，則兩個頁面具有相同的源，否則就是不同源的。
如果要在js里發起跨域請求，則要進行一些特殊處理了。或者，你可以把請求發到自己的服務端，通過后台代碼發起請求，再將數據返回前端。(我幾乎沒有用到過jsonp,都是把跨域請求交給至高無上的服務端)
- 解決問題的jsonp小概念出現了
瀏覽器端有可以直接跨域拿數據的,比如HTML 的<script> 元素。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行后對數據用 JSON 解析器解析。
現在使用jsonp基本都是用ajax方式,來路是jquery將jsonp封裝為ajax的一種形式,但它們的本質區別並不是跨域,ajax的核心通過XMLhttpRequest獲取非本頁內容,jsonp則是動態添加<script>標簽來調用服務端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，才能完成跨域請求。
原先自己總結的jsonp在看了這篇文章后覺得寫得思路很亂,累贅也多, 原作者的這篇jsonp思路清晰,示例代碼與頁面都有詳細標注與截圖,很容易給新手了解,於是copy來,給自己筆記也給需要的猿猿們借鑒
原文作者:bojiangzhou 原文鏈接:http://www.cnblogs.com/chiangchou/