ひと目でわかる：jsonp_jqueryの詳しい解説

$("#getOtherDomainThings").click(function () {
$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {
console.log(データ)
})

$.get("http://localhost:2701/home/index", function (data) {
console.log(データ)
})
})

function CreateScript(src) {
$("<script><//script>").attr("src", src).appendTo("body")<br> }<br> </div> <br> ボタン イベントを追加してテストします: <br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="4331" class="copybut" id="copybut4331" onclick="doCopy('code4331')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code4331"> <br> $("#getOtherDomainJson").click(function () {<br> $.get('http://localhost:2701/home/somejson', function (data) {<br> console.log(データ)<br> })<br> })<br> </div> <p><img src="http://files.jb51.net/file_images/article/201506/20156190709927.png?2015519722" alt=""></p> <p>まず、最初のブラウザでは、URL http://localhost:2701/home/somejson には json があり、Web ページの script タグを使用して 2698 Web ページで URL をリクエストすることも 200 OK です。ただし、下部に js 構文エラーが報告されます。 script タグでロードした後、応答は js としてすぐに実行されることがわかります。明らかに、{"Email":"zhww@outlook.com","Remark":"I from the far east"} は、法的なjsステートメント。 </p> <p>スクリプトを使用して外部 jsonp を取得します</p> <p>明らかに、上記の json をコールバック メソッドに入れるのが最も簡単な方法です。たとえば、次のようになります: </p> <p><img src="http://files.jb51.net/file_images/article/201506/20156190730417.png?2015519738" alt=""></p> <p>jsonpcallback メソッドが存在する場合、jsonpcallback({"Email":"zhww@outlook.com","Remark":"I from the far east"}) は正当な JS ステートメントです。 </p> <p>サーバーはクライアントのコールバックが何であるかを知らないため、それを jsonpcallback にハードコーディングすることは不可能です。そのため、クライアントにコールバック メソッドが何であるかをサーバーに伝えるために QueryString をもたらします。もちろん、QueryString のキーです。上記のように、サーバーの合意に従う必要があります。これは「コールバック」です。 </p> <p>コールバック関数の追加: <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="86577" class="copybut" id="copybut86577" onclick="doCopy('code86577')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code86577"> <br> function jsonpcallback(json) {<br> console.log(json)<br> }<br> </div> <br> 前のメソッドのパラメータを少し変更します: <br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="13280" class="copybut" id="copybut13280" onclick="doCopy('code13280')"><u>コードをコピー</u></a></span> コードは次のとおりです:</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、サーバーは jsonpcallback({"Email":"zhww@outlook.com","Remark":"私は極東から来ました"}) を返します。もちろん、これは次のようになります。実行されました。 OK、jsonを正常に取得しました。そうです、これはすべて jsonp に関するものです。 </p> <p><strong>jQuery を使用して jsonp を取得します</strong><br> 上記の方法では、script タグを挿入してコールバックを定義する必要がありますが、少し面倒ですが、上記の jsonp: <br> と同様に、jQuery を使用して目的の json データを直接取得できます。 </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="33170" class="copybut" id="copybut33170" onclick="doCopy('code33170')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code33170"> <br> $("#getJsonpByJquery").click(function () {<br> $.ajax({<br> URL: 'http://localhost:2701/home/somejsonp',<br> データ型: "jsonp",<br> jsonp: "コールバック",<br> 成功: 関数 (データ) {<br> console.log(データ)<br> }<br> })<br> })<br> </div> <br> 得られる結果は上記と同様です。 <p><strong>概要</strong></p> <p>スクリプト タグを使用して、次のように同一生成元ポリシーをバイパスしてデータを取得できます。 jsonpcallback はページ上に存在するコールバック メソッドで、パラメーターは目的の json です。 <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="58" class="copybut" id="copybut58" onclick="doCopy('code58')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code58"> <br> jsonpcallback({"メール":"zhww@outlook.com","備考":"私は極東から来ました"})<br> </div> <p>ネイティブ js を追加:<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="99395" class="copybut" id="copybut99395" onclick="doCopy('code99395')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code99395"> <br> <button id="btn">クリック</button><br> <スクリプトタイプ="text/javascript"><br>     関数 $(str){<br>         document.getElementById(str)<br>を返す     }<br>     function CreateScript(src) {<br>         var Scrip=document.createElement('script');<br>         Scrip.src=src;<br>         document.body.appendChild(Scrip);<br>     }<br>     function 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>