Detaillierte Erläuterung der JSONP-Prinzipien und Fallanalyse

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der JSONP-Prinzipien und eine Fallanalyse geben sehen. Im Web2.0-Zeitalter ist der kompetente Umgang mit Ajax eine notwendige Fähigkeit für jeden Front-End-Belagerungsingenieur. Aufgrund von Browsereinschränkungen erlaubt Ajax jedoch keine domänenübergreifende Kommunikation.

JSONP ist die aktuelle Mainstream-Lösung für die domänenübergreifende Kommunikation.

Obwohl wir in JQuery JSONP aufrufen können, indem wir den Datentyp von $.ajax auf JSONP setzen, gibt es keine Beziehung zwischen den Implementierungsprinzipien von JSONP und Ajax. jsonp verwendet hauptsächlich Skripte, um eine Verknüpfung zu Remote-URLs herzustellen und domänenübergreifende Anforderungen zu implementieren. Beispiel:

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

callback definiert einen Funktionsnamen und der Remote-Server überträgt Parameter, indem er die angegebene Funktion aufruft und die Parameter übergibt.

Nachdem ich viele Artikel im Internet durchsucht habe, sind ihre Implementierungsmethoden zu einfach und erfordern mehr Modifikationen für die praktische Anwendung. Ich habe hier ein Objekt gekapselt, das direkt im tatsächlichen Betrieb verwendet werden kann.

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);
}
}
};

Der Umsetzungsprozess steht grundsätzlich in den Kommentaren, du kannst ihn selbst nachlesen. Die aufrufende Methode ist grundsätzlich dieselbe wie bei jQuery. Zum Beispiel:

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

Natürlich können Sie es so schreiben:

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

Was die serverseitige Implementierung betrifft, ist sie relativ einfach. Nehmen Sie PHP als Beispiel:

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

Ein paar zusätzliche Erklärungen zu den Ähnlichkeiten und Unterschieden zwischen Ajax und JSONP: 1. Die beiden Technologien Ajax und JSONP „sehen“ sich in ihrer Hinsicht sehr ähnlich von aufrufenden Methoden und haben den gleichen Zweck. Sie fordern eine URL an und verarbeiten dann die vom Server zurückgegebenen Daten. Daher kapseln Frameworks wie jsonp eine Form von Ajax jsonp sind tatsächlich etwas anderes. Der Kern von Ajax besteht darin, nicht zu dieser Seite gehörende Inhalte über XmlHttpRequest abzurufen, während der Kern von JSONP darin besteht, das