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代码为：

  1. <?php
  2. header('Content-type: application/json');
  3. //获取回调函数名
  4. $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
  5. //json数据
  6. $json_data ='["customername1","customername2"]';
  7. //输出jsonp格式的数据
  8. echo $jsoncallback ."(". $json_data .")";
  9. ?>
 

2. 客户端实现 callbackFunction 函数

  1. <script type="text/javascript">
  2. function onCustomerLoaded(result, methodName)
  3. {
  4. var html ='<ul>';
  5. for(var i =0; i < result.length; i++)
  6. {
  7. html +='<li>'+ result[i]+'</li>';
  8. }
  9. html +='</ul>';
  10. document.getElementById('divCustomers').innerHTML = html;
  11. }
  12. </script>
 

页面展示

<div id="divCustomers"></div>

　　

客户端页面完整代码

  1. <!DOCTYPE html >
  2. <head>
  3. <title>JSONP 实例</title>
  4. </head>
  5. <body>
  6. <div id="divCustomers"></div>
  7. <script type="text/javascript">
  8. function callbackFunction(result, methodName)
  9. {
  10. var html ='<ul>';
  11. for(var i =0; i < result.length; i++)
  12. {
  13. html +='<li>'+ result[i]+'</li>';
  14. }
  15. html +='</ul>';
  16. document.getElementById('divCustomers').innerHTML = html;
  17. }
  18. </script>
  19. <script type="text/javascript" src="http://www.baidu.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
  20. </body>
  21. </html>
 

jQuery 使用 JSONP

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JSONP 实例</title>
  5. <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
  6. </head>
  7. <body>
  8. <div id="divCustomers"></div>
  9. <script>
  10. $.getJSON("http://www.baidu.com/try/ajax/jsonp.php?jsoncallback=?", function(data){
  12. var html ='<ul>';
  13. for(var i =0; i < data.length; i++)
  14. {
  15. html +='<li>'+ data[i]+'</li>';
  16. }
  17. html +='</ul>';
  19. $('#divCustomers').html(html);
  20. });
  21. </script>
  22. </body>
  23. </html>
 

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

  1. 【转】Windows 7下硬盘安装Ubuntu 14.04图文教程--不错

    原文网址:http://www.linuxidc.com/Linux/2014-04/100369p3.htm Ubuntu 官方已经发布了正式版的 Ubuntu 14.04 LTS,并宣称这是为云计 ...

  2. 分布式进阶(一)Windows 7下硬盘安装Ubuntu 14.04图文教程

    Windows 7下硬盘安装Ubuntu 14.04图文教程 本人下载的是ubuntu-14.04.2-desktop-amd64.iso,经本人亲自测试的,折腾了一天的时间. 1)首先还是分区,在计 ...

  3. JSONP 教程

    JSONP 教程 本章节我们将向大家介绍 JSONP 的知识. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...

  4. KinectV1+Ubuntu 14.04安装教程

    前言      个人理解错误的地方还请不吝赐教,转载请标明出处,内容如有改动更新,请看原博:http://www.cnblogs.com/hitcm/      如有任何问题,feel free to ...

  5. Win10系统下安装Ubuntu16.04.3教程与设置

    在Win10上刚刚装好Ubuntu16.04.3,装了不下于10次,期间出现很多问题,趁着还有记忆,写下这篇教程,里面还有Ubuntu系统的优化与Win10的一些设置. Part 1 制作Ubuntu ...

  6. 用 EasyUEFI 在 Win8/10 中硬盘安装 Ubuntu16.04图文教程

    用 EasyUEFI 在 Win8/10 中硬盘安装 Ubuntu 作者:TeliuTe 来源:基础教程网 1.准备Ubuntu安装文件 1)下载带amd的64位 Ubuntu 桌面版光盘镜像文件,如 ...

  7. 在win10下安装双系统ubuntu16.04.3教程

    闲暇了两天,终于想起来要装一个Liunx系统了.于是捣鼓了一番,实现了在Win10下安装Ubuntu16.04.3版本. 一.准备工作 下载Ubuntu 16.04.3镜像 准备一个2G以上的U盘 下 ...

  8. 安装WIN10+Ubuntu18.04安装教程（实测有效）

    转载原文链接:https://www.cnblogs.com/masbay/articles/10745170.html 安装过程中尤其注意分区时候的挂载点一定要选对!!!选择Ubuntu的EFI所在 ...

  9. VMware12安装虚拟机教程、Ubuntu16.04安装教程（包括vmware tools的安装）

    转自https://jingyan.baidu.com/article/c275f6ba07e269e33d756714.html 方法/步骤 1 虚拟机.Linux操作系统介绍及下载地址 虚拟机VM ...

随机推荐

  1. sql数据库如何在数据库里面把其中一个数据库的表复制到另一个数据库里面

    在sqlserver数据库里面,我们肯定有这样一个情况,假如我用的是SQL2008,如何把数据库里面的整个表以及表内数据复制到另外一个表中.那应该如何操作??有两种方法,我们一起来看一下 复制表结构: ...

  2. js滚轮事件需要注意的兼容性问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. bzoj 2017: [Usaco2009 Nov]硬币游戏【dp】

    废了废了,一个小dp都想不出来 把c数组倒序一下,变成1在最下,设f[i][j]为某一人取完j个之后还剩1~i的硬币,转移的话应该是f[i][j]=max(s[i]-f[i-k][k]),就是1~n的 ...

  4. bzoj 1616: [Usaco2008 Mar]Cow Travelling游荡的奶牛【dp】

    写了个bfs发现MLE了... 设f[t][i][j]为在t时刻走到(i,j)的方案数,转移和bfs一样 #include<iostream> #include<cstdio> ...

  5. [App Store Connect帮助]五、管理构建版本（3）在您提交以供审核前选择构建版本

    在提交 App 至“App 审核”前,请(从您为该版本上传的所有构建版本中)选择您想要提交的版本.一个 App Store 版本仅可关联一个构建版本.但是,在提交该版本至“App 审核”之前,您可以任 ...

  6. [Swift]关键字：Self、self与super

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. Unity项目 - Boids集群模拟算法

    1987年Craig W.Reynolds发表一篇名为<鸟群.牧群.鱼群:分布式行为模式>的论文,描述了一种非常简单的.以面向对象思维模拟群体类行为的方法,称之为 Boids ,Boids ...

  8. JavaScript编程艺术-第10章-10.2-实用的动画

    10.2-实用的动画 ***代码亲测可用*** HTML: <!DOCTYPE HTML> <html> <head> <meta charset=" ...

  9. 模拟 URAL 1149 Sinus Dances

    题目传送门 /* 模拟:找到规律分别输出就可以了,简单但是蛮有意思的 */ #include <cstdio> #include <algorithm> #include &l ...

  10. RaspberryPi cProfile使用

    使用sudo python -m cProfile -o 1.cprof your.py生成cprof文件 windows下安装snakeviz:pip install -i https://pypi ...