집 > 기사 > 웹 프론트엔드 > JSONP 구현 원리 및 사례에 대한 자세한 설명

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

php中世界最好的语言원래의: 2018-04-25 15:46:501450검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!