| ylbtech-JSON: 介绍、应用 |
JSONP（JSON with Padding）是 JSON 的一种“使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特俗的技术（JSONP）呢？这是因为同源策略。
同源策略，它是由 Netscape 提出的一个著名安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
| 1. JSONP 应用返回顶部 |
| 2. 服务器端 JSONP 格式数据返回顶部 |
如客户想访问：http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction
假设客户期望返回 JSONP 数据：["customername1","customername2"]。
2.1 真正返回到客户端的数据显示为：(["customername1","customername2"])
2.2 （实例给出）真正返回到客户端的数据显示为：callbackFunction(["customername1","customername2"])
服务器端文件 jsonp.php 代码为：
<?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返回顶部 |
以上代码可以使用 jQuery 代码实例：
<!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/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
JSON: ?介绍、应用
原文地址：http://www.cnblogs.com/storebook/p/7502708.html