JSONP 教程

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

JSONP 应用

1. 服务端JSONP格式数据

假如客户想访问 : http://www.baidu.com/try/ajax/jsonp.php?jsonp=callbackFunction。

假设客户期望返回JSON数据：["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件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 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 >
<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.baidu.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.baidu.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>

【04】JSONP 教程的更多相关文章

【转】Windows 7下硬盘安装Ubuntu 14.04图文教程--不错
原文网址:http://www.linuxidc.com/Linux/2014-04/100369p3.htm Ubuntu 官方已经发布了正式版的 Ubuntu 14.04 LTS,并宣称这是为云计 ...
分布式进阶(一)Windows 7下硬盘安装Ubuntu 14.04图文教程
Windows 7下硬盘安装Ubuntu 14.04图文教程本人下载的是ubuntu-14.04.2-desktop-amd64.iso,经本人亲自测试的,折腾了一天的时间. 1)首先还是分区,在计 ...
JSONP 教程
JSONP 教程本章节我们将向大家介绍 JSONP 的知识. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...
KinectV1+Ubuntu 14.04安装教程
前言个人理解错误的地方还请不吝赐教,转载请标明出处,内容如有改动更新,请看原博:http://www.cnblogs.com/hitcm/ 如有任何问题,feel free to ...
Win10系统下安装Ubuntu16.04.3教程与设置
在Win10上刚刚装好Ubuntu16.04.3,装了不下于10次,期间出现很多问题,趁着还有记忆,写下这篇教程,里面还有Ubuntu系统的优化与Win10的一些设置. Part 1 制作Ubuntu ...
用 EasyUEFI 在 Win8/10 中硬盘安装 Ubuntu16.04图文教程
用 EasyUEFI 在 Win8/10 中硬盘安装 Ubuntu 作者:TeliuTe 来源:基础教程网 1.准备Ubuntu安装文件 1)下载带amd的64位 Ubuntu 桌面版光盘镜像文件,如 ...
在win10下安装双系统ubuntu16.04.3教程
闲暇了两天,终于想起来要装一个Liunx系统了.于是捣鼓了一番,实现了在Win10下安装Ubuntu16.04.3版本. 一.准备工作下载Ubuntu 16.04.3镜像准备一个2G以上的U盘下 ...
安装WIN10+Ubuntu18.04安装教程（实测有效）
转载原文链接:https://www.cnblogs.com/masbay/articles/10745170.html 安装过程中尤其注意分区时候的挂载点一定要选对!!!选择Ubuntu的EFI所在 ...
VMware12安装虚拟机教程、Ubuntu16.04安装教程（包括vmware tools的安装）
转自https://jingyan.baidu.com/article/c275f6ba07e269e33d756714.html 方法/步骤 1 虚拟机.Linux操作系统介绍及下载地址虚拟机VM ...

随机推荐

Line: 220 - com/opensymphony/xwork2/spring/SpringObjectFactory.java:220:-1
转自:http://blog.51cto.com/alinazh/1276363 在启动tomcat的时候出现错误: Line: 220 - com/opensymphony/xwork2/sprin ...
sql语句如何查询当天，一周，一月的数据的语句
sql查询当天,一周,一个月数据的语句 --查询当天: select * from info where DateDiff(dd,datetime,getdate())=0 --查询24小时内的: ...
nrm -- NPM registry 管理工具
https://cnodejs.org/topic/5326e78c434e04172c006826 cnpm:http://npm.taobao.org/
SVN请求认证信息
WIN10:C:\Users\Home目录\AppData\Roaming\Subversion Window Server 系统:C:\Users\Home目录\AppData\Roaming\Su ...
Liunx中虚拟机远程复制文件SCP命令
1.首先在虚拟机中新建 CentOSA .CentOSB 从远处复制文件到本地目录 scp -r root@192.168.1.24:/root/aa ./ 从CentosB虚拟机器上的/root/a ...
GoAhead4.1.0 开发总结二（自定义使用）
环境官方文档:https://www.embedthis.com/goahead/doc/ 源码下载: goahead-4.1.0-src.tgz 系统平台:Ubuntu 12.04.4 gcc v ...
线段树+树状数组+贪心 HDOJ 5338 ZZX and Permutations
题目传送门 /* 题意:不懂... 线段树+树状数组+贪心:贪心从第一位开始枚举,一个数可以是循环节的末尾或者在循环节中,循环节(循环节内部是后面的换到前面,最前面的换到最后面).线段树维护最大值,树 ...
计算科学（转自wiki）
计算科学(也称科学计算 scientific computation 或 SC)是一个快速增长的多学科领域,使用先进的计算能力来理解和解决复杂的问题. 计算科学包括三个不同的方面: 1. 开发用于解决 ...
10步成为专业iOS开发者——新手向，从零起步
想在移动开发大餐中分一杯羹,体验最火最炫的技术?小伙子,很有眼光嘛毫无疑问,移动开发在目前和未来几年内都会盛极一时.无数开发职位虚位以待.各大公司都在寻找各种层次的程序员——新手级.入门级.中级.老 ...
Python学习笔记之默认参数
函数定义时参数定义的顺序必须是:必选参数.默认参数.可变参数和关键字参数. def test(a,b,c=1,*d,**e) pass

【04】JSONP 教程