집 >웹 프론트엔드 >JS 튜토리얼 >JSONP 원칙에 따른 자세한 설명

JSONP 원칙에 따른 자세한 설명

小云云원래의: 2018-01-05 10:18:401465검색

이 글은 주로 JSONP 원칙을 기반으로 한 분석을 권장하는데, 이는 모두에게 좋은 참고 가치가 있습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

머리말

제가 일을 시작하고 처음 접한 프로젝트는 프런트엔드와 백엔드의 분리입니다. 프런트엔드 정적 파일은 자체적인 도메인 이름을 가지며, 인터페이스를 통해 데이터를 얻습니다. 렌더링 및 기타 작업을 위해.

크로스 도메인 방법에 대해 자세히 설명할 필요는 없습니다. 검색하면 많이 찾을 수 있지만 가장 일반적으로 사용되는 방법은 jsonp 및 CORS입니다. jsonp는 프론트엔드에 중점을 두는데, 이는 프론트엔드 Hack 스킬이라 할 수 있습니다. 백엔드보다 CORS가 더 중요하고, 서버 구성도 더 많이 필요합니다.

이 글에서는 jsonp의 구현 원리를 분석합니다.

기본 원리

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

스크립트 태그 만들기

동적 스크립트 요소는 "고성능 JavaScript"에 언급되어 있습니다.

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

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

인용문 1은 JSONP 요청 시 메인 스레드가 차단되지 않음을 보장합니다. 인용문 2는 JSONP 코드가 로딩 직후 실행될 때 오류가 발생하지 않음을 보장합니다.

callback

서버는 일반적으로 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

"고성능 JavaScript"

npm, JSONP의 jsonp 구현

JSONP 원칙에 따른 자세한 설명

관련 기사