Principe de mise en œuvre de JSONP

Cette fois, je vais vous présenter les principes de mise en œuvre de JSONP et quelles sont les précautions lors de l'utilisation de JSONP. Ce qui suit est un cas pratique, jetons un coup d'œil.

Le principe de mise en œuvre de JSONP

Je crois que de nombreuses personnes engagées dans la séparation front-end et back-end sont souvent exposées à JSONP. Cependant, de nombreux novices ne le savent pas. comment implémenter JSONP et son principe de mise en œuvre, cet article vous le présentera en détail. Si vous êtes intéressé, jetez-y un œil.

Principes de base

Le principe de base est facile à expliquer. Certaines balises dans les pages HTML ne sont pas soumises à des restrictions inter-domaines, comme img, script, link, etc. Si nous mettons les données dont nous avons besoin dans un fichier js, nous pouvons alors dépasser la limitation de même origine du navigateur.

Créer une balise de script

Les éléments de script dynamiques sont mentionnés dans "Haute Performance JavaScript", et l'auteur écrit :

1. Le téléchargement du fichier commence lorsque l'élément est ajouté à la page. Le point clé de cette technique est que chaque fois qu'un téléchargement est lancé, le téléchargement et l'exécution du fichier ne bloquent pas les autres processus sur la page.

2. Lorsque vous utilisez des nœuds de script dynamiques pour télécharger des fichiers, le code renvoyé sera généralement exécuté immédiatement (sauf pour Firefox et Oprea, qui attendront la fin de l'exécution de tous les nœuds de script dynamiques précédents.) Lorsque le script s'exécute, ce mécanisme fonctionne normalement. .

Quote1 garantit que le thread principal ne sera pas bloqué lors des requêtes JSONP. Quote 2 garantit qu'il n'y aura pas d'erreurs lorsque le code JSONP s'exécutera immédiatement après la fin du chargement.

rappel

Après avoir reçu la requête GET, le serveur détermine généralement s'il existe un paramètre de rappel. Si tel est le cas, il doit ajouter un nom de méthode et des parenthèses en dehors des données renvoyées. Par exemple, lancez la requête suivante :

http://www.a.com/getSomething?callback=jsonp0

Ensuite, le serveur renverra le contenu suivant :

jsonp0({code:200,data:{}})

Évidemment, puisqu'il s'agit du contenu contenu dans la balise Script chargée dynamiquement, il s'agit alors d'un morceau de code auto-exécutable, et une seule fonction de ce code est appelée - jsonp0.

Bien entendu, s’il y a exécution, il faut d’abord la créer, sinon une erreur sera signalée. Cette étape de création doit être exécutée avant l'appel.

La mise en œuvre spécifique est la suivante :

function jsonp (url, successCallback, errorCallback, completeCallback) {
 // 声明对象，需要将函数声明至全局作用域
 window.jsonp0 = function (data) {
  successCallback(data);
  if (completeCallback) completeCallback();
 }
 // 创建script标签，并将url后加上callback参数
 var 
  script = document.createElement('script')
  , url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=jsonp0'
 ;
 script.src = url;
 document.head.parentNode.insertBefore(script, document.head);
 // 等到script加载完毕以后，就会自己执行
}

Ce qui précède complète essentiellement le cœur d'une méthode jsonp. À l'heure actuelle, jsonp0 est une fonction que nous avons déclarée. Si le serveur revient normalement, la fonction jsonp0 sera exécutée et le rappel successCallback à l'intérieur sera également exécuté.

Améliorez-le

Dans les situations réelles, de nombreuses requêtes jsonp sont généralement appelées en même temps,

Alors puisque jsonp0 peut répondre à nos besoins, pourquoi voyons-nous souvent le code de jsonp1, jsonp2, etc. s'accumuler en séquence ?

En effet, de nombreuses requêtes peuvent être effectuées de manière asynchrone. Lorsque la méthode jsonp est exécutée pour la première fois, window.jsonp0 est la fonction A. À ce moment, le fichier js est chargé. Lorsque js n'est pas chargé, la méthode jsonp est à nouveau appelée. fonction B. Ensuite, une fois les deux js chargés, le deuxième rappel sera exécuté.

Il faut donc faire une distinction dans le nom du rappel, et l'accumulation peut répondre aux besoins.

Modifier le code :

var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback) {
 var jsId = 'jsonp' + jsonpCounter++;
 // 声明对象，需要将函数声明至全局作用域
 window[jsId] = function (data) {
  successCallback(data);
  if (completeCallback) completeCallback();
  clean();
 }
 // 创建script标签，并将url后加上callback参数
 var 
  script = document.createElement('script')
  , url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=' + jsId
 ;
 script.src = url;
 document.head.parentNode.insertBefore(script, document.head);
 // 等到script加载完毕以后，就会自己执行
 //在执行完我们这个方法以后，会有很多script标签出现在head之前，我们需要手动的删除掉他们。
 function clean () {
  script.parentNode.removeChild(script);
  window[jsId] = function(){};
 }
}

Après avoir ajouté l'accumulation et le nettoyage, il y a un autre point important qui doit être traité, à savoir le rappel d'erreur. Normalement, lorsque nous demandons jsonp, nous définirons un délai d'attente. Si ce délai est dépassé, une exception de délai d'attente sera levée.

La mise en œuvre est la suivante :

var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback, timeout) {
 // 略去上面写过的代码
 var 
  timeout = timeout || 10000
  , timer
 ;
 if (timeout) {
  timer = setTimeout(function () {
   if (errorCallback) {
    errorCallback(new Error('timeout'));
   }
   clean();
  }, timeout)
 }
 function clean () {
  script.parentNode.removeChild(script);
  window[jsId] = function(){};
  if (timer) clearTimeout(timer);
 }
}

De cette façon, toutes les fonctions de jsonp sont fondamentalement complétées, et le reste peut nécessiter quelques modifications compatibles pour être considéré comme une méthode jsonp complète.

RÉFÉRER

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 :

Méthodes de transmission des paramètres entre les composants vue-router

Bibliothèque de composants mobiles Vue.js Comment faire utiliser

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!