Ajax+Spring MVC實現跨域請求（JSONP）

時間 2019-11-13

標籤 ajax+spring ajax spring mvc 實現請求 jsonp 欄目 Ajax 简体版

原文原文鏈接

JSONP解釋

在解釋JSONP以前,咱們須要瞭解下」同源策略「這個概念,這對理解跨域有幫助。基於安全的緣由,瀏覽器是存在同源策略機制的,同源策略阻止從一個源加載的文檔或腳本獲取或設置另外一個源加載額文檔的屬性。有點繞,說的簡單點就是瀏覽器限制腳本只能和同協議、同域名、同端口的腳本進行交互。javascript

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

簡而言之,JSONP自己不是複雜的東西,就是經過scirpt標籤對javascript文檔的動態解析繞過了瀏覽器的同源策略。前端

JSONP原理及實現

接下來,來實際模擬一個跨域請求的解決方案。後端爲Spring MVC架構的,前端則經過Ajax進行跨域訪問。java

一、首先客戶端須要註冊一個callback(服務端經過該callback(jsonp)能夠獲得js函數名(jsonpCallback))，而後以JavaScript語jquery

法的方式,生成一個functionajax

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

三、最後客戶端瀏覽器動態的解析script標籤,並執行返回的JavaScript語法文檔片斷,此時數據做爲參數傳入到了預先定義好的後端

回調函數裏(動態執行回調函數)。跨域

這種動態解析js文檔和eval函數是相似的。瀏覽器

通過一番努力，解決以下：

修改host 文件

127.0.0.1 www.lbj.com

127.0.0.1 www.lbj1.com

@RequestMapping("/getJsonp") 
 @ResponseBody 
 public JSONPObject getJsonp(String callbackparam){ 
Company company=new Company(); 
company.setAddress("寶駕(北京)信息技術有限公司"); 
company.setEmail("123456@qq.com"); 
company.setName("寶駕(上海)信息技術郵箱公司"); 
company .setPhone("12345678912"); 
  return new JSONPObject(callbackparam, company);  
 }
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script> 
$(document).ready(function(){ 
       
       
$("#but1").click(function(){ 
     $.ajax({ 
        url:'http://www.lbj1.com:8082/oms/tradeIllegal/test.do', 
        type: "get", 
        async: false, 
        dataType: "jsonp", 
        jsonp: "callbackparam", //服務端用於接收callback調用的function名的參數  
        jsonpCallback: "success_jsonpCallback", //callback的function名稱,服務端會把名稱和data一塊兒傳遞回來  
        success: function(json) { 
         alert(json); 
        }, 
        error: function(){alert('Error');} 
}); 
}); 
   
   
$("#but2").click(function(){ 
     $.ajax({ 
        url:'http://www.lbj.com:8082/DevInfoWeb/getJsonp', 
        type: "get", 
        async: false, 
        dataType: "jsonp", 
        jsonp: "callbackparam", //服務端用於接收callback調用的function名的參數  
        jsonpCallback: "success_jsonpCallback", //callback的function名稱,服務端會把名稱和data一塊兒傳遞回來  
        success: function(json) { 
         alert(json); 
        }, 
        error: function(){alert('Error');} 
}); 
}); 
   
   
}); 
</script> 
</head> 
<body> 
   
<div id="div1"><h2>使用 jQuery AJAX 來改變文本</h2></div> 
<button id="but1">按鈕1</button> <br/> 
<button id="but2">按鈕2</button> 
   
</body> 
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。