Analyse des principes interdomaines JSONP et introduction à la mise en œuvre_compétences javascript-js tutoriel-php.cn

JavaScript est une technologie de script dynamique frontale souvent utilisée dans le développement Web. En JavaScript, il existe une restriction de sécurité très importante appelée « Same-Origin Policy ». Cette politique impose des restrictions importantes sur le contenu de la page auquel le code JavaScript peut accéder, c'est-à-dire que JavaScript ne peut accéder qu'au contenu du même domaine que le document qui le contient.

La stratégie de sécurité JavaScript est particulièrement importante lors de la programmation multi-iframe ou multi-fenêtres, ainsi que de la programmation Ajax. Selon cette politique, le code JavaScript contenu dans les pages sous baidu.com ne peut pas accéder au contenu des pages sous le nom de domaine google.com ; même les pages situées entre différents sous-domaines ne peuvent pas accéder entre elles via le code JavaScript. L'impact sur Ajax est que les requêtes Ajax implémentées via XMLHttpRequest ne peuvent pas soumettre de requêtes à différents domaines. Par exemple, les pages sous abc.example.com ne peuvent pas soumettre de requêtes Ajax à def.example.com, etc.

Cependant, lors de la programmation frontale approfondie, des opérations inter-domaines sont inévitablement nécessaires. À l'heure actuelle, la « même politique d'origine » semble trop stricte. La requête GET inter-domaines JSONP est une solution courante. Examinons comment l'inter-domaine JSONP est implémenté et discutons du principe de l'inter-domaine JSONP.

La méthode de soumission de requêtes HTTP à différents domaines en créant des nœuds <script> dans la page est appelée JSONP. Cette technologie peut résoudre le problème de la soumission de requêtes Ajax entre domaines. Le principe de fonctionnement de JSONP est le suivant : En supposant qu'une requête GET soit soumise à http://example2.com/getinfo.php dans la page http://example1.com/index.php, nous peut mettre ce qui suit Le code JavaScript est placé dans la page http://example1.com/index.php à implémenter : <div class="codetitle"> <a style="CURSOR: pointer" data="93108" class="copybut" id="copybut93108" onclick="doCopy('code93108')">Copiez le code </a> Le code est le suivant :</div> <div class="codebody" id="code93108"> var eleScript= document.createElement("script"); eleScript.type = "text/javascript" eleScript.src = "http://example2.com /getinfo.php"; document.getElementsByTagName("HEAD")[0].appendChild(eleScript); </div> Lorsqu'une requête GET est effectuée à partir de http://example2.com/getinfo.php Lors du retour, vous pouvez renvoyer un morceau de code JavaScript, qui sera automatiquement exécuté et pourra être utilisé pour appeler une fonction de rappel dans le http://example1.com/index.php page. L'avantage de JSONP est qu'il n'est pas limité par la politique de même origine comme la requête Ajax implémentée par l'objet XMLHttpRequest ; il a une meilleure compatibilité et peut s'exécuter dans des navigateurs plus anciens sans avoir besoin du support XMLHttpRequest ou ActiveX. ; et une fois la demande terminée, le résultat peut être renvoyé en appelant le rappel. Les inconvénients de JSONP sont les suivants : 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 de la façon dont deux pages de domaines différents interagissent avec les uns les autres. Problèmes lors des appels JavaScript. Autre exemple : <div class="codetitle"> <a style="CURSOR: pointer" data="84822" class="copybut" id="copybut84822" onclick="doCopy('code84822')">Copier le code </a> Le code est le suivant : </div> <div class="codebody" id="code84822"> var qsData = {' searchWord':$("#searchWord").attr("value"),'currentUserId': $("#currentUserId").attr("value"),'conditionBean.pageSize':$( "# pageSize").attr("value")}; $.ajax({ async:false, url : http://cross-domain dns/document!searchJSONResult.action, tapez : "GET", dataType : 'jsonp', jsonp : 'jsoncallback', data : qsData, timeout : 5000, beforeSend : function(){ //Cette méthode n'est pas déclenchée en mode jsonp. La raison peut être que si dataType est spécifié comme jsonp, ce n'est plus un événement ajax }, success: function (json) {//Client jquery est une fonction de rappel prédéfinie, après avoir obtenu avec succès les données json sur le serveur inter-domaines, cette fonction de rappel sera exécutée dynamiquement if(json.actionErrors.length!=0){ alert(json.actionErrors) ; } genDynamicContent(qsData,type,json); }, complete: function(XMLHttpRequest, textStatus){ $.unblockUI({ fadeOut: 10 }); >}, erreur : function(xhr){ //Cette méthode n'est pas déclenchée en mode jsonp La raison peut être que si dataType est spécifié comme jsonp, ce n'est plus un événement ajax /. /Request errorhandling alert(" Request error (please check the relevant network status.)"); } } Parfois, vous verrez également cet écrit : $. getJSON("http://cross-domain dns/document!searchJSONResult.action?name1=" value1 "&jsoncallback=?", function(json){ if(json.property name==value){ //Execute code } }); </div>Cette méthode est en fait une encapsulation avancée de l'API $.ajax({..}) dans l'exemple ci-dessus. Certains des paramètres sous-jacents de l'API $.ajax sont encapsulés et invisibles. De cette façon, jquery sera assemblé dans la requête d'obtention d'url suivante : <div class="codetitle"> <a style="CURSOR: pointer" data="62796" class="copybut" id="copybut62796" onclick="doCopy('code62796')">Copier le code </a> Le code est le suivant : <div class="codebody" id="code62796"> http: // domain dns / document! SearchjsonResult.action? & JsonCallback = jsonp1236827957501 & _ = 1236828192549 & searchword = Utiliser case¤tuserid = 5351 & conditionBean.pageSize = 15 </div> dans & conditionBean.pageSize = 15 dans & ConditionBean.PageSize = 15 fin de réponse (http://cross-domain dns/document!searchJSONResult.action), via jsoncallback = request.getParameter("jsoncallback") pour obtenir le nom de la fonction js à rappeler ultérieurement à la fin de jquery : jsonp1236827957501. le contenu de la réponse est un script Tags : "jsonp1236827957501("tableau json généré en fonction des paramètres de la requête"); jquery chargera et appellera dynamiquement cette balise js via la méthode de rappel : jsonp1236827957501 (tableau json) ; -échange de données de domaine. Principe de JSONP Le principe le plus fondamental de JSONP est d'ajouter dynamiquement une balise <script>, et l'attribut src de la balise de script n'a aucune restriction inter-domaines. De cette façon, cette méthode cross-domain n'a rien à voir avec le protocole ajax XmlHttpRequest. De cette façon, le "problème inter-domaines jQuery AJAX" est devenu une fausse proposition. Le nom de la méthode jquery $.ajax est trompeur. Si définie sur dataType : 'jsonp', cette méthode $.ajax n'a rien à voir avec ajax XmlHttpRequest, et sera remplacée par le protocole JSONP. JSONP est un protocole non officiel qui permet d'intégrer des balises Script côté serveur et de les renvoyer au client, permettant un accès inter-domaines sous forme de rappels javascript. JSONP est JSON avec rembourrage. En raison des restrictions de la politique de même origine, XmlHttpRequest est uniquement autorisé à demander des ressources à la source actuelle (nom de domaine, protocole, port). Si nous voulons faire une requête inter-domaine, nous pouvons faire une requête inter-domaine en utilisant la balise de script html et renvoyer le code de script à exécuter dans la réponse, où l'objet javascript peut être transmis directement à l'aide de JSON. Cette méthode de communication inter-domaines est appelée JSONP. Fonction jsonCallback jsonp1236827957501(....) : Elle est enregistrée par le client du navigateur Après avoir obtenu les données json sur le serveur cross-domain, le processus d'exécution de la fonction de rappel Jsonp. est la suivante : Enregistrez d'abord un rappel (tel que : 'jsoncallback') sur le client, puis transmettez le nom du rappel (tel que : jsonp1236827957501) au serveur. Remarque : Une fois que le serveur a obtenu la valeur de rappel, il doit utiliser jsonp1236827957501(...) pour inclure le contenu json à afficher. À ce stade, les données json générées par le serveur peuvent être correctement reçues par le client. Utilisez ensuite la syntaxe javascript pour générer une fonction. Le nom de la fonction est la valeur jsonp1236827957501 du paramètre passé 'jsoncallback' Enfin, placez les données json directement dans la fonction en tant que paramètre. js et le renvoie au client. Le navigateur client analyse la balise de script et exécute le document javascript renvoyé. À ce stade, les données du document javascript sont transmises en tant que paramètre à la fonction de rappel prédéfinie par le client (telle que jquery $.ajax dans le fichier). exemple ci-dessus) () méthode encapsulée dans le succès : fonction (json)). On peut dire que la méthode jsonp est en principe cohérente avec <script src="http://cross-domain/...xx.js"></script> largement pour réaliser un échange de données entre domaines). JSONP est un comportement d'injection de script, il présente donc certains risques de sécurité.
Alors pourquoi jquery ne prend-il pas en charge la publication sur plusieurs domaines ?

Bien que l'utilisation de post pour générer dynamiquement une iframe puisse atteindre l'objectif de publication inter-domaines (c'est ainsi qu'un expert en js a patché jquery1.2.5), il s'agit d'une méthode relativement extrême et n'est pas recommandée.
On peut également dire que la méthode get inter-domaines est légale et que la méthode post est considérée comme illégale du point de vue de la sécurité. Il est préférable de ne pas adopter la mauvaise approche en dernier recours.

La demande d'accès inter-domaines côté client semble avoir attiré l'attention du w3c. Selon les informations, la norme html5 WebSocket prend en charge l'échange de données entre domaines et devrait également être une solution facultative pour les échanges inter-domaines. -échange de données de domaine à l'avenir. Prenons un exemple super simple :

Copiez le code

 Le code est le suivant :

 
  
 
Test Jsonp ;script type= "text/javascript"> 
function jsonpCallback(result) 
{ 
alert(result.msg); 
 script type=" text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"> 
 Parmi eux, jsonCallback est la fonction enregistrée par le client pour rappeler après avoir obtenu les données json sur le serveur cross-domain. http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback Cette URL est l'interface permettant aux serveurs inter-domaines d'obtenir des données json. Le paramètre est le nom de la fonction de rappel. Le format renvoyé est : jsonpCallback({msg:'this. is json data'}) 

 Décrivez brièvement le principe et le processus : enregistrez d'abord un rappel sur le client, puis transmettez le nom du rappel au serveur. À ce stade, le serveur génère d'abord des données json. Utilisez ensuite la syntaxe javascript pour générer une fonction, et le nom de la fonction est le paramètre passé jsonp. Enfin, les données json sont placées directement dans la fonction en tant que paramètre, générant ainsi un document de syntaxe js et le renvoyant au client. 

Le navigateur client analyse la balise de script et exécute le document javascript renvoyé. À ce moment, les données sont transmises en paramètre à la fonction de rappel prédéfinie par le client. (Exécution dynamique de la fonction de rappel)