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

jQuery AJAX 跨域通訊挑戰

當遇到跨域AJAX 請求時，來自一個域的HTML 文件嘗試建立一個請求到不同的域，就會出現困難。讓我們來探討一個包含兩個PHP 檔案test.php 和testserver.php 的場景：

test.php:

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
  $(function() {
    $.ajax({
      url: "testserver.php",
      success: function() {alert("Success")},
      error: function() {alert("Error")},
      dataType: "json",
      type: "get"
    });
  });
</script>

testserver.php :

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

當兩個檔案託管在同一伺服器上時，AJAX 請求成功了。但是，當它們放置在不同的伺服器上時，請求會失敗，從而觸發「錯誤」警報。這是由於瀏覽器的同源策略（SOP）限制了跨域資料共享。

解決方案：利用 JSONP

要克服 SOP，我們可以使用 JSONP（帶填充的 JSON）。 JSONP 允許將資料作為函數呼叫傳送，從而規避 SOP 施加的限制。

jQuery:

$.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:

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

在此修改後的程式碼包含'dataType: 'jsonp'' 表示使用JSONP。 PHP 腳本透過「$_GET['callback']」檢索 jQuery 傳送的回呼函數名稱，並使用它來形成輸出。 PHP 腳本中的輸出應顯示為回呼函數，後面跟著 JSON 數據，確保數據作為函數呼叫進行傳輸。

或者，jQuery 提供 $.getJSON() 方法，這是處理的簡寫JSONP 請求。但是，它要求 URL 包含「callback=?」作為 GET 參數，jQuery 動態插入自己的回調方法。

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