jsonp 구현 원리 분석

1. jsonp의 구현 원칙은 스크립트 태그를 사용하여 리소스에 대한 도메인 간 액세스 목적을 달성하기 위해 다양한 소스 리소스의 특성을 얻는 것입니다. 구체적인 동작은 다음과 같습니다.

1. 스크립트 태그를 생성하고 src 속성에 요청 주소를 쓴 다음 헤드 태그에 스크립트 외부 링크를 삽입합니다.

2. 콜백 함수 콜백을 선언합니다. 함수 이름은 다음과 같습니다. 요청 주소와 일치 ;

3. 요청 주소의 내용은 json 객체를 매개 변수로 사용하는 실행 함수 콜백입니다.

4. 스크립트 리소스가 로드되면 콜백이 실행을 시작하고 json 데이터를 출력합니다. .

5. jsonp는 실제로 json 패딩이고, json 데이터를 감싸는 함수가 패딩입니다.

// 简单的mock jsonpvar mockJsonp = function(url) {var ele = document.createElement('script');var head = document.getElementsByTagName('head')[0];
    ele.src = url;
    head.appendChild(ele);
}
mockJsonp('./index.js');function callback(data){
    console.log(data);
}// index.jscallback("name": "xxx", "age": "20");

2. jq의 ajax 요청 데이터 형식이 jsonp이면 다음 작업이 발생합니다. 먼저 스크립트 태그를 생성한 다음 onload 콜백을 등록하고 마지막으로 생성된 스크립트 태그를 여기에 삽입합니다. 완료 그 후 onload 콜백이 트리거되고 이전에 삽입된 스크립트 태그가 제거됩니다. 코드 callback(200, "success")는 실제로 ajax의 jsonp를 성공적으로 트리거하는 성공 콜백 함수입니다. 콜백 함수는 실제로 완료 함수입니다.

3. 교차 도메인 jsonp는 get 요청만 가능합니다. jq가 jsonp 교차 도메인을 캡슐화하면 get 또는 post를 지정하든 get 요청으로 대체됩니다.

4. 기타 크로스 도메인 방법

1. cors(Cross-Origin Resource Sharing) 크로스 도메인 리소스 공유를 서버측에서 Access-Control-Allow-Origin으로 설정하고 브라우저에서 해당 설정을 감지하면 액세스

2. document.domain을 수정하고 하위 도메인과 기본 도메인을 동일한 기본 도메인

3. window.name으로 설정합니다. 각 페이지에는 window.name에 대한 읽기 및 쓰기 권한이 있습니다. , window.name은 창에 의해 로드된 모든 페이지에서 유지됩니다.

4. window.postMessage

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