如何在JavaScript中使用JSONP進行跨域通訊？

如何在JavaScript 中建立JSONP 進行跨域通訊

在處理跨域請求時，臭名昭著的同源策略可以成為一個臭名昭著的同源策略可以成為一個障礙。然而，JSONP（帶填充的 JSON）被設計為繞過此限制的巧妙解決方案。

JSONP 是如何運作的？

JSONP 巧妙地利用了 Web 瀏覽器的行為。透過在 GET 請求中提供名為回呼的參數，您可以允許伺服器將 JSON 資料包裝在 JavaScript 函數呼叫中。然後，瀏覽器執行該函數，並將 JSON 資料作為參數傳遞。

在PHP 中建立伺服器端回呼API

如果您在伺服器，執行下列步驟：

1. 接受GET 要求中的回調參數。
2. 設定適當的 HTTP 標頭，包括 Content-Type 和 Access-Control 標頭。
3. 將回呼 JavaScript 函數包裝在 JSON 資料周圍。

<code class="php"><?php $data = '{}'; // json string

if(array_key_exists('callback', $_GET)){

    header('Content-Type: text/javascript; charset=utf8');
    header('Access-Control-Allow-Origin: http://www.example.com/');
    header('Access-Control-Max-Age: 3628800');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

    $callback = $_GET['callback'];
    echo $callback.'('.$data.');';

}else{
    // normal JSON string
    header('Content-Type: application/json; charset=utf8');

    echo $data;
}
?></code>

在客戶端使用JSONP 服務

使用JSONP在客戶端服務，請依照下列範例：

<code class="html"><script>
    function receiver(data){
        console.log(data);
    }
</script>
<script src="data-service.php?callback=receiver"></script></code>

使用JSONP在客戶端服務，請依照下列範例：

此腳本建立一個接收器函數來處理傳入的JSON 數據，然後動態載入data-service.php 文件，提供回調函數作為爭論。

以上是如何在JavaScript中使用JSONP進行跨域通訊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！