JSONP 教程

本章節(jié)我們將向大家介紹 JSONP 的知識。

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)。

為什么我們從不同的域（網(wǎng)站）訪問數(shù)據(jù)需要一個特殊的技術(JSONP )呢？這是因為同源策略。

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

JSONP 應用

1. 服務端JSONP格式數(shù)據(jù)

如客戶想訪問 : http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction。

假設客戶期望返回JSON數(shù)據(jù)：["customername1","customername2"]。

真正返回到客戶端的數(shù)據(jù)顯示為: callbackFunction(["customername1","customername2"])。

服務端文件jsonp.php代碼為：

<?phpheader('Content-type: application/json');//獲取回調(diào)函數(shù)名$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);//json數(shù)據(jù)$json_data = '["customername1","customername2"]';//輸出jsonp格式的數(shù)據(jù)echo $jsoncallback . "(" . $json_data . ")";?>

2. 客戶端實現(xiàn) callbackFunction 函數(shù)

<script type="text/javascript">function onCustomerLoaded(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>

jQuery 使用 JSONP

以上代碼可以使用 jQuery 代碼實例：

<!DOCTYPE html><html><head>	<title>JSONP 實例</title>	<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>

本站僅提供存儲服務，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權內(nèi)容，請點擊舉報。

打開APP，閱讀全文并永久保存查看更多類似文章

JSONP - Allen Wang - 博客園

跨域JSONP原理及調(diào)用具體示例

同源策略——瀏覽器的安全衛(wèi)士

JSON for jQuery

說說JSON和JSONP，也許你會豁然開朗

淺談跨域以WebService對跨域的支持

更多類似文章 >>

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区