JSONP 구현 원리 및 사례에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-04-25 15:46:50
원래의
1414명이 탐색했습니다.

이번에는 JSONP 구현 원리와 사례에 대해 자세히 설명하겠습니다. JSONP 구현의 주의 사항은 무엇인가요?

크로스 도메인 문제는 항상 프론트엔드에서 흔히 발생하는 문제였습니다. 크로스 도메인에 대해 이야기할 때마다 가장 먼저 떠오르는 기술은 JSONP입니다.

제가 이해하기로는 JSONP는 ajax가 아니라 script 태그를 문서에 추가하고, _callback 메소드를 생성하고, 서버를 통해 _callback 메소드를 실행하고, 일부 매개변수를 전달합니다. JSONP의 한계는 스크립트 태그가 삽입되기 때문에 매개변수가 URL을 통해서만 전달될 수 있다는 것입니다. 특히 jQuery의 ajax 메서드의 경우 type: 'POST'가 설정되어 있어도 dataType: 'jsonp'가 설정되어 있으면 요청 중에 GET 요청이 자동으로 사용됩니다

로직 구현

1단계: _callback 메소드 생성(_callback 스크립트 태그 및 _callback 메소드는 삭제 가능)

2단계: 스크립트 태그 삽입

3단계: 서버에서 js를 출력

구현:

var requestJsonp = function (opt) {
var funName, script;
/*
* step1 创建_callback方法
*/ 
//_callback函数名
funName = '_cb' + (Math.random() * 1000000);
//创建_callback方法
window[funName] = function (data) {
if (typeof opt.success == 'function') {
opt.success(data);
}
window[funName] = null;
delete window[funName];
document.body.removeChild(script);
script = null;
};
/*
* step2 插入script标签
*/
script = document.createElement('script');
script.type = 'text/javascript';
script.src = opt.url + (opt.url.indexOf('?') > -1 ? '&' : '?') + '_callback=' + funName;
document.body.appendChild(script);
/*
* step3 服务器输出js
* 服务器应接受url参数中_callback的值,作为函数名执行输出js
* 类似输出
* _callback({"name":"jsonp","description":"jsonp test"});
*/ 
/*
* 处理error
*/
script.addEventListener('error', function () {
window[funName] = null;
delete window[funName];
if (typeof opt.error == 'function') {
opt.error();
}
document.body.removeChild(script);
script = null;
});
};
requestJsonp({
url: 'http://www.url.org?tid=Jsx2',
success: function (data) {
console.log(data);
},
error: function () {
console.log('request error!');
}
});
로그인 후 복사
The 브라우저의 동작은 스크립트 태그를 삽입하고, js 코드를 실행하고, 스크립트 태그를 삭제하는 것입니다.

구현 코드는 호환성과 데이터 전달 후 URL 생성 문제를 고려하지 않습니다.

jsonp의 장점과 단점을 알려드리겠습니다.

JSONP의 장점은 다음과 같습니다.

XMLHttpRequestobject에 의해 구현된 Ajax 요청과 같은 동일한 출처 정책에 의해 제한되지 않습니다. 더 좋고, 이전 브라우저에서 실행할 수 있고, XMLHttpRequest 또는 ActiveX 지원이 필요하지 않으며, 요청이 완료된 후 콜백을 호출하여 결과를 반환할 수 있습니다.

JSONP의 단점은 다음과 같습니다.

GET 요청만 지원하고 POST와 같은 다른 유형의 HTTP 요청은 지원하지 않습니다. 교차 도메인 HTTP 요청만 지원하며 서로 다른 도메인의 두 페이지 간에 JavaScript를 수행하는 방법에 대한 문제를 해결할 수 없습니다. 전화 문제. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JSONP를 사용한 사례 요약


js에서 json을 매개변수로 사용하는 방법

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!