從前端和後端兩個角度分析jsonp跨域訪問
- 坏嘻嘻原創
- 2018-09-13 17:02:271506瀏覽
php5中的驗證合法性的擴展，在PHP5.2中，可以透過內建的擴展過濾器去進行合法性的校驗。
一、什麼是跨網域存取
舉個栗子：在A網站中，我們希望使用Ajax來獲得B網站中的特定內容。如果A網站與B網站不在同一個網域中，那麼就出現了跨網域存取問題。你可以理解為兩個網域之間不能跨過網域來發送請求或請求數據，否則就是不安全的。跨網域存取違反了同源策略，同源策略的詳細資訊可以點擊如下連結：Same-origin_policy；
總而言之，同源策略規定，瀏覽器的ajax只能存取跟它的HTML頁面同來源（相同網域名稱或IP）的資源。
二、什麼是JSONP
JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料存取的問題。
由於同源策略，一般來說位於server1.example.com 的網頁無法與不是server1.example.com的伺服器溝通，而HTML 的3f1c4e4b6b16bbbd69b2ee476dc4f83a元素是一個例外。利用3f1c4e4b6b16bbbd69b2ee476dc4f83a元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這個使用模式就是所謂的 JSONP。用 JSONP 抓到的資料不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。更具體的原理需要更多篇幅的講解，小夥伴可以自行去百度。
三、JSONP的使用
前端的使用範例
JQuery Ajax對JSONP進行了很好的封裝，我們使用起來很方便。前端範例：
$.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat", //访问的链接
dataType:"jsonp", //数据格式设置为jsonp
jsonp:"callback", //Jquery生成验证参数的名称
success:function(data){ //成功的回调函数
alert(data);
},
error: function (e) {
alert("error");
}
});需要注意的地方是：
dataType，該參數必須設定為jsonp
jsonp ，此參數的值需要與伺服器端約定，詳細情況下面介紹。 （約定俗成的預設值為callback）
後端的配合範例
JQuery Ajax Jsonp原理
後端要配合使用jsonp，那麼首先得了解Jquery Ajax jsonp的一個特點：
Jquery在發送一個Ajax jsonp請求時，會在訪問連結的後面自動加上驗證參數，這個參數是Jquery隨機產生的，例如連結#http ://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046 #call#call16 387045&_=1512186387046就是jquery自動加入的。
新增這個參數的目的是唯一標識這次請求。當伺服器端接收到該請求時，需要將該參數的值與實際要返回的json值進行構造（如何構造下面講解），並且返回，而前端會驗證這個參數，如果是它之前發出的參數，那麼就會接收並解析數據，如果不是這個參數，那就拒絕接受。
要特別注意的是這個驗證參數的名字（我在這個坑上浪費了2小時），這個名字來自前端的jsonp參數的值。如果把前端jsonp參數的值改為“aaa”，那麼對應的參數就應該是
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046
##445&_=1512186387046
#>#Jqueryf##JqueJqueryf
JqueJquerynf##>JqueJqueryf
#JqueJquery#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#了處理。的原理，也知道了需要接受的參數，我們就可以來寫伺服器端程式了。 為了配合json，伺服器端需要做的事情可以歸納為兩個步驟：
第一步、接收驗證參數
- 根據與前端Ajax約定的jsonp參數名稱來接收驗證參數，範例如下（使用SpringMVC，其他語言及框架原理類似）
@ResponseBody @RequestMapping("/getJsonp") public String getMySeatSuccess(@RequestParam("callback") String callback){第二步、建構參數並返回
將接收的的驗證參數callback與實際要傳回的json數據以「callback(json)」的方式建構：@ResponseBody @RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){ Gson gson=new Gson(); //google的一个json工具库 Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12"); return callback+"("+gson.toJson(map)+")"; //构造返回值 }四、總結
#最終，前後端的對應程式碼應該是這樣的： 前端
$.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat", //访问的链接
dataType:"jsonp", //数据格式设置为jsonp
jsonp:"callback", //Jquery生成验证参数的名称
success:function(data){ //成功的回调函数
alert(data);
},
error: function (e) {
alert("error");
}
});######後端###### @ResponseBody
@RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){
Gson gson=new Gson(); Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12");
logger.info(callback); return callback+"("+gson.toJson(map)+")";
}###需要注意的是：############前端注意與後端溝通約定jsonp的值，通常默認都是用callback。 ############後端根據jsonp參數名稱取得到參數後要與本來要傳回的json資料以「callback(json)」的方式建構。 ############如果要測試的話記得在跨域環境（兩台機器）下進行。 ############完整的範例就是上面兩段程式碼，這裡就不提供Github連線了。上面的範例親測有效，如果有遇到問題的，歡迎留言提問。 #########################一、什麼是跨網域存取
舉個栗子：在A網站中，我們希望使用Ajax來獲得B網站中的特定內容。如果A網站與B網站不在同一個網域中，那麼就出現了跨網域存取問題。你可以理解為兩個網域之間不能跨過網域來發送請求或請求數據，否則就是不安全的。跨網域存取違反了同源策略，同源策略的詳細資訊可以點擊如下連結：Same-origin_policy；
總而言之，同源策略規定，瀏覽器的ajax只能存取跟它的HTML頁面同源（相同域名或IP）的資源。
二、什麼是JSONP
JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料存取的問題。
由於同源策略，一般來說位於server1.example.com 的網頁無法與不是server1.example.com的伺服器溝通，而HTML 的3f1c4e4b6b16bbbd69b2ee476dc4f83a元素是一個例外。利用3f1c4e4b6b16bbbd69b2ee476dc4f83a元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這個使用模式就是所謂的 JSONP。用 JSONP 抓到的資料不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。更具體的原理需要更多篇幅的講解，小夥伴可以自行去百度。
三、JSONP的使用
前端的使用範例
JQuery Ajax對JSONP進行了很好的封裝，我們使用起來很方便。前端範例：
$.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat", //访问的链接
dataType:"jsonp", //数据格式设置为jsonp
jsonp:"callback", //Jquery生成验证参数的名称
success:function(data){ //成功的回调函数
alert(data);
},
error: function (e) {
alert("error");
}
});需要注意的地方是：
dataType，該參數必須設定為jsonp
jsonp ，此參數的值需要與伺服器端約定，詳細情況下面介紹。 （約定俗成的預設值為callback）
後端的配合範例
JQuery Ajax Jsonp原理
後端要配合使用jsonp，那麼首先得了解Jquery Ajax jsonp的一個特點：
Jquery在發送一個Ajax jsonp請求時，會在訪問連結的後面自動加上驗證參數，這個參數是Jquery隨機產生的，例如連結#http ://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046 #call#call16 387045&_=1512186387046就是jquery自動加入的。
新增這個參數的目的是唯一標識這次請求。當伺服器端接收到該請求時，需要將該參數的值與實際要返回的json值進行構造（如何構造下面講解），並且返回，而前端會驗證這個參數，如果是它之前發出的參數，那麼就會接收並解析數據，如果不是這個參數，那就拒絕接受。
要特別注意的是這個驗證參數的名字（我在這個坑上浪費了2小時），這個名字來自前端的jsonp參數的值。如果把前端jsonp參數的值改為“aaa”，那麼對應的參數就應該是
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046
##445&_=1512186387046
#>#Jqueryf##JqueJqueryf
JqueJquerynf##>JqueJqueryf
#JqueJquery#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#了處理。的原理，也知道了需要接受的參數，我們就可以來寫伺服器端程式了。 為了配合json，伺服器端需要做的事情可以歸納為兩個步驟：
第一步、接收驗證參數
- 根據與前端Ajax約定的jsonp參數名稱來接收驗證參數，範例如下（使用SpringMVC，其他語言及框架原理類似）
@ResponseBody @RequestMapping("/getJsonp") public String getMySeatSuccess(@RequestParam("callback") String callback){第二步、建構參數並返回
將接收的的驗證參數callback與實際要傳回的json數據以「callback(json)」的方式建構：@ResponseBody @RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){ Gson gson=new Gson(); //google的一个json工具库 Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12"); return callback+"("+gson.toJson(map)+")"; //构造返回值 }四、總結
#最終，前後端的對應程式碼應該是這樣的：
前端
$.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat", //访问的链接
dataType:"jsonp", //数据格式设置为jsonp
jsonp:"callback", //Jquery生成验证参数的名称
success:function(data){ //成功的回调函数
alert(data);
},
error: function (e) {
alert("error");
}
});######後端###### @ResponseBody
@RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){
Gson gson=new Gson(); Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12");
logger.info(callback); return callback+"("+gson.toJson(map)+")";
}###需要注意的是：############前端注意與後端溝通約定jsonp的值，通常默認都是用callback。 ############後端根據jsonp參數名稱取得到參數後要與本來要傳回的json資料以「callback(json)」的方式建構。 ############相關推薦：########PHP關於AJAX1點疑惑############class.rFastTemplate.php一_PHP教學################以上是從前端和後端兩個角度分析jsonp跨域訪問的詳細內容。更多資訊請關注PHP中文網其他相關文章！