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

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-30 09:32:14327ブラウズ

How Can JSONP Solve jQuery's Cross-Domain AJAX Problems?

jQuery AJAX クロスドメインのジレンマ: JSONP で CORS をバイパスする

クロスオリジン リソース共有により、異なるドメイン間でのデータのやり取りに課題が生じる(CORS) の制限。 localhost の test.php やリモート サーバーの testserver.php など、あるドメインから別のドメインへの AJAX リクエストを実行しようとすると、ブラウザによってこれらの制限が適用され、「エラー」アラートが表示されます。

これを克服するにはこの問題を解決するには、JSONP (パディング付き JSON) が有効な回避策として浮上します。スクリプト要素の柔軟性を利用して、ドメイン間でデータを取得します。

jQuery の変更:
dataType パラメーターを「jsonp」に変更して、JSONP を利用するように test.php を変更します。

PHP の変更:
testserver.php を調整するjQuery によって提供されるコールバックを使用して JSONP 応答をエコーし​​ます。

実装:

jQuery (test.php):

$.ajax({
    url: "testserver.php",
    dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
    success: function(json){
        // do stuff with json (in this case an array)
        alert("Success");
    },
    error: function(){
        alert("Error");
    }       
});

PHP (testserver.php):

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

$.getJSON() を使用した簡略化されたメソッド:
代わりに、$.getJSON() 短縮メソッドを使用します。 「callback=?」を追加しますGET パラメータとして URL に追加します。

$.getJSON("testserver.php", function(json){
    // do stuff with json (in this case an array)
    alert("Success");
});

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

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