자바 스크립트 코드에서 jsonp 사용

Question

저는 javascript와 json을 연구 중이므로 다른 서버에서 json 파일을 가져와야합니다. 일부 자바 스크립트 테스트 로컬 json 파일을 사용하여 일을했지만 지금은 다른 도메인에있는 파일을 작업해야하기 때문에 모든 코드를 jsonp로 변환하고 싶습니다. 내 코드는 다음과 같습니다

function jsonEntity() 
{ 
var richiestaEntity = new XMLHttpRequest(); 

richiestaEntity.onreadystatechange = function() 
{ 
    if(richiestaEntity.readyState == 4) 
{ 
     var objectentityjson = {}; 
     window.arrayEntity= []; //creazione dell'array che conterrà le entity 
     objectentityjson = JSON.parse(richiestaEntity.responseText); 

     arrayEntita = objectentityjson.cards; 

    return arrayEntita; 
    } 
} 
richiestaEntity.open("GET", "myjson.json", true); 
richiestaEntity.send(null); 
} 

어떻게 내 코드의 구조를 잃지 않고 지역 JSON 대신 JSONP와 함께 작동 할 수 있습니까?

Answer 1

JSONP와 JSON은 근본적으로 다르게 작동합니다. 자세한 내용은 my other Stack Overflow answer을 참조하십시오. 때문에 JSONP 작동 방식

, 당신 함수 호출 (이름있는 보통 callback GET 매개 변수에 의해 지정)에서 JSON 응답을 포장 할 필요 서버의 협력;

/get_jsonp.php?callback=foo 

수 (해야) :

foo({ 
    "foo": "bar" 
}); 

을 ... 응답에.

이 있다고 가정하면 다음과 같이 기존 기능을 변경할 수 있습니다.

function jsonEntity() 
{ 
    var callbackName = "ajaxCallback"; 
    var script = document.createElement("script"); 

    // This bit needs the cooperation of the server, 
    // otherwise `ajaxCallback` won't be called. 
    script.src = "myjson.json?callback=" + callbackName; 

    window[callbackName] = function (obj) { 
     window.arrayEntity = obj.cards; 
    } 

    document.body.appendChild(script); 
} 

Answer 2

JSONP는 JSON과 다르게 작동합니다.

JSON을 사용하면 기본적으로 XHR을 사용하여 서버에서 파일을 요청하고 파싱 한 다음 결과 개체에 대한 작업을 수행합니다.

JSONP를 사용하면 다른 서버에서 라이브러리를로드 할 때와 같이 <script> 태그를 삽입 할 수 있습니다. URL에는 추가 매개 변수 인 콜백 함수가 전송되며 페이지에서 해당 함수를 정의합니다.

다음과 같이 보일 수 있습니다. 먼저 우리는 우리의 콜백을 정의

function myCallback(data) { 
    // do some stuff with data 
} 

은 우리가 동적으로 데이터를 검색 할 수있는 새로운 <script> 태그를 삽입합니다.

<script src="path.to/remote/server.js?callback=myCallback" type="text/javascript"></script> 

이 완료되었습니다.

는 이제 서버가 콜백 함수를 호출하여 처리 inits 형태

myCallback({"your": "answer", "is": "here" }); 

의 답변을 보냅니다. 여기서는 일반적인 JSON 응답 대신에 JSON을 나타내는 매개 변수로 객체를 사용하여 콜백에 대한 함수 호출을 작성합니다.

매개 변수의 이름 (예 : "콜백")은 서비스 공급자마다 다를 수 있습니다. 따라서 올바른 이름을 찾아 사용하십시오.

또 다른주의해야 할 점은 GET 요청에 대해서만 작동한다는 것입니다. 이 아닌 경우 POST 요청에이 기술을 사용하십시오.