Explication détaillée des principes et des cas de mise en œuvre de JSONP

Cette fois, je vais vous apporter une explication détaillée des principes et des cas de mise en œuvre de JSONP. Quelles sont les précautions pour la mise en œuvre de JSONP. Voici des cas réels, jetons un coup d'œil.

Les problèmes inter-domaines ont toujours été un problème courant dans le front-end Chaque fois que nous parlons de multi-domaines, la première technologie qui émerge doit être JSONP

D'après ma compréhension, JSONP est. pas ajax, il s'agit d'insérer une balise de script dans le document, de créer une méthode _callback, d'exécuter la méthode _callback via le serveur et de transmettre certains paramètres

La limitation de JSONP est que parce que la balise de script est insérée, les paramètres ne peuvent être transmis que via l'URL, ils ne peuvent donc satisfaire que la requête get. Surtout lors de l'utilisation de la méthode ajax de jQuery, même si le type : 'POST' est défini, tant que dataType : 'jsonp' est défini, le La requête GET sera automatiquement utilisée lors d'une requête

Implémenter la logique

étape 1 : Créer la méthode _callback (la balise de script et la méthode _callback peuvent être supprimées dans _callback)

étape 2 : Insérer une balise de script

étape 3 : Le serveur génère js

implémentation :

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

Le comportement du navigateur est de insérez la balise de script, exécutez le code js et supprimez la balise de script

Le code d'implémentation ne prend pas en compte la compatibilité et le problème de la génération d'URL après la transmission des données.

Laissez-moi vous expliquer les avantages et les inconvénients de jsonp :

Les avantages de JSONP sont : Ce n'est pas comme XMLHttpRequest objet est soumise à la même politique d'origine ; elle a une meilleure compatibilité et peut s'exécuter dans les navigateurs plus anciens sans le support de XMLHttpRequest ou d'ActiveX et une fois la requête terminée, elle peut renvoyer ; le résultat en appelant le rappel.

Les inconvénients de JSONP sont : Il ne prend en charge que les requêtes GET mais pas les autres types de requêtes HTTP telles que POST, il ne prend en charge que les requêtes HTTP inter-domaines et ne peut pas résoudre le problème des différents domaines ; . Comment effectuer des appels JavaScript entre deux pages.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Un résumé des cas utilisant JSONP

Comment utiliser json comme paramètre dans js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!