스크립트를 사용하여 Http 도메인 간 요청 수행: JSONP 구현 원칙 및 code_javascript 기술

<script> 요소의 src 속성은 URL을 설정하고 HTTP GET 요청을 시작할 수 있습니다. HTTP는 일반적으로 동일 출처 정책에 의해 제한되지 않고 도메인 간에 통신할 수 있습니다. <script> 기반의 Ajax가 사용됩니다. 프로토콜을 전송할 때 서버 응답은 JSON으로 인코딩된 데이터 형식을 사용합니다. 스크립트를 실행할 때 JavaScript 파서가 이를 자동으로 디코딩할 수 있습니다. 이 Ajax 전송 프로토콜은 따라서 "JSONP"라고도 합니다. 따라서 jsonp 기술을 사용합니다. <script>의 src 속성을 설정하고 이를 문서에 삽입하면 브라우저는 src 속성에 의해 실행되는 URL을 다운로드하기 위해 http 요청을 보냅니다. 🎜><br> <script> 요소 데이터를 사용하여 호출할 때 응답 콘텐츠는 JavaScript 함수 이름과 괄호로 묶어야 합니다(즉, 함수의 매개변수로만 사용할 수 있음). json 데이터: <br><BR><div class="codetitle"><span><a style="CURSOR: pointer" data="22192" class="copybut" id="copybut22192" onclick="doCopy('code22192')">코드 복사 <U> 코드는 다음과 같습니다. <div class="codebody" id="code22192">응답( <BR>[ 1, 2, {"hello", "world"}] <BR>) <BR><BR> 이 작업을 수행하려면 <script> 일반 json 대신 jsonp 응답을 반환해야 합니다. 이는 URL에 쿼리 매개변수를 추가하여 수행할 수 있습니다. 예를 들어 "?json"(또는 &json) <BR><br>을 추가합니다. jsonp를 지원하는 경우 응답과 같이 클라이언트가 구현해야 하는 콜백 함수 이름을 적용하지 않습니다. 대신 쿼리 매개변수 값을 사용하여 클라이언트가 함수 이름을 지정한 다음 함수 이름을 사용하여 응답을 채울 수 있습니다. 🎜><br><BR><div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="13906" class="copybut" id="copybut13906" onclick="doCopy('code13906')"><U> 코드는 다음과 같습니다. //지정된 URL을 기반으로 json 요청 보내기//그런 다음 구문 분석된 응답 데이터를 콜백 함수에 전달<div class="codebody" id="code13906">//이 요청에 대한 콜백 함수 이름 지정<BR>function getJSONP(url, callback){을 사용하여 jsonp라는 쿼리 매개변수를 URL에 추가합니다. <BR>//이 요청에 대한 고유한 콜백 함수 이름을 만듭니다.<BR>var cbnum = "cb" getJSONP.counter; var cbname = "getJSONP." cbnum; >//URL 쿼리 부분에 폼 인코딩 형식으로 콜백 함수명 추가<BR>if(url.indexOf("?" ) === -1){ <BR>url = "?jsonp=" cbname ; <BR>}else{ <BR>url = "&jsonp=" cbname <BR>} <BR>//Create<script&gt ;요청을 보내는 데 사용됩니다<BR>var script = document.createElement("script"); <BR>//스크립트에 의해 실행되는 콜백 함수 정의<BR>getJSONP[cbnum] = function(response){ <BR>try{ <BR>callback(response); //응답 처리<BR>} <BR>마지막으로{ <BR>//함수를 삭제하고 해당 스크립트 요소를 제거합니다<BR>delete getJSONP[cbnum]; <BR>script.parentNode.removeChild(script) <BR>} <BR>} <BR>/ /즉시 http 요청 실행 <BR>script.src = url; <BR>document.body.appendChild(script) <BR>} <BR>getJSONP.counter = 0;</script>