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

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

php中世界最好的语言

リリース： 2018-03-28 10:51:00

オリジナル

1293 人が閲覧しました

今回は、jQuery+JSONP クロスドメインリクエストの実装方法と、jQuery+JSONP クロスドメインリクエストを実装するための注意事項について説明します。実際のケースを見てみましょう。

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

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

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

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

①クライアントの記述

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

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

II. コールバック: 成功時の

コールバック関数

。 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

string

にシリアル化し、それを「callback(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 サイトの他の関連記事に注目してください。

推奨読書:

HTMLでのv-forインデックスの使用

Vueパッケージ化後のファイルパスエラーに対処する方法

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