JSONP如何解決jQuery的跨域AJAX問題？

jQuery AJAX 跨域困境：使用JSONP 繞過CORS

由於跨域資源共享，跨域資料交互帶來了挑戰( CORS) 限制。當嘗試從一個網域到另一個網域（例如本機上的 test.php 和遠端伺服器上的 testserver.php）執行 AJAX 請求時，瀏覽器會強制執行這些限制，導致「錯誤」警報。

要克服此問題障礙，JSONP（帶填充的 JSON）作為一種可行的解決方法出現。它利用腳本元素的靈活性來跨域檢索資料。

jQuery 修改：
修改 test.php，透過將 dataType 參數變更為「jsonp」來利用 JSONP。

PHP 修改：
調整 testserver.php 以回顯 JSONP使用 jQuery 提供的回呼進行回應。

實作：

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() 簡寫方法，該方法會自動附加「回呼=？」將URL 作為GET 參數。

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

以上是JSONP如何解決jQuery的跨域AJAX問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！