【04】JSONP 教程
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 ...
随机推荐
- bzoj 2097: [Usaco2010 Dec]Exercise 奶牛健美操【二分+树形dp】
二分答案,然后dp判断是否合法 具体方法是设f[u]为u点到其子树中的最长链,每次把所有儿子的f值取出来排序,如果某两条能组合出大于mid的链就断掉f较大的一条 a是全局数组!!所以要先dfs完子树才 ...
- 洛谷 P3121 [USACO15FEB]审查(黄金)Censoring (Gold) 【AC自动机+栈】
这个和bzoj同名题不一样,有多个匹配串 但是思路是一样的,写个AC自动机,同样是开两个栈,一个存字符,一个存当前点在trie树上的位置,然后如果到了某个匹配串的末尾,则弹栈 #include< ...
- ngCordova插件说明
转载自 http://my.oschina.net/u/1416844/blog/495026 参 考http://blog.csdn.net/superjunjin/article/details/ ...
- robotframework - selenium 分层思路
前言: 对于每一条用例来说,调用“百度搜索”关键字,输入搜索内容,输入预期结果即可.不同关心用例是如何执行的.如果百度输入框的定位发生了变化,只用去修改“百度搜索”关键字即可,不用对每一条用例做任何修 ...
- 慕课网2-5 编程练习:通过jQuery通配符选择器进行文字变色
2-5 编程练习 请请使用*选择器将div标签中的字体颜色变成红色 效果图: 任务 (1)使用通配符选择器 (2)使用jQuery的.css()方法设置样式,语法css('属性 '属性值') 参考代码 ...
- Linux学习笔记之Linux shell脚本运行出现问题:bash: ./test: bin/sh: bad interpreter: No such file or directory
问题: 在Linux系统中使用“vi test.sh”命令创建.sh文件,保存文件(:wq)并赋予权限(chmod +x test.sh)后,执行(./test.sh),出现问题:“bash: ./t ...
- C# 的占位符
static void Main(string[] args) { Console.WriteLine("A:{0},a:{1}",65,97); Console.ReadLine ...
- H - Where is the Marble?(set+vector)
Description Raju and Meena love to play with Marbles. They have got a lot of marbles with numbers wr ...
- 378 Kth Smallest Element in a Sorted Matrix 有序矩阵中第K小的元素
给定一个 n x n 矩阵,其中每行和每列元素均按升序排序,找到矩阵中第k小的元素.请注意,它是排序后的第k小元素,而不是第k个元素.示例:matrix = [ [ 1, 5, 9], [ ...
- SpringBoot-redis-session
配置pom <parent> <groupId>org.springframework.boot</groupId> <artifactId>sprin ...