jQuery+JSONP クロスドメインリクエストを使用する手順の詳細な説明

今回は、jQuery+JSONPクロスドメインリクエストを使用する手順と、jQuery+JSONPクロスドメインリクエストを使用する際の注意事項について詳しく説明します。以下は実際のケースです。見てください。

JSONP(JSON Padding) は、主流ブラウザによるクロスドメイン データ アクセスの問題を解決するために使用できる JSON の「使用パターン」です。同一生成元ポリシーにより、通常は次の場所にあります。 server1.example.com の Web ページは、server1.example.com 以外のサーバーと通信できず、HTML <script>要素は例外です。 <script> 要素のこのオープン ポリシーを使用すると、Web ページは他のソースから動的に生成されたスクリプトを取得できます。 JSON データ。この使用パターンは JSONP と呼ばれます。 JSONPを使用してキャプチャされたデータはJSONではなく、任意の<a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScriptを使用します JSON パーサーで解析する代わりに、JavaScript インタープリターが実行されます。 </script>

上の段落は百度百科事典から引用したものです。概念は常に非常に抽象的であり、最も直感的な表現は例を見ることです。たくさんの例を見て、その点を理解すると、自然に抽象的に説明できるようになります。 「知識の習得は、薄いものから厚いものへ、厚いものから薄いものへのプロセスである」と言われるのはこのためです。さて、行き過ぎましょう。例を直接見てみましょう。

問題: http://localhost:3561/User/GetAllNames からデータを取得して表示する必要があるローカル ページのデモ.html があります。

①クライアントライティング

クライアントは、クロスドメイン アクセスのために jQuery で提供される $.getJson メソッドを使用します。 getJson には 3 つのパラメータがあります:

I. URL: リクエストアドレス

II. データ: サーバーに送信されるパラメーター

III. コールバック: 成功時のコールバック関数。

getJson の使用方法は基本的に通常の $.get メソッドと同じですが、getJson では jQuery の後のパラメータ部分に固定部分 callback=? を追加する必要があります。 自動的に置き換えられるのでしょうか？ コールバック関数を実行するための正しい関数名です。次に、外部ドメインから返された json オブジェクトをコールバック関数で操作します。コールバック関数 callback のパラメータは json オブジェクトです。

りー

②サーバーサイド書き込み

サーバーのロジックは主に、データを jsonstring にシリアル化し、それを「コールバック (json)」の形式にカプセル化することです。コールバックは、jQuery によって自動的に生成され、サーバーに渡される関数名です。以下は C# を使用して実装されています:

nbsp;html>


<meta>
  <title></title>


  

  <script></script>   <script> $.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) { for (var i = 0; i < json.length; i++) { $("#nameList").append("<li>" + json[i] + ""); } }); </script>

これで問題は無事解決しました。

思考: コールバックがサーバー上でハードウェア的に記述されている場合 (例: return string.Format("moty({0})", json);)、クライアントはそれをどのように記述すべきでしょうか?

参考:

public class UserController : Controller
{
    public string GetAllNames(string callback)
  {
    string[] names = new string[] { "张三丰", "张无忌", "令狐冲", "杨过", "郭靖" };
    JavaScriptSerializer jss = new JavaScriptSerializer();
    string json = jss.Serialize(names);
    return string.Format("{0}({1})", callback, json);
  }
}

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ノードのプロセスおよびchild_processモジュールの使用方法の詳細な説明

vue2.0のすべての画像をロードするループメソッド

以上がjQuery+JSONP クロスドメインリクエストを使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。