JSONP는이 문제를 해결하는 것입니다. JSONP는 영어로 패딩이있는 JSON의 약어이며 비공식 프로토콜입니다. 서버가 스크립트 태그를 생성하고 값 클라이언트를 반환하고 JavaScript 콜백 형식을 통해 사이트 액세스를 실현할 수 있습니다. JSONP는 스크립트 태그 주입으로 서버에서 반환 한 응답을 페이지에 추가하면 특정 기능을 구현하는 것입니다.
요컨대, JSONP 자체는 복잡한 것이 아니며 Scipt 태그를 통해 브라우저의 상동 정책을 우회합니다.
오늘날, Jushi의 적용은 점점 덜 효과적입니다. 많은 인터넷 회사는 후반 단계에서 분산 아키텍처를 사용할 것입니다.
그런 다음 페이지의 다른 도메인 이름에서 JSON을 호출하는 데 문제가 있습니다.
(크로스 도메인 : 다른 도메인 이름, 동일한 도메인 이름이지만 다른 포트)
JavaScript 사양에 언급 된 JSON은 도메인에서 직접 호출 할 수 없습니다. 보안의 경우 JS 조각을 호출 할 수 있습니다.
그래서 JSON을 JS 조각으로 랩핑합니다. 즉 JSONP, Cross-Domain 요청
봄 4.1 이후에 JSONP에 대한 호출로 새로운 방법이 제공됩니다.
예:
@requestmapping (value = "/list") @ResponseBody public object getItemCatList (String Callback) {ItemCatresult result = itemcatservice.getItemCatList (); if (stringUtils.isblank (Callback)) {// 결과를 문자열 리턴 결과로 변환해야합니다. } // 문자열이 비어 있지 않으면 JSONP를 지원해야합니다. 매핑 JacksonValue Mapping JacksonValue = 새로운 Mapping JacksonValue (결과); Mapping JacksonValue.setjsonpfunction (콜백); 리턴 맵핑 JacksonValue; }그림에서 볼 수 있듯이 이것은 JSONP입니다
그런 다음 JSONP를 호출 해야하는 한 약간의 처리가 필요한 후 도메인 간 데이터를 호출 할 수 있습니다.
페이지에 JSONP를 표시하는 예를 만들었습니다.
(JS는 약간 추악합니다. 나는 백엔드에서 태어 났고, 프론트 엔드의 영웅들은가 두드려 ~)
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 += "<li class = 'dropdown-submenu'>"; 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 노드 = 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 : url : serverUrl, datatype : "jsonp", jsonp : "callback", jsonpcallfun : success : function (json) {// console.log (json); {console.log (e); }}; } (); $ (document) .ready (function () {var serverUrl = "http : // localhost : 8088/rest/menu/list"; menu.getJsonp (serverUrl, "menu.getMenudata");});표시 효과 :