JSONP의 구현 원리

이번에는 JSONP의 구현 원리와 JSONP 사용 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

JSONP의 구현 원리

프런트엔드와 백엔드 분리에 종사하는 많은 사람들이 JSONP에 노출되는 경우가 많다고 생각합니다. 그러나 많은 초보자들은 JSONP 구현 방법과 구현 원리를 모릅니다. 자세히 소개하기 위한 글입니다. 관심있으신 분들은 꼭 들러보세요.

기본 원칙

기본 원칙은 설명하기 쉽습니다. HTML 페이지에는 img, script, link 등과 같이 도메인 간 제한이 적용되지 않는 태그가 있습니다. 필요한 데이터를 js 파일에 넣으면 브라우저의 동일 출처 제한을 극복할 수 있습니다.

스크립트 태그 만들기

저자는 "High Performance JavaScript"에서 동적 스크립트 요소에 대해 언급했습니다.

1. 요소가 페이지에 추가되면 파일 다운로드가 시작됩니다. 이 기술의 핵심은 다운로드가 시작될 때마다 파일 다운로드 및 실행이 페이지의 다른 프로세스를 차단하지 않는다는 것입니다.

2. 동적 스크립트 노드를 사용하여 파일을 다운로드할 때 반환된 코드는 일반적으로 즉시 실행됩니다(이전의 모든 동적 스크립트 노드가 실행을 완료할 때까지 기다리는 Firefox 및 Oprea 제외). 스크립트가 자체적으로 실행될 때 이 메커니즘은 정상적으로 작동합니다. .

Quote1은 JSONP 요청 시 메인 스레드가 차단되지 않도록 보장합니다. Quote 2는 로딩이 완료된 후 즉시 JSONP 코드가 실행될 때 오류가 발생하지 않도록 보장합니다.

콜백

서버는 일반적으로 GET 요청을 받은 후 콜백 매개변수가 있는지 확인합니다. 그렇다면 반환된 데이터 외부에 메서드 이름과 괄호를 추가해야 합니다. 예를 들어 다음과 같이 요청합니다.

http://www.a.com/getSomething?callback=jsonp0

그러면 서버는 다음 콘텐츠를 반환합니다:

jsonp0({code:200,data:{}})

분명히 이것은 동적으로 로드된 스크립트 태그에 포함된 내용이므로 자체 실행 코드이고 이 코드 중 단 하나의 함수(jsonp0)만 호출됩니다.

물론 실행이 있으면 먼저 생성해야 하고, 그렇지 않으면 오류가 보고됩니다. 호출하기 전에 이 생성 단계를 실행해야 합니다.

구체적인 구현은 다음과 같습니다:

function jsonp (url, successCallback, errorCallback, completeCallback) {
 // 声明对象，需要将函数声明至全局作用域
 window.jsonp0 = function (data) {
  successCallback(data);
  if (completeCallback) completeCallback();
 }
 // 创建script标签，并将url后加上callback参数
 var 
  script = document.createElement('script')
  , url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=jsonp0'
 ;
 script.src = url;
 document.head.parentNode.insertBefore(script, document.head);
 // 等到script加载完毕以后，就会自己执行
}

위의 내용은 기본적으로 jsonp 메소드의 핵심을 완성합니다. 이때 jsonp0은 우리가 선언한 함수입니다. 서버가 정상적으로 반환되면 jsonp0 함수가 실행되고 내부의 SuccessCallback 콜백도 실행됩니다.

개선해보세요

실제 상황에서는 일반적으로 동시에 많은 jsonp 요청이 호출됩니다.

그러면 jsonp0이 우리의 요구를 충족시킬 수 있는데 왜 jsonp1, jsonp2 등의 코드가 순차적으로 쌓이는 것을 자주 볼 수 있을까요?

이는 많은 요청이 비동기적으로 이루어질 수 있기 때문입니다. jsonp 메소드가 처음 실행되면 window.jsonp0은 함수 A입니다. 이때 js 파일이 로드됩니다. js가 로드되지 않으면 jsonp 메소드가 다시 호출됩니다. 기능 B. 그런 다음 두 개의 j가 로드된 후 두 번째 콜백이 실행됩니다.

따라서 콜백 이름에 구분을 두어야 하며, 축적은 그 요구를 충족시킬 수 있습니다.

코드 수정:

var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback) {
 var jsId = 'jsonp' + jsonpCounter++;
 // 声明对象，需要将函数声明至全局作用域
 window[jsId] = function (data) {
  successCallback(data);
  if (completeCallback) completeCallback();
  clean();
 }
 // 创建script标签，并将url后加上callback参数
 var 
  script = document.createElement('script')
  , url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=' + jsId
 ;
 script.src = url;
 document.head.parentNode.insertBefore(script, document.head);
 // 等到script加载完毕以后，就会自己执行
 //在执行完我们这个方法以后，会有很多script标签出现在head之前，我们需要手动的删除掉他们。
 function clean () {
  script.parentNode.removeChild(script);
  window[jsId] = function(){};
 }
}

누적 및 정리를 추가한 후 처리해야 할 또 다른 중요한 사항이 있는데, 바로 오류 콜백입니다. 일반적으로 jsonp를 요청할 때 시간 초과를 설정합니다. 이 시간이 초과되면 시간 초과 예외가 발생합니다.

다음과 같이 구현되었습니다:

var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback, timeout) {
 // 略去上面写过的代码
 var 
  timeout = timeout || 10000
  , timer
 ;
 if (timeout) {
  timer = setTimeout(function () {
   if (errorCallback) {
    errorCallback(new Error('timeout'));
   }
   clean();
  }, timeout)
 }
 function clean () {
  script.parentNode.removeChild(script);
  window[jsId] = function(){};
  if (timer) clearTimeout(timer);
 }
}

이러한 방식으로 jsonp의 모든 기능은 기본적으로 완성되며, 나머지 기능은 완전한 jsonp 메서드로 간주되기 위해 일부 호환 가능한 수정이 필요할 수 있습니다.

REFER

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue-router 구성 요소 간에 매개 변수를 전달하는 방법

Vue.js 모바일 구성 요소 라이브러리를 사용하는 방법

위 내용은 JSONP의 구현 원리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!