前言
今天遇到ajax跨域請求的問題,在此感謝crossoverJie的文章,幫忙下解決了該問題.同時也接觸到了簡書胞谭。
感覺自己應(yīng)該在簡書上記錄下,在開發(fā)過程中的問題和經(jīng)驗赞警。
什么是跨域問題？
- 只要協(xié)議岩瘦、域名、端口有任何一個不同震庭，都被當作是不同的域.。
- 只要是在不同域中是無法進行通信的你雌。
基于以上的的出發(fā)點器联，我們又有跨域共享資源的需求(譬如現(xiàn)在流行的前后端分離之后分別部署的情況)，本文所采用的解決辦法是JSONP婿崭，說到JSONP就會首先想到JSON拨拓。雖然只有一字之差但意義卻完全不一樣，首先科普一下JSON氓栈。
JSON
其實現(xiàn)在JSON已經(jīng)是相當流行了渣磷，只要涉及到前后端的數(shù)據(jù)交互大都都是采用的JSON(不管是web還是android和IOS)
JSON的優(yōu)點：
- 基于純文本，跨平臺傳遞極其簡單授瘦；
-
Javascript原生支持醋界，后臺語言幾乎全部支持竟宋； - 輕量級數(shù)據(jù)格式，占用字符數(shù)量極少形纺，特別適合互聯(lián)網(wǎng)傳遞丘侠；
- 可讀性較強，雖然比不上
XML那么一目了然逐样，但在合理的依次縮進之后還是很容易識別的蜗字； - 容易編寫和解析，當然前提是你要知道數(shù)據(jù)結(jié)構(gòu)脂新；
JSONP
好了挪捕，終于可以談?wù)?code>JSONP了。之前說道JSONP是用來解決跨域問題的争便，那么他是如何解決的呢级零。經(jīng)過我們開發(fā)界的前輩們發(fā)現(xiàn)，HTML中擁有SRC屬性的標簽都不受跨域的影響滞乙，比如<script>妄讯，<iframe>,<img>等標簽。
由于JS原生支持JSON的解析酷宵，于是我們采用<script>的方式來處理跨域解析，代碼如下一看就明白躬窜。
HTML
<html lang="zh">
<head>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: url,
dataType: "jsonp",
jsonp: "callback",//一般默認為:callback
jsonpCallback:"getUser",//自定義的jsonp回調(diào)函數(shù)名稱浇垦，默認為jQuery自動生成的隨機函數(shù)名，也可以寫"?"荣挨，jQuery會自動為你處理數(shù)據(jù)
success: function(json){
alert(json);
},
error: function(){
alert('error');
}
});
});
</script>
</head>
<body>
</body>
</html>
其中我們采用了JQuery給我封裝好的函數(shù)男韧，這樣就可以自動幫我們解析了。
我們所傳遞的callback參數(shù)帶著查詢的數(shù)據(jù)又原封不動的返回給我們了默垄，這樣的話即使我們不使用JQuery給我封裝好的函數(shù)此虑，我們自定義一個和callback名稱一樣的函數(shù)一樣是可以解析其中的數(shù)據(jù)的，只是Jquery幫我們做了而已口锭。
Controller
@RequestMapping(value = "/test",method = { RequestMethod.GET })
@ResponseBody
public Object test(String callback, String userId) throws IOException {
//數(shù)據(jù)
User user = userService.selectById(userId);
JSONPObject jsonpObject = new JSONPObject(callback,user) ;
return jsonpObject ;
}
后端采用了jackson中的JSONPObject這個類的一個構(gòu)造方法朦前，只需要將callback字段和需要轉(zhuǎn)成JSON字符串的對象放進去即可。
需要主要的是需要使用@ResponseBody注解才能成功返回鹃操。
總結(jié)
JSONP只支持GET方式的HTTP請求韭寸；
可以在 xml里配置jsonp返回，并注解方法荆隘。
還有 跨域資源共享 CORS 也可以解決跨域請求問題恩伺。
感謝
在此感謝crossoverJie作者的文章，SSM(六)跨域傳輸對我有很大的啟發(fā)
