學習JSONP

大雄45發表於2021-09-21
JSON
導讀 JSON(JavaScript Object Notation, JS 物件簡譜) 是一種輕量級的資料交換格式。它基於 ECMAScript (歐洲計算機協會制定的js規範)的一個子集，採用完全獨立於程式語言的文字格式來儲存和表示資料。簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網路傳輸效率。

學習JSONP學習JSONP
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取資料。

為什麼我們從不同的域（網站）訪問資料需要一個特殊的技術( JSONP )呢？這是因為同源策略。

同源策略，它是由 Netscape 提出的一個著名的安全策略，現在所有支援 JavaScript 的瀏覽器都會使用這個策略。

JSONP 應用
1. 服務端 JSONP 格式資料

如客戶想訪問 : probe.com/try/ajax/jsonp.php?jsoncallback=callbackFunction。

假設客戶期望返回資料：["customername1","customername2"]。

真正返回到客戶端的資料顯示為: callbackFunction(["customername1","customername2"])。

服務端檔案 jsonp.php 程式碼為：

jsonp.php 檔案程式碼

<?php
header('Content-type: application/json');
//獲取回撥函式名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json資料
$json_data = '["customername1","customername2"]';
//輸出jsonp格式的資料
echo $jsoncallback . "(" . $json_data . ")";
?>
2. 客戶端實現 callbackFunction 函式
<script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>
頁面展示
<div id="divCustomers"></div>
客戶端頁面完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 例項</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="linuxprobe.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>
jQuery 使用 JSONP

以上程式碼可以使用 jQuery 程式碼例項：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 例項</title>
    <script src="
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("linuxprobe.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});
</script>
</body>
</html>

原文來自：

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69955379/viewspace-2785837/，如需轉載，請註明出處，否則將追究法律責任。

相關文章