検索

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

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

DDD
DDDオリジナル
2024-12-22 22:15:13357ブラウズ

How Can JSONP Solve jQuery AJAX Cross-Domain Issues?

jQuery AJAX クロスドメインの問題

提供されたシナリオでは、2 つの PHP ファイル (test.php と testserver.php) が次を使用して通信します。 jQuery の AJAX、クロスドメインの制限は、それらが別のサーバーに存在する場合に発生します。サーバー A は test.php (例: localhost) をホストし、サーバー B は testserver.php (例: Web サーバー) をホストします。

問題:
AJAX リクエストの実行が成功したにもかかわらずファイルが同じサーバー上にある場合、異なるサーバー上にある場合はエラーで失敗します。これは、Same-Origin Policy (SOP) によるものです。

解決策:
このクロスドメインの問題に対処するために、JSONP (JSON with Padding) が採用されています。 JSONP はコールバックを利用してブラウザの制限を回避します。

実装:

jQuery (test.php):

$.ajax({
    url: "http://domain.example/path/to/file/testserver.php",
    dataType: 'jsonp', // Notice! JSONP (lowercase 'P')
    success: function(json){
        // Handle JSON response (an array)
        alert("Success");
    },
    error: function(){
        alert("Error");
    }      
});

PHP (testserver.php):

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
$callbackName = $_GET['callback']; // Get the callback name from GET params
echo $callbackName."(".json_encode($arr).");";
?>

説明:

  1. jQuery の $.ajax() メソッドは、「jsonp」を使用するように変更されています。 dataType.
  2. $.ajax() に渡されるコールバック関数は、 PHP 変数 $callbackName。
  3. PHP スクリプトは、callbackName 値を使用して、関数呼び出し内に JSON データを埋め込みます。
  4. これにより、ブラウザは