JSONP 教程

本章节我们将向大家介绍 JSONP 的知识。

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

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

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

JSONP 应用

1. 服务端JSONP格式数据

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

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

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

服务端文件jsonp.php代码为：

jsonp.php 文件代码

<?phpheader('Content-type: application/json');//获取回调函数名$jsoncallback = htmlspecialchars($_REQUEST['jsoncallback']);//json数据$json_data = '["customername1","customername2"]';//输出jsonp格式的数据echo$jsoncallback . "(" .$json_data . ")";?>

2. 客户端实现 callbackFunction 函数

<scripttype="text/javascript">functioncallbackFunction(result,methodName){var html ='<ul>';for(vari = 0;i < result.length;i++){ html +='<li>' +result[i] +'</li>';} html +='</ul>';document.getElementById('divCustomers').innerHTML = html;}</script>

页面展示

<divid="divCustomers"></div>

客户端页面完整代码

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>JSONP 实例</title></head><body><divid="divCustomers"></div><scripttype="text/javascript">

functioncallbackFunction(result,methodName){ varhtml = '<ul>';for(vari = 0;i < result.length;i++){ html +='<li>' +result[i] +'</li>';} html +='</ul>';document.getElementById('divCustomers').innerHTML = html; }

</script><scripttype="text/javascript"src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script></body></html>

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>JSONP 实例</title><scriptsrc="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script></head><body><divid="divCustomers"></div><script>

$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?",function(data){ varhtml = '<ul>';for(vari = 0;i < data.length;i++){ html +='<li>' +data[i] +'</li>';} html +='</ul>'; $('#divCustomers').html(html);});

</script></body></html>

JSON学习笔记（六）- JSONP相关推荐

Ethernet/IP 学习笔记六
Ethernet/IP 学习笔记六 EtherNet/IP defines two primary types of communications: explicit and implicit (Ta ...
吴恩达《机器学习》学习笔记六——过拟合与正则化
吴恩达<机器学习>学习笔记六--过拟合与正则化一. 过拟合问题 1.线性回归过拟合问题 2.逻辑回归过拟合问题 3.过拟合的解决二. 正则化后的代价函数 1.正则化思想 2.实际使用的 ...
ROS学习笔记六：理解ROS服务和参数
ROS学习笔记六:理解ROS服务和参数主要介绍ROS服务和参数,同时使用命令行工具rosservice和rosparam. ROS service service是节点之间互相通信的另一种方式,se ...
opencv 手选roi区域_【opencv学习笔记六】图像的ROI区域选择与复制
图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...
JS学习笔记六：js中的DOM操作
1. JS学习笔记六:js中的DOM操作文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...
Python学习笔记六——画小猪佩奇
目录 Python学习笔记六--画小猪佩奇画布画笔属性设置操纵命令运动命令画笔控制命令全局控制命令其他命令 Python学习笔记六--画小猪佩奇使用Python的turtle库可以绘 ...
Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
Polyworks脚本开发学习笔记(六)-比较运算、数学运算、逻辑运算及流程控制
Polyworks脚本开发学习笔记(六)-比较运算.数学运算.逻辑运算及流程控制前言比较运算.逻辑运算及流程控制是编程的基本语法,Polyworks的语法规则与VB/C#/Python等并没有很大 ...
【K210】K210学习笔记六——MaixHub在线模型训练识别数字
[K210]K210学习笔记六--MaixHub在线模型训练识别数字前言 K210准备工作数据的获取 MaixHub如何在线训练模型训练模型在K210上的测试小结前言本人大四学生,电赛生涯 ...
Java学习笔记六、面向对象编程中级部分
Java学习笔记六.面向对象编程中级部分包包的注意事项和使用细节访问修饰符访问修饰符的注意事项和使用细节面向对象编程三大特征封装封装的实现步骤(三步) 继承继承的细节问题继承的本质 ...

JSON学习笔记（六）- JSONP