JSONP就是為了解決這一問題的,JSONP是英文JSON with Padding的縮寫,是一個非官方的協議。他允許服務端生成script tags返回值客戶端,通過javascript callback的形式來實現站點訪問。JSONP是一種script tag的注入,將server返回的response添加到頁面是實現特定功能。
簡而言之,JSONP本身不是復雜的東西,就是通過scirpt標簽對javascript文檔的動態解析繞過了瀏覽器的同源策略。
如今的巨石應用已經越來越不行了，很多互聯網在后期都會在用分布式的架構
那么在頁面上不同的服務調用不同域名下的json是有問題的
（跨域：不同域名，相同域名但是不同端口）
JavaScript規范中提到的json是不能直接跨域調用，為了安全，但是能調用js片段
所以把json包裝為一個js片段，也就是jsonp那么就能夠跨域請求
在spring4.1后，提供了新的方法可以作為jsonp的調用
例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@RequestMapping(value="/list") @ResponseBody public Object getItemCatList(String callback) { ItemCatResult result = itemCatService.getItemCatList(); if (StringUtils.isBlank(callback)) { //需要把result轉換成字符串 return result; } //如果字符串不為空，需要支持jsonp調用 spring4.1 以上可用 MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result); mappingJacksonValue.setJsonpFunction(callback); return mappingJacksonValue; } |
如圖，這就是jsonp
那么只要在js需要調用jsonp的地方稍加處理就能夠跨域調用數據了~
做了個例子，用來在頁面上展示jsonp：
（js寫的丑了點，本人后端出生，前端大俠們輕拍~）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
var Menu = function () { return { getMenuData: function (json) { console.log(json); var data = json.data; var html = ""; for (var i = 0 ; i < data.length ; i ++) { var url = data[i].u; var name = data[i].n; var sub = data[i].i; html += ""; html += "<li class='dropdown-submenu'>"; html += "<a href='" + url + "'>" + name; html += "<span class='c-arrow c-toggler'></span>"; html += "</a>"; html += "<ul class='dropdown-menu c-pull-right'>"; for (var j = 0 ; j < sub.length ; j ++) { var url = sub[j].u; var name = sub[j].n; var node = sub[j].i; html += "<li class='dropdown-submenu'>"; html += "<a href='" + url + "'>" + name; html += "<span class='c-arrow c-toggler'></span>"; html += "</a>"; html += "<ul class='dropdown-menu c-pull-right'>"; for (var k = 0 ; k < node.length ; k ++) {// debugger var name = node[k]; var last = name.split("|"); html += "<li>"; html += "<a href='" + last[0] + "'>" + last[1] + "</a>"; html += "</li>"; } html += "</ul>"; html += "</li>"; } html += "</ul>"; html += "</li>"; } $("#itemCatMenu").html(html); }, getJSONP: function (serverUrl, callbackFun) { $.ajax({ type: "get", url: serverUrl, dataType: "jsonp", jsonp: "callback", jsonpCallback: callbackFun, success: function(json){// console.log(json); }, error: function(e){ if (e.status != "200") { console.log(e); } } }); } }; }();$(document).ready(function(){ var serverUrl = "http://localhost:8088/rest/menu/list"; Menu.getJSONP(serverUrl, "Menu.getMenuData");}); |
展示的效果：
