スクリプトを使用して Http クロスドメイン リクエストを実行する: JSONP 実装の原則とコード_JavaScript スキル

<script> 要素の src 属性は、URL を設定し、HTTP GET リクエストを開始することができます。通常、HTTP は同一オリジン ポリシーによって制限されずに、ドメイン間で通信できます。 <script> に基づく Ajax が使用されます。 プロトコルを送信する場合、サーバーの応答は JSON でエンコードされたデータ形式を使用します。この Ajax 送信プロトコルは、スクリプトを実行するときに自動的にデコードできます。 "JSONP" とも呼ばれます。したがって、jsonp テクノロジーが使用されます。<script> の src 属性を設定してドキュメントに挿入すると、ブラウザは src 属性によって実行される URL をダウンロードするための http リクエストを送信します。 🎜><br> <script> 要素データを使用して呼び出された場合、応答コンテンツは直接の部分ではなく、JavaScript 関数名と括弧で囲まれる必要があります (つまり、関数のパラメーターとしてのみ使用できます)。 json データ: <br><BR><div class="codetitle"><span><a style="CURSOR: pointer" data="22192" class="copybut" id="copybut22192" onclick="doCopy('code22192')">コードをコピー <U> コードは次のとおりです: <div class="codebody" id="code22192">response( <BR>[ 1, 2, {"hello", "world"}] <BR>) <BR><BR> これが機能するには、サービスが <script> 要素から呼び出されていることを何らかの方法で伝える必要があります。これを行うには、URL にクエリ パラメータを追加します。たとえば、「?json」(または &json) <BR><br> を追加します。 jsonp をサポートするものは、クライアントが実装する必要があるコールバック関数名 (response など) を強制しません。代わりにクエリ パラメーター値を使用し、クライアントが関数名を指定して、その関数名を使用して応答を設定できるようにします。 🎜><br><BR><div class="codetitle">コードをコピー<span><a style="CURSOR: pointer" data="13906" class="copybut" id="copybut13906" onclick="doCopy('code13906')"><U> コードは次のとおりです: //指定された URL に基づいて json リクエストを送信します//次に、解析された応答データをコールバック関数に渡します<div class="codebody" id="code13906">//このリクエストのコールバック関数の名前を指定して、jsonp という名前のクエリ パラメータを URL に追加します<BR>function getJSONP(url, callback){ <BR>//このリクエストの一意のコールバック関数名を作成します<BR>var cbnum = "cb" getJSONP.counter; <BR>var cbname = "getJSONP." // jsonp 関数の属性として>// URL クエリ部分にコールバック関数名をエンコーディング形式で追加します<BR>if(url.indexOf("?" ) === -1){ <BR>url = "?jsonp=" cbname ; <BR>}else{ <BR>url = "&jsonp=" cbname; <BR>} <BR>//Create<script&gt ;リクエストの送信に使用されます<BR>var script = document.createElement("script"); <BR>//スクリプトによって実行されるコールバック関数を定義します<BR>getJSONP[cbnum] = function(response){ <BR>try{ <BR>callback(response) //レスポンスを処理します<BR>} <🎜; >finally{ <BR>// 関数を削除し、対応するスクリプト要素を削除します<BR>delete getJSONP[cbnum] <BR>script. <BR>} <BR>} <BR>/ /http リクエストをすぐにトリガーします <BR>script.src = url; <BR>document.body.appendChild(script); <BR>getJSONP.counter = 0;</script>