JSONP 원칙 및 사례 분석에 대한 자세한 설명

이번에는 JSONP 원리 및 사례 분석에 대한 자세한 설명을 가져오겠습니다. JSONP 원리 및 사례 분석에 대한 자세한 설명 중 주의 사항은 다음과 같습니다.

web2.0 시대에 Ajax를 능숙하게 사용하는 것은 모든 프론트 엔드 공성 엔지니어에게 필수 기술입니다. 그러나 브라우저 제한으로 인해 Ajax는 도메인 간 통신을 허용하지 않습니다.

JSONP는 현재 도메인 간 통신을 위한 주류 솔루션입니다.

jquery에서는 $.ajax의 dataType을 jsonp로 설정하여 jsonp를 호출할 수 있지만 jsonp의 구현 원칙과 ajax 사이에는 아무런 관계가 없습니다. jsonp는 주로 스크립트를 사용하여 원격 URL에 연결하여 도메인 간 요청을 구현합니다. 예:

<script src="http://jsonp.js?callback=xxx"></script>

callback은 함수 이름을 정의하고 원격 서버는 지정된 함수를 호출하고 매개변수를 전달하여 매개변수를 전송합니다.

인터넷에서 많은 기사를 검색했는데 구현 방법이 너무 간단하고 실제 적용을 위해서는 더 많은 수정이 필요합니다. 여기에는 실제 작업에 직접 사용할 수 있는 개체가 포함되어 있습니다.

var JSONP = {
// 获取当前时间戳
now: function() {
return (new Date()).getTime();
},
// 获取16位随机数
rand: function() {
return Math.random().toString().substr(2);
},
// 删除节点元素
removeElem: function(elem) {
var parent = elem.parentNode;
if(parent && parent.nodeType !== 11) {
parent.removeChild(elem);
}
},
// url组装
parseData: function(data) {
var ret = "";
if(typeof data === "string") {
ret = data;
}
else if(typeof data === "object") {
for(var key in data) {
ret += "&" + key + "=" + encodeURIComponent(data[key]);
}
}
// 加个时间戳，防止缓存
ret += "&_time=" + this.now();
ret = ret.substr(1);
return ret;
},
getJSON: function(url, data, func) {
// 函数名称
var name;
// 拼装url
url = url + (url.indexOf("?") === -1 ? "?" : "&") + this.parseData(data);
// 检测callback的函数名是否已经定义
var match = /callback=(\w+)/.exec(url);
if(match && match[1]) {
name = match[1];
} else {
// 如果未定义函数名的话随机成一个函数名
// 随机生成的函数名通过时间戳拼16位随机数的方式，重名的概率基本为0
// 如:jsonp_1355750852040_8260732076596469
name = "jsonp_" + this.now() + '_' + this.rand();
// 把callback中的?替换成函数名
url = url.replace("callback=?", "callback="+name);
// 处理?被encode的情况
url = url.replace("callback=%3F", "callback="+name);
}
// 创建一个script元素
var script = document.createElement("script");
script.type = "text/javascript";
// 设置要远程的url
script.src = url;
// 设置id，为了后面可以删除这个元素
script.id = "id_" + name;
// 把传进来的函数重新组装，并把它设置为全局函数，远程就是调用这个函数
window[name] = function(json) {
// 执行这个函数后，要销毁这个函数
window[name] = undefined;
// 获取这个script的元素
var elem = document.getElementById("id_" + name);
// 删除head里面插入的script，这三步都是为了不影响污染整个DOM啊
JSONP.removeElem(elem);
// 执行传入的的函数
func(json);
};
// 在head里面插入script元素
var head = document.getElementsByTagName("head");
if(head && head[0]) {
head[0].appendChild(script);
}
}
};

구현 과정은 기본적으로 댓글에 적혀 있으니 직접 읽어보시면 됩니다. 호출 방법은 기본적으로 jQuery와 동일합니다. 예:

var data = {
from: "北京",
count: 27,
output: "json",
callback: "?"
}
JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp", data, function(json) {console.log(json)});

물론 다음과 같이 작성할 수 있습니다.

JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp?from=北京&count=27&output=json&callback=?", null, function(json) {console.log(json)});

서버 구현은 비교적 간단합니다. PHP를 예로 들어 보겠습니다.

$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';
echo $callback.'( .json_encode( $data ).')';

Ajax 및 jsonp. ajax와 jsonp의 유사점과 차이점:

1. Ajax와 jsonp는 호출 방법 측면에서 매우 유사해 보이고 동일한 목적을 갖는 두 가지 기술입니다. 둘 다 URL을 요청한 다음 반환된 데이터를 처리합니다. 따라서 jquery 및 ext와 같은 프레임워크는 모두 jsonp를 사용합니다. Ajax 형식은 캡슐화되어 있습니다.

2. 그러나 ajax와 jsonp는 본질적으로 다릅니다. ajax의 핵심은 XmlHttpRequest를 통해 이 페이지 이외의 콘텐츠를 얻는 것이고, jsonp의 핵심은 서버에서 제공하는 js 스크립트를 호출하기 위해