Maison >interface Web >js tutoriel >Explication détaillée des principes JSONP et analyse de cas

Explication détaillée des principes JSONP et analyse de cas

php中世界最好的语言original: 2018-04-25 09:32:531826parcourir

Cette fois, je vais vous apporter une explication détaillée des principes JSONP et de l'analyse de cas. Quelles sont les précautions pour l'explication détaillée des principes JSONP et l'analyse de cas. Ce qui suit est un cas pratique, prenons un. regarder.

À l'ère du Web2.0, l'utilisation compétente d'ajax est une compétence nécessaire pour tout ingénieur de siège front-end. Cependant, en raison des restrictions du navigateur, Ajax n'autorise pas la communication entre domaines.

JSONP est la solution courante actuelle pour la communication inter-domaines.

Bien qu'en jquery, nous puissions appeler jsonp en définissant le dataType de $.ajax sur jsonp, il n'y a aucune relation entre les principes d'implémentation de jsonp et ajax. jsonp utilise principalement un script pour créer des liens vers des URL distantes afin d'implémenter des requêtes inter-domaines. Par exemple :

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

callback définit un nom de fonction et le serveur distant transfère les paramètres en appelant la fonction spécifiée et en transmettant les paramètres.

Après avoir recherché de nombreux articles sur Internet, leurs méthodes de mise en œuvre sont trop simples et nécessitent plus de modifications pour une application pratique. J'ai encapsulé ici un objet qui peut être directement utilisé dans des opérations réelles.

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

Le processus de mise en œuvre est essentiellement écrit dans les commentaires, vous pouvez le lire vous-même. La méthode d'appel est fondamentalement la même que celle de jQuery. Par exemple :

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

Bien sûr, vous pouvez l'écrire comme ceci :

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

Quant à l'implémentation côté serveur, elle est relativement simple. Prenons PHP comme exemple : <.>

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

Quelques explications complémentaires sur les similitudes et différences entre ajax et jsonp :

1. Les deux technologies ajax et jsonp" look. " très similaire en termes de méthodes d'appel. , le but est le même, elles sont de demander une URL, puis de traiter les données renvoyées par le serveur, donc jquery et ext et d'autres frameworks encapsulent jsonp comme une forme d'ajax ;

2. Mais ajax et jsonp sont en fait des choses essentiellement différentes. Le cœur d'ajax est d'obtenir du contenu autre que cette page via XmlHttpRequest, tandis que le cœur de jsonp est d'ajouter dynamiquement la balise