JSONP 원리 에 기초 한 해석(추천)

머리말
제 가 일 한 후에 접 한 첫 번 째 항목 은 바로 앞 뒤 가 분 리 된 것 입 니 다.전단 정적 파일 은 독립 된 도 메 인 이름 이 있 고 인 터 페 이 스 를 통 해 데 이 터 를 얻어 렌 더 링 등 작업 을 합 니 다.
도 메 인 을 뛰 어 넘 는 방법 은 더 이상 말 할 필요 가 없고 마음대로 검색 하면 많 지만 jsonp 와 CORS 외 에 가장 많이 사용 된다.jsonp 는 전단 에 중심 을 두 고 전단 Hack 기법 이 라 고 할 수 있 습 니 다.CORS 는 백 엔 드 보다 중요 하고 서버 에서 설정 해 야 할 부분 이 많 습 니 다.
이 편 은 jsonp 의 실현 원 리 를 해석 해 보 자.
기본 원리
기본 원 리 는 쉽게 설명 할 수 있 습 니 다.html 페이지 에서 일부 라벨 은 도 메 인 간 의 제한 을 받 지 않 습 니 다.예 를 들 어 img,script,link 등 입 니 다.만약 에 우리 가 필요 로 하 는 데 이 터 를 js 파일 에 넣 으 면 우 리 는 브 라 우 저 와 같은 소스 의 제한 을 돌파 할 수 있 습 니 다.
스 크 립 트 탭 만 들 기
에서 동적 스 크 립 트 요 소 를 언급 했 습 니 다.저 자 는 다음 과 같이 썼 습 니 다.
1.파일 은 이 요소 가 페이지 에 추 가 될 때 다운로드 하기 시작 합 니 다.이 기술 의 중점 은 언제 다운 로드 를 시작 하 든 파일 의 다운로드 와 실행 과정 이 페이지 의 다른 프로 세 스 를 막 지 않 는 다 는 것 이다.
2.동적 스 크 립 트 노드 를 사용 하여 파일 을 다운로드 할 때 돌아 오 는 코드 는 보통 즉시 실 행 됩 니 다.(Firefox 와 Oprea 를 제외 하고 모든 동적 스 크 립 트 노드 가 실 행 될 때 까지 기 다 립 니 다.)스 크 립 트 가 실 행 될 때 이 메커니즘 은 정상적으로 작 동 합 니 다.
인용 1 은 JSONP 요청 시 메 인 스 레 드 를 막 지 않 을 것 을 보증 합 니 다.인용 2 는 JSONP 코드 가 로드 가 완료 되면 즉시 실행 할 때 오류 가 발생 하지 않도록 보증 합 니 다.
callback
서버 는 GET 요청 을 받 은 후 콜백 인자 가 있 는 지 여 부 를 판단 하고 있 으 면 되 돌아 오 는 데이터 에 방법 이름과 괄호 를 붙 여야 합 니 다.예 를 들 어 다음 과 같은 요청 을 합 니 다.

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

그러면 서버 는 다음 과 같은 내용 을 되 돌려 줍 니 다.

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

이것 은 동적 으로 불 러 온 Script 태그 에 포 함 된 내용 이기 때문에 이것 이 바로 자체 실행 코드 입 니 다.이 코드 는 하나의 함수 만 호출 되 었 습 니 다.-jsonp 0.
물론 실행 이 있 으 면 먼저 만들어 야 한다.그렇지 않 으 면 잘못 보고 할 것 이다.이 단 계 를 만 들 려 면 호출 전에 실행 해 야 합 니 다.
구체 적 인 실현 은 다음 과 같다.

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 방법의 핵심 을 완 성 했 습 니 다.이때 jsonp 0 은 우리 가 설명 한 함수 입 니 다.만약 에 서버 에서 정상적으로 전송 할 때 jsonp 0 함 수 를 실행 하고 안의 successCallback 리 셋 도 실 행 됩 니 다.
완벽 하 게 하 다
실제 상황 에서 jsonp 의 요청 이 동시에 호출 되 는 경우 가 많 습 니 다.
그렇다면 jsonp 0 이 우리 의 수 요 를 만족 시 킬 수 있 는 이상 왜 jsonp 1,jsonp 2 등 순서대로 누 적 된 코드 를 자주 볼 수 있 습 니까?
요청 이 여러 단계 로 진 행 될 수 있 기 때문이다.jsonp 방법 을 처음 실 행 했 을 때 window.jsonp 0 은 함수 A 였 습 니 다.이때 js 파일 을 불 러 오고 js 가 불 러 오지 않 은 상태 에서 jsonp 방법 을 다시 호출 했 습 니 다.이때 window.jsonp 0 은 함수 B 를 가 리 켰 습 니 다.그러면 두 번 의 js 로드 가 끝나 면 두 번 째 리 셋 을 수행 합 니 다.
그래서 우 리 는 콜백 의 이름 을 구별 처리 해 야 한다.누적 하면 수 요 를 만족 시 킬 수 있다.
코드 수정:

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
《고성능 자 바스 크 립 트》
npm 의 jsonp 구현,JSONP
이상 의 JSONP 원리 해석(추천)은 편집장 님 께 서 여러분 께 공유 해 주신 모든 내용 입 니 다.참고 해 주시 고 많은 응원 부 탁 드 리 겠 습 니 다.