ホームページ > 記事 > ウェブフロントエンド > jQuery+JSONP クロスドメインリクエストを実装する方法
jQuery+JSONP クロスドメインリクエストを実装する方法
- php中世界最好的语言オリジナル
- 2018-03-28 10:51:001180ブラウズ
今回は、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 サイトの他の関連記事を参照してください。