ホームページ >ウェブフロントエンド >jsチュートリアル >JSONP は jQuery のクロスドメイン AJAX の問題をどのように解決できますか?

JSONP は jQuery のクロスドメイン AJAX の問題をどのように解決できますか?

Susan Sarandon
Susan Sarandonオリジナル
2024-12-18 09:49:10145ブラウズ

How Can JSONP Solve Cross-Domain AJAX Issues in jQuery?

jQuery を使用したクロスドメイン AJAX

jQuery の AJAX 機能は、動的な Web 開発に不可欠なツールです。ただし、異なるドメイン間で AJAX リクエストを実行すると、クロスオリジン リソース共有 (CORS) の問題が発生する可能性があります。

そのような問題の 1 つは、test.php と testserver.php が別々のサーバーに存在する場合に発生し、その結果、"エラー」アラートがトリガーされています。これは、ブラウザのセキュリティ対策により、デフォルトで異なる送信元からの AJAX リクエストが制限されるためです。

解決策: JSONP

CORS を克服するには、JSONP (JSON with Padding) を使用できます。 JSONP は、リモート サーバーからスクリプトを動的にロードすることで異なるアプローチを利用し、CORS を回避します。制限事項。

実装

jQuery:

$.ajax({
  url: "testserver.php",
  dataType: 'jsonp', // Specify JSONP data type
  success:function(json){
    // Process JSON data
    alert("Success");
  },
  error:function(){
    alert("Error");
  }      
});

PHP:

<?php
$arr = array("element1", "element2", array("element31", "element32"));
$arr['name'] = "response";
echo $_GET['callback']. "(".json_encode($arr).");";
?>

PHP の echo ステートメントはjQuery が提供するコールバック関数内で JSON データを、適切な引用符を含めてラップするように設計されています。

代わりに、jQuery の $.getJSON() を「callback=?」の追加とともに短縮メソッドとして使用することもできます。 URL への GET パラメータとして。 jQuery は、このパラメータに基づいて適切なコールバック関数を自動的に生成します。

以上がJSONP は jQuery のクロスドメイン AJAX の問題をどのように解決できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。