자바 스크립트에서 환율을 얻는 방법을 단순화하는 방법은 무엇입니까?

Question

나는 자바 스크립트에서 두 개의 보완적인 함수를 작성했는데 (코드에 따라 here이라는 코드를 기반으로) 환율을 얻었지만 한 기능에서만 사용할 수없는 이유를 이해할 수 없다. 내가 코드를 이해했습니다 아니라 라인 document.body.appendChild(script);,

var money; 
function showRate() { 
    getRate('EUR','USD'); 
    alert(money); 
} 
function getRate(from, to) { 
    var script = document.createElement('script'); 
    script.setAttribute('src', "http://rate-exchange.appspot.com/currency?from="+from+"&to="+to+"&format=json&callback=sendRate"); 
    document.body.appendChild(script); 
} 

function sendRate(data) { 
    money = parseFloat(data.rate, 10); 
} 

코드는 소스의 수정이다 :이 작동하는 코드입니다.

내 질문은 : 왜 두 분리 함수 (getRate 및 sendRate)해야합니까? 나는 많은 것들을 시도했지만 그런 일이 작동하지 않습니다 : 그것은 고정 할 수있는 경우

는

function showRate() { 
    alert(getAndSendRate('EUR','USD')); 
} 
function getAndSendRate(from, to) { 
    var script = document.createElement('script'); 
    script.setAttribute('src', "http://rate-exchange.appspot.com/currency?from="+from+"&to="+to+"&format=json"); 
    return(parseFloat(document.body.appendChild(script).data.rate, 10)); 
} 

사람은 코드의 두 번째 부분은 작동하지 않는 이유를 나에게 설명하고 있을까요?

감사합니다.

Answer 1

이것을 JSONP이라고합니다. 이 설정은 Javascript의 "안전한"도메인 간 통신에 필요합니다.

페이지에서 <script> 태그를 사용하고 있습니다. 이 태그에는 src 속성이 있으며 쿼리 문자열을 제공합니다 (? 문자 다음의 모든 항목). appendChild을 사용하자마자 브라우저는 요청을 받아 해당 URL에서 스크립트를 가져옵니다.

서버가 요청을 받고 쿼리 문자열을 처리 한 다음 콘텐츠를 반환합니다. 콘텐츠 형식은 다음과 같습니다.

sendRate({ 
    rate: "whatever" 
}); 

이는 쿼리 문자열에 callback을 "sendRate"로 지정했기 때문입니다. 이 변환 서비스는 그 가치를 지니고 그것을 사용했습니다.

그래서 스크립트에 sendRate이라는 함수가 있고 하나의 매개 변수가 있어야합니다.

요청 스크립트가 언제 처리되는지 알지 못하기 때문에 함수를 결합 할 수 없습니다. 이것은 스크립트를 추가하는 비동기 동작입니다. 준비가 되 자마자 스크립트가 실행되고 위에서 지정한 함수를 호출합니다.

이것은 도메인 간 서버와 통신 할 수있는 유일한 방법이기 때문에 모두 필수입니다. 브라우저가 교차 도메인을 허용 할 수있는 유일한 방법은 자바 스크립트 코드입니다. jQuery의 웹 사이트 또는 Google의 CDN에서 페이지에 자바 스크립트 파일을 포함하려는 경우와 같습니다. 다음을 사용하십시오.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

그런 경우를 제외하고는 브라우저를 라이브러리에 전달해야합니다. 엄밀히 말하면, 자바 스크립트 코드를 실행하기 만하면 똑같은 일을합니다. 이 경우 함수를 호출하는 대신 window 만 변경됩니다. 그리고 그 안에있는 내용은 정적 일 것입니다.

JSONP를 사용하여 "콜백"을 지정하고 다른 쿼리 문자열 값을 전달하는 동안 정확히 처리해야하는 항목을 개인 설정하고 사용자 환경에 맞게 설계된 함수 호출을 반환합니다.