jQuery+JSONP によるクロスドメインリクエストメソッド (詳細なチュートリアル)-jsチュートリアル-php.cn

jQuery+JSONP によるクロスドメインリクエストメソッド (詳細なチュートリアル)

亚连

リリース： 2018-06-01 10:46:10

オリジナル

1574 人が閲覧しました

jsonp を理解した後は、jsonp が主にクロスドメインデータを取得するために使用されることも理解する必要があります。今日は実際にクロスドメインを実現するために jsonp を適用する方法について詳しく説明します

JSONP (JSON with Padding) は「使用法」です。主流のブラウザによるクロスドメインデータアクセスの問題を解決するために使用できる JSON のモデル」。同一オリジンポリシーにより、一般に、server1.example.com にある Web ページは、HTML の <script> 要素を除き、server1.example.com 以外のサーバーと通信できません。 <script> 要素のこのオープンポリシーを使用すると、Web ページは他のソースから動的に生成された JSON データを取得できます。この使用パターンは JSONP と呼ばれます。 JSONP でキャプチャされたデータは JSON ではなく、JSON パーサーで解析されるのではなく、JavaScript インタープリターで実行される任意の JavaScript です。 </script>

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

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

回答: 質問にある 2 つの当事者は同じサーバー上にいないため、クロスドメインアクセスには jsonp を使用する必要があります。

①クライアントサイドの書き込み

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

I. url: リクエストアドレス;

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

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

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
</head>
<body>
  <ul id="nameList"></ul>

  <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript">
    $.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) {
      for (var i = 0; i < json.length; i++) {
        $("#nameList").append("<li>" + json[i] + "</li>");
      }
    });
  </script>
</body>
</html>

ログイン後にコピー

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

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

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);
  }
}

ログイン後にコピー

この時点で、問題は正常に解決されました。

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

参考:

$.ajax("http://localhost:3561/User/GetAllNames", {
  jsonpCallback: "moty",
  dataType: "jsonp",
  success: function(json) {
    for (var i = 0; i < json.length; i++) {
      $("#nameList").append("<li>" + json[i] + "</li>");
    }
  }
});

ログイン後にコピー

以上、皆さんの参考になれば幸いです。

ES6 を使用して WeakMap を通じてメモリリーク問題を解決する (詳細なチュートリアル)

Node.JS ループで空ではないフォルダーとサブディレクトリ内のすべてのファイルを削除する

プロトタイプと詳細__proto__

の関係の説明

以上がjQuery+JSONP によるクロスドメインリクエストメソッド (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。