真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

使用jquery的jsonp發(fā)起跨域請求的示例分析

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

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)阿爾山免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

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

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

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

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

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

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

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

使用jquery的jsonp發(fā)起跨域請求的示例分析

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

使用jquery的jsonp發(fā)起跨域請求的示例分析

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

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

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


 跨域測試
 
 


 
 

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

使用jquery的jsonp發(fā)起跨域請求的示例分析

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

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

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

使用jquery的jsonp發(fā)起跨域請求的示例分析

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é)果：

使用jquery的jsonp發(fā)起跨域請求的示例分析

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

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


 跨域測試
 
 


 
 

效果：

使用jquery的jsonp發(fā)起跨域請求的示例分析

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

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

效果圖：

使用jquery的jsonp發(fā)起跨域請求的示例分析

使用jquery的jsonp發(fā)起跨域請求的示例分析

再看看如何改變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);
}

效果圖：

使用jquery的jsonp發(fā)起跨域請求的示例分析

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

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

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

效果圖：

使用jquery的jsonp發(fā)起跨域請求的示例分析

使用jquery的jsonp發(fā)起跨域請求的示例分析

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

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

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

使用jquery的jsonp發(fā)起跨域請求的示例分析

設(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ā)起跨域請求，其原理跟