Comprendre en un coup d'œil : explication détaillée de jsonp_jquery

Je crois que tout le monde utilise beaucoup json. Je n'ai jamais eu l'occasion d'utiliser jsonp, mais je le vois souvent, je sais seulement qu'il est "utilisé pour le cross-domain" et je ne sais jamais ce que c'est. J'ai enfin compris aujourd'hui. Voyons étape par étape ce qu'est jsonp.

Politique de même origine

Tout d'abord, pour des raisons de sécurité, les navigateurs disposent d'un mécanisme appelé politique de même origine. La politique de même origine empêche les documents ou les scripts chargés à partir d'une source d'obtenir ou de définir les attributs des documents chargés à partir d'une autre source. Il semble que je ne sache pas ce que cela signifie, mais vous le saurez après l’avoir pratiqué.

1. Créez deux pages Web à volonté

Un port est le 2698 et l'autre le 2701. Par définition, ils proviennent de sources différentes.

2. Utilisez jQuery pour lancer des requêtes provenant de différentes sources
Ajoutez un bouton à la page Web sur le port 2698 et l'événement Click lancera deux requêtes vers le domaine avec le port 2701.

Copier le code Le code est le suivant :

$("#getOtherDomainThings").click(function () {
$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", fonction (données) {
console.log(données)
})

$.get("http://localhost:2701/home/index", fonction (données) {
console.log(données)
})
})

Selon la politique de même origine, ce sera évidemment tragique. Le navigateur bloquera et ne lancera pas du tout la demande. (non autorisé par Access-Control-Allow-Origin)

OK, il s'avère que jsonp sert à résoudre ce problème.

Capacité inter-domaines de la balise de script
Je ne sais pas si vous connaissez le CDN, comme le CDN de Microsoft. En l'utilisant, nos pages Web n'ont pas besoin de fournir jQuery, et le site Web de Microsoft nous le fournira :
.

Copier le code Le code est le suivant :

De retour à notre page Web du port 2698, ci-dessus, nous avons une demande pour le fichier jQuery dans le domaine du port 2701 dans l'événement Click, cette fois en utilisant la balise de script pour demander.

Copier le code Le code est le suivant :

Bien sûr, 200, OK

La même page Web avec le port 2698 lance une demande pour le domaine 2701. Définir l'attribut scr dans le script est OK, mais l'inverse est tragique. Profitant des capacités inter-domaines du script, c'est la base de jsonp.

Utilisez un script pour obtenir du json à partir de différentes sources
Puisqu'il s'appelle jsonp, il est évident que le but est toujours json, et il est obtenu dans tous les domaines. Sur la base de l'analyse ci-dessus, il est facile de penser à : utilisez js pour construire une balise de script, attribuez l'URL json à l'attribut scr du script, insérez le script dans le dom et laissez le navigateur l'obtenir. Pratique :

Copier le code Le code est le suivant :

fonction CreateScript(src) {
$("<script><//script>").attr("src", src).appendTo("body")<br> ><br> </div> <br> Ajoutez un événement de bouton pour le tester : <br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="4331" class="copybut" id="copybut4331" onclick="doCopy('code4331')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code4331"> <br> $("#getOtherDomainJson").click(function () {<br> $.get('http://localhost:2701/home/somejson', fonction (données) {<br> console.log(données)<br> })<br> })<br> </div> <p><img src="http://files.jb51.net/file_images/article/201506/20156190709927.png?2015519722" alt=""></p> <p>Tout d'abord, dans le premier navigateur, l'URL http://localhost:2701/home/somejson a un json, et utiliser la balise script sur la page Web 2698 pour demander l'URL 2701 est également 200 OK, mais une erreur de syntaxe js est signalée en bas. Il s'avère qu'après le chargement avec la balise script, la réponse sera immédiatement exécutée en tant que js. Évidemment, {"Email": "zhww@outlook.com", "Remark": "Je viens d'Extrême-Orient"} n'est pas un déclaration légale js. </p> <p>Utilisez un script pour obtenir du jsonp étranger</p> <p>Évidemment, mettre le json ci-dessus dans une méthode de rappel est le moyen le plus simple. Par exemple, cela devient comme ceci : </p> <p><img src="http://files.jb51.net/file_images/article/201506/20156190730417.png?2015519738" alt=""></p> <p>Si la méthode jsonpcallback existe, alors jsonpcallback({"Email":"zhww@outlook.com","Remark":"Je viens d'Extrême-Orient"}) est une déclaration légale en js. </p> <p>Comme le serveur ne sait pas quel est le rappel du client, il est impossible de le coder en dur dans jsonpcallback, il apporte donc une QueryString pour permettre au client d'indiquer au serveur quelle est la méthode de rappel. Bien sûr, la clé de QueryString. doit se conformer à l'accord du serveur, comme ci-dessus C'est du "callback". </p> <p>Ajouter une fonction de rappel : <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="86577" class="copybut" id="copybut86577" onclick="doCopy('code86577')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code86577"> <br> fonction jsonpcallback(json) {<br> console.log(json)<br> ><br> </div> <br> Modifiez légèrement les paramètres de la méthode précédente : <br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="13280" class="copybut" id="copybut13280" onclick="doCopy('code13280')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code13280"> <br> $("#getJsonpByHand").click(function () {<br> CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")<br> })<br> </div> <p><img src="http://files.jb51.net/file_images/article/201506/20156190749818.png?2015519756" alt=""></p> <p>200OK, le serveur renvoie jsonpcallback({"Email":"zhww@outlook.com","Remark":"Je viens d'Extrême-Orient"} Nous avons également écrit la méthode jsonpcallback, qui sera bien sûr disponible). exécuté. OK, j'ai réussi json. C'est vrai, tout tourne autour de jsonp. </p> <p><strong>Utilisez jQuery pour obtenir jsonp</strong><br> Dans la méthode ci-dessus, vous devez insérer une balise de script et définir un rappel, ce qui est un peu gênant. Vous pouvez utiliser jQuery pour obtenir directement les données json souhaitées, les mêmes que le jsonp ci-dessus : <br>. </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="33170" class="copybut" id="copybut33170" onclick="doCopy('code33170')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code33170"> <br> $("#getJsonpByJquery").click(function () {<br> $.ajax({<br> ​ ​ URL : 'http://localhost:2701/home/somejsonp',<br>          Type de données : "jsonp",<br>          jsonp : "rappel",<br> Succès : fonction (données) {<br> console.log(données)<br> ><br> })<br> })<br> </div> <br> Les résultats obtenus sont similaires à ceux ci-dessus. <p><strong>Résumé</strong></p> <p>En une phrase, vous pouvez utiliser la balise script pour contourner la politique de même origine et obtenir des données comme celle-ci. jsonpcallback est la méthode de rappel qui existe sur la page, et le paramètre est le json souhaité. <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="58" class="copybut" id="copybut58" onclick="doCopy('code58')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code58"> <br> jsonpcallback({"Email":"zhww@outlook.com","Remark":"Je viens d'Extrême-Orient"})<br> </div> <p>AJOUTER du js natif :<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="99395" class="copybut" id="copybut99395" onclick="doCopy('code99395')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code99395"> <br> <id du bouton="btn">cliquez</bouton><br> <script type="text/javascript"><br>     fonction $(str){<br>         retourner document.getElementById(str)<br>     ><br>     fonction CreateScript(src) {<br>         var Scrip=document.createElement('script');<br>         Scrip.src=src;<br>         document.body.appendChild(Scrip);<br>     ><br>     fonction jsonpcallback(json) {<br>             console.log(json);//Object { email="中国", email2="中国222"}<br>     ><br>     $('btn').onclick=function(){<br>       CreateScript("http://localhost:51335/somejson?callback=jsonpcallback")    <br>     ><br> </script>