快捷導(dǎo)航

php利用jsonp實現(xiàn)跨域

更新時間：2023年11月09日 08:52:52 作者：PHP隔壁老王鄰居

JSONP（JSON?with?Padding）是一種使用普通的<script>標(biāo)簽來發(fā)起跨域請求的方法,本文主要為大家詳細(xì)介紹了PHP如何利用jsonp實現(xiàn)跨域,需要的可以參考下

JSONP（JSON with Padding）是一種使用普通的<script>標(biāo)簽來發(fā)起跨域請求的方法。JSONP利用了HTML頁面可以直接引入外部JavaScript文件而不受同源策略限制的特性

實現(xiàn)效果

1、實現(xiàn)代碼中php文件

<?php
// 接收GET請求參數(shù)
$param = $_GET['callback'];
// 生成需要返回的數(shù)據(jù)
$data = array(
    'name' => '張三',
    'age' => 23
);
// 將數(shù)據(jù)轉(zhuǎn)換為JSON字符串
$jsonStr = json_encode($data);
// 安全過濾回調(diào)函數(shù)名
$callback = preg_replace('/[^a-zA-Z0-9_]/', '', $param);
// 返回帶有回調(diào)函數(shù)名和JSON數(shù)據(jù)的響應(yīng)
echo $callback . '(' . $jsonStr . ')';

2、js代碼

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>JSONP跨域請求示例</title>
</head>
<body>
<script>
    function handleResponse(data) {
        // 在這里處理返回的數(shù)據(jù)
        console.log(data);
    }
    var script = document.createElement('script');
    script.src = 'http://localhost/test5.php?callback=handleResponse';
    if (document.body) {
        document.body.appendChild(script);
    } else {
        document.addEventListener('DOMContentLoaded', function() { document.body.appendChild(script); });
    }
</script>
</body>
</html>

JSONP的原理如下：

在客戶端，當(dāng)需要從不同域的服務(wù)器獲取數(shù)據(jù)時，創(chuàng)建一個<script>元素，并將其src屬性設(shè)置為要請求的URL，并將回調(diào)函數(shù)的名稱作為URL參數(shù)傳遞。

在服務(wù)器端，接收到帶有回調(diào)函數(shù)名稱的請求后，服務(wù)器會將數(shù)據(jù)使用回調(diào)函數(shù)包裹起來作為響應(yīng)返回給客戶端。

在客戶端，瀏覽器解析返回的JavaScript代碼，并執(zhí)行其中的回調(diào)函數(shù)，將數(shù)據(jù)傳遞給回調(diào)函數(shù)進行處理。具體流程如下：

客戶端通過動態(tài)創(chuàng)建<script>元素，設(shè)置其src屬性為跨域請求的URL，并在URL中傳遞一個回調(diào)函數(shù)的名稱作為參數(shù)，例如：http://example.com/data?callback=handleResponse。

服務(wù)器接收到這個請求后，根據(jù)參數(shù)中的回調(diào)函數(shù)名稱，將要返回的數(shù)據(jù)使用回調(diào)函數(shù)進行包裹，例如：handleResponse({"name": "張三", "age": 23})。

服務(wù)器將包含回調(diào)函數(shù)和數(shù)據(jù)的響應(yīng)返回給客戶端，響應(yīng)內(nèi)容會被當(dāng)作JavaScript代碼解析。

客戶端瀏覽器解析響應(yīng)內(nèi)容，并執(zhí)行其中的回調(diào)函數(shù)，將數(shù)據(jù)傳遞給回調(diào)函數(shù)進行處理。這樣，跨域請求的數(shù)據(jù)就被成功獲取到了。 JSONP的關(guān)鍵在于使用了普通的<script>標(biāo)簽去請求跨域資源，并且服務(wù)器返回的是可執(zhí)行的JavaScript代碼，這樣瀏覽器就能夠成功加載并執(zhí)行返回的代碼。由于JavaScript沒有同源策略限制，因此可以跨域訪問數(shù)據(jù)。但需要注意的是，JSONP只支持GET請求，不支持POST等其他類型的請求。另外，為了避免安全風(fēng)險，應(yīng)當(dāng)對回調(diào)函數(shù)的名稱進行嚴(yán)格的過濾，確保只允許合法的回調(diào)函數(shù)名稱被執(zhí)行。

到此這篇關(guān)于php利用jsonp實現(xiàn)跨域的文章就介紹到這了,更多相關(guān)php jsonp跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: