這篇文章主要介紹使用jquery的jsonp發(fā)起跨域請求的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

跨域的安全限制都是對瀏覽器端來說的，服務(wù)器端是不存在跨域安全限制的。

瀏覽器的同源策略限制從一個源加載的文檔或腳本與來自另一個源的資源進(jìn)行交互。

如果協(xié)議，端口和主機(jī)對于兩個頁面是相同的，則兩個頁面具有相同的源，否則就是不同源的。

如果要在js里發(fā)起跨域請求，則要進(jìn)行一些特殊處理了?；蛘?，你可以把請求發(fā)到自己的服務(wù)端，再通過后臺代碼發(fā)起請求，再將數(shù)據(jù)返回前端。

這里講下使用jquery的jsonp如何發(fā)起跨域請求及其原理。

先看下準(zhǔn)備環(huán)境：兩個端口不一樣，構(gòu)成跨域請求的條件。

獲取數(shù)據(jù)：獲取數(shù)據(jù)的端口為9090

請求數(shù)據(jù)：請求數(shù)據(jù)的端口為8080

1、先看下直接發(fā)起ajax請求會怎么樣

下面是發(fā)起請求端的代碼：

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>


 
 
 


 
 

請求的結(jié)果如下圖：可以看到跨域請求因為瀏覽器的同源策略被攔截了。

2、接下來看如何發(fā)起跨域請求。解決跨域請求的方式有很多，這里只說一下jquery的jsop方式及其原理。

首先我們需要明白，在頁面上直接發(fā)起一個跨域的ajax請求是不可以的，但是，在頁面上引入不同域上的js腳本卻是可以的，就像你可以在自己的頁面上使用 標(biāo)簽來隨意顯示某個域上的圖片一樣。

比如我在8080端口的頁面上請求一個9090端口的圖片：可以看到直接通過src跨域請求是可以的。

3、那么看下如何使用      

服務(wù)端：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 response.setCharacterEncoding("UTF-8");
 response.setContentType("text/html;charset=UTF-8");

 //數(shù)據(jù)
 List studentList = getStudentList();


 JSONArray jsonArray = JSONArray.fromObject(studentList);
 String result = jsonArray.toString();

 //前端傳過來的回調(diào)函數(shù)名稱
 String callback = request.getParameter("callback");
 //用回調(diào)函數(shù)名稱包裹返回數(shù)據(jù)，這樣，返回數(shù)據(jù)就作為回調(diào)函數(shù)的參數(shù)傳回去了
 result = callback + "(" + result + ")";

 response.getWriter().write(result);
}

結(jié)果：

4、再來看jquery的jsonp方式跨域請求：

服務(wù)端代碼不變，js代碼如下：最簡單的方式，只需配置一個dataType:'jsonp' ，就可以發(fā)起一個跨域請求。jsonp指定服務(wù)器返回的數(shù)據(jù)類型為jsonp格式，可以看發(fā)起的請求路徑，自動帶了一個callback=xxx，xxx是jquery隨機(jī)生成的一個回調(diào)函數(shù)名稱。

這里的success就跟上面的showData一樣，如果有success函數(shù)則默認(rèn)success()作為回調(diào)函數(shù)。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>


 
 
 


 
 

效果：

再看看如何指定特定的回調(diào)函數(shù)：第30行代碼

回調(diào)函數(shù)你可以寫到      

效果圖：

再看看如何改變callback這個名稱：第23行代碼

指定callback這個名稱后，后臺也需要跟著更改。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>


 
 
 


 
 

后臺代碼：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 response.setCharacterEncoding("UTF-8");
 response.setContentType("text/html;charset=UTF-8");

 //數(shù)據(jù)
 List studentList = getStudentList();


 JSONArray jsonArray = JSONArray.fromObject(studentList);
 String result = jsonArray.toString();

 //前端傳過來的回調(diào)函數(shù)名稱
 String callback = request.getParameter("theFunction");
 //用回調(diào)函數(shù)名稱包裹返回數(shù)據(jù)，這樣，返回數(shù)據(jù)就作為回調(diào)函數(shù)的參數(shù)傳回去了
 result = callback + "(" + result + ")";

 response.getWriter().write(result);
}

效果圖：

最后看看jsonp是否支持POST方式：ajax請求指定POST方式

可以看到，jsonp方式不支持POST方式跨域請求，就算指定成POST方式，會自動轉(zhuǎn)為GET方式；而后端如果設(shè)置成POST方式了，那就請求不了了。

jsonp的實現(xiàn)方式其實就是      

效果圖：

再補充一點，回到第一條：CORS頭缺少“Access-Control-Allow-Origin” 。

有時候你會發(fā)現(xiàn)其它都沒問題，出現(xiàn)這個錯誤：這個錯誤代表服務(wù)端拒絕跨域訪問。如果出現(xiàn)這個錯誤，就需要在服務(wù)端設(shè)置允許跨域請求。

response.setHeader("Access-Control-Allow-Origin", "*"); 設(shè)置允許任何域名跨域訪問

設(shè)置可以跨域訪問：第6行代碼或第8行代碼，設(shè)置其中一個即可。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 response.setCharacterEncoding("UTF-8");
 response.setContentType("text/html;charset=UTF-8");

 // * 表示允許任何域名跨域訪問
 response.setHeader("Access-Control-Allow-Origin", "*");
 // 指定特定域名可以訪問
 response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");

 //數(shù)據(jù)
 List studentList = getStudentList();

 JSONArray jsonArray = JSONArray.fromObject(studentList);
 String result = jsonArray.toString();

 //前端傳過來的回調(diào)函數(shù)名稱
 String callback = request.getParameter("callback");
 //用回調(diào)函數(shù)名稱包裹返回數(shù)據(jù)，這樣，返回數(shù)據(jù)就作為回調(diào)函數(shù)的參數(shù)傳回去了
 result = callback + "(" + result + ")";

 response.getWriter().write(result);
}

jQuery ajax方式以jsonp類型發(fā)起跨域請求，其原理跟