Maison  >  Article  >  interface Web  >  Parlez brièvement des compétences json cross-domain_javascript

Parlez brièvement des compétences json cross-domain_javascript

WBOY
WBOYoriginal
2016-05-16 15:10:541495parcourir

Cet article est principalement dû au fait que j'ai déjà entendu d'autres parler de json cross-domain et cross-domain, mais je suis toujours confus et je ne sais qu'une chose. Alors, en colère, j'ai lu diverses informations et découvert s'il y en avait. Quelque chose n'était pas correct, veuillez me corriger ^_^

Tout d'abord, comprenez que les navigateurs ont une restriction de sécurité très importante, qui est la politique de même origine : les scripts clients de différents domaines ne peuvent pas lire les ressources les uns des autres sans autorisation explicite. Interdomaine signifie différentes sources ~

Pour faire simple, tant que le protocole, le port et le nom de domaine sont différents, c'est cross-domain !

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.

Solution :

1. Utilisez jsonp pour résoudre les problèmes inter-domaines : (uniquement pour les requêtes GET)

Principe de mise en œuvre : La balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a n'est pas limitée par la politique de même origine. Elle peut charger des fichiers JavaScript de n'importe où sans nécessiter la même origine.
Donc l'idée de JSONP est que je me mets d'accord sur un nom de fonction avec le serveur, et lorsque je demande un fichier, le serveur renvoie un morceau de JavaScript. Ce JavaScript appelle la fonction sur laquelle nous nous sommes mis d'accord et transmet les données en tant que paramètres. Par une très grande coïncidence (pas vraiment), le format de données de JSON est exactement le même que le format des objets dans le langage JavaScript. Cet objet peut donc être utilisé directement dans la fonction sur laquelle nous nous sommes mis d'accord.

Utilisez le code JavaScript pour résoudre

  var eleScript = document.createElement("script"); 
  eleScript.type = "text/javascript"; 
  eleScript.src = "http://example2.com/getinfo.php"; 
  document.getElementsByTagName("HEAD")[0].appendChild(eleScript);

Utilisez jquery pour résoudre

 $.ajax({ 
    url: http://跨域的dns/document!searchJSONResult.action, 
    type: "GET", 
    dataType: 'jsonp',   //主要是这里和原来的json改变了!
    jsonp: 'jsoncallback', 
 })

2. Utilisez la méthode window.postMessage de HTML5 pour transmettre des données entre domaines (uniquement compatible avec IE8+, FireFox, Chrome, Opera et autres navigateurs)

La méthode window.postMessage(message,targetOrigin) est une fonctionnalité nouvellement introduite de HTML5. Vous pouvez l'utiliser pour envoyer des messages à d'autres objets fenêtre, que l'objet fenêtre appartienne à la même origine ou à des origines différentes.

--------------------- Présentons ces deux solutions pour l'instant... En fait il y en a beaucoup d'autres, je les ajouterai une par une plus tard-- ----------- ----

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn