JSONP 介紹、應用
阿新 • • 發佈：2017-09-11
輸出 bsp inf htm xmlns php innerhtml add 介紹
如客戶想訪問：http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction
假設客戶期望返回 JSONP 數據：["customername1","customername2"]。
2.1 真正返回到客戶端的數據顯示為：(["customername1","customername2"])
2.2 （實例給出）真正返回到客戶端的數據顯示為：callbackFunction(["customername1","customername2"])
服務器端文件 jsonp.php 代碼為：
以上代碼可以使用 jQuery 代碼實例：
| ylbtech-JSON: 介紹、應用 |
JSONP（JSON with Padding）是 JSON 的一種“使用模式”，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。
為什麽我們從不同的域（網站）訪問數據需要一個特俗的技術（JSONP）呢？這是因為同源策略。
同源策略，它是由 Netscape 提出的一個著名安全策略，現在所有支持 JavaScript 的瀏覽器都會使用這個策略。
| 1. JSONP 應用返回頂部 |
| 2. 服務器端 JSONP 格式數據返回頂部 |
<?phpheader(‘Content-type: appliaction/json‘); //獲取回調函數名 $jsoncallback=htmlspecialchars($_REQUEST[‘jsoncallback‘]); //json 數據 $json_data=‘["customername1","customername2"]‘; //輸出 jsonp 格式的數據 echo $jsoncallback . "(" . $json_data . ")"; ?>
| 3. 客戶端實現 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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> </body> </html>
| 4. jQuery 使用 JSONP返回頂部 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>JSNP 實例</title> <meta charset="utf-8" /> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script> </head> <body> <div id="divCustomers"></div> <script> $.getJSON("http://www.runoob.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>
| 5.返回頂部 |
| 6.返回頂部 |
| 7.返回頂部 |
| 8.返回頂部 |
| 9.返回頂部 |
| 10.返回頂部 |
| 11.返回頂部 |
 |
作者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。 |
JSONP 介紹、應用