前端開發 HTML5 CSS3 HTML CSS JavaScript jQuery Bootstrap

jQuery中JSONP結合Spring MVC實現跨域請求

jQuery HTML我幫您 1年前  1126次瀏覽
在解釋JSONP之前,我們需要了解下 ”同源策略“ 這個概念,這對理解跨域有幫助。基于安全的原因,瀏覽器是存在同源策略機制的,同源策略阻止從一個源加載的文檔或腳本獲取或設置另一個源加載額文檔的屬性。有點繞,說的簡單點就是瀏覽器限制腳本只能和同協議、同域名、同端口的腳本進行交互。

JSONP就是為了解決這一問題的,JSONP是英文JSON with Padding的縮寫,是一個非官方的協議。他允許服務端生成script tags返回值客戶端,通過javascript callback的形式來實現站點訪問。JSONP是一種script tag的注入,將server返回的response添加到頁面是實現特定功能。

簡而言之,JSONP本身不是復雜的東西,就是通過scirpt標簽對javascript文檔的動態解析繞過了瀏覽器的同源策略。
jQuery對跨域請求有兩種解決方案分別是jQuery的jquery.ajax jsonp格式和jquery.getScript方式

首先介紹下$.ajax的參數
type:請求方式 GET/POST
url:請求地址
async:布爾類型,默認為true 表示請求是否為異步,如果為false表示為同步。
dataType:返回的數據類型
jsonp:傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(一般默認為:callback)
jsonpCallback:自定義的jsonp回調函數名稱,默認為jQuery自動生成的隨機函數名,也可以寫"?",jQuery會自動為你處理數據
success:調用成功執行的函數
error:異常處理函數

JSONP原理及實現
接下來,來實際模擬一個跨域請求的解決方案。后端為Spring MVC架構的,前端則通過Ajax進行跨域訪問。

1、首先客戶端需要注冊一個callback(服務端通過該callback(jsonp)可以得到js函數名(jsonpCallback)),然后以JavaScript語法的方式,生成一個function

2、接下來,將JSON數據直接以入參的方式,放置到function中,這樣就生成了一段js語法文檔,返回給客戶端。

3、最后客戶端瀏覽器動態的解析script標簽,并執行返回的JavaScript語法文檔片段,此時數據作為參數傳入到了預先定義好的

回調函數里(動態執行回調函數)。

這種動態解析js文檔和eval函數是類似的。

接下來就是如何實現了,客戶端代碼。

$.ajax({
type: "get",
async: false,
url: "http://localhost:8080/html580/get",
dataType: "jsonp",
jsonp: "callback", //服務端用于接收callback調用的function名的參數
jsonpCallback: "jsonpCallback", //callback的function名稱,服務端會把名稱和data一起傳遞回來
success: function(json) {
alert(json<0>.name);
}
});

注解:jsonp會創建一個查詢字符串參數callback=?,這個參數會加載請求的URL后面,服務端應當在JSON數據前加上回調函數名,以便完成一個JSONP請求。也就是說服務器端需要對返回的數據做處理,格式為如下形式:
jsonpCallback(<{ name:"html580.com"}>)

接下來看服務器端針對上述代碼的處理:

@RequestMapping("/get")
public void get(HttpServletRequest req,HttpServletResponse res) {
res.setContentType("text/plain");
String callbackFunName =req.getParameter("callback");//得到js函數名稱
try {
res.getWriter().write(callbackFunName + "(< { name:\"html580.com\"}>)"); //返回jsonp數據
} catch (IOException e) {
e.printStackTrace();
}
}
前端Ajax跨域請求觸發之后,能夠有效的得到JSON數據,情況如下:

至此,Ajax跨域請求也已經解決了,不過還是有兩點地方需要注意:
1、沒有關于JSONP調用的錯誤處理,動態插入的腳本有效,則執行調用,無效就默默失敗(無任何提示)。
2、JSONP被不信任的服務使用會有一定的安全隱患,不信任的服務提供的腳本是惡意的。


發表評論

经典黑杰克游戏 女生赚钱怎么拒绝 赚钱我最牛指标 开个分享群能赚钱吗 上传片子能赚钱的网站 学习什么技术最赚钱 招标公司里面靠什么赚钱 医院是不是最赚钱的企业 阿里度能赚钱么 怎么用自己的网站赚钱吗 橙光靠什么赚钱 赚钱大型游戏排行榜 什么小程序可以一边打字一边赚钱 炒股赚钱新模式 免费软件培训公司靠什么赚钱 怎么通过发改委赚钱 亚马逊卖气球赚钱吗