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

$("#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)
})
})

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>