jQuery + JSONP クロスドメインを実装する方法-H5 チュートリアル-php.cn

jQuery + JSONP クロスドメインを実装する方法

php中世界最好的语言

リリース： 2018-03-14 15:48:48

オリジナル

1750 人が閲覧しました

今回は、jQuery+JSONPのクロスドメイン実装はどのように行う必要があるのか、またjQuery+JSONPのクロスドメイン実装における注意点を以下に具体的な事例として紹介します。

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

ログイン後にコピー

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

推奨読書:

jqueryでselectコンポーネントを使用する方法

jqueryのログイン効果を実装する方法

マウスアウトイベントのケースと詳細な説明

jQueryカスタム関数アプリケーションと分析

以上がjQuery + JSONP クロスドメインを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。