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. bzoj 1599: [Usaco2008 Oct]笨重的石子【枚举】

    --我为什么要写这种题解-- 枚举投掷情况即可 #include<iostream> #include<cstdio> using namespace std; int s1, ...

  2. 'latin-1' codec can't encode characters in position解决字符问题

    当遇到这样的报错时,原因是: pymysql库在处理mysql语句时,默认的编码方式是'latin-1',这种编码方式能识别的字符是有限的 解决办法:找到\site-packages\pymysql\ ...

  3. ACM博弈论总结

    一.Bash博弈 1.问题模型:只有一堆n个物品,两人轮流从这堆物品中取物,最多取m个,最后取光者胜. 2.解决思路:当n=m+1时,由于一次最多取m个,无论先取者拿走多少个,后取者都能一次拿走剩余的 ...

  4. STL之set和multiset

    set是与集合相关的容器,STL为我们提供了set的实现,在编程题中遇见集合问题直接调用是十分方便 SET set模版类的定义在头文件<set>中. 定义set对象的示例代码如下: set ...

  5. 题解报告：poj 1426 Find The Multiple（bfs、dfs）

    Description Given a positive integer n, write a program to find out a nonzero multiple m of n whose ...

  6. windows 中常用的 cmd 命令汇总

    查看系统基本信息: cmd -> systeminfo 或 run -> dxdiag 查询主板出厂日期: cmd -> wmic bios get releasedate 关闭本地 ...

  7. Entityframework Code First 系列

    总篇, 下面会添加每个小篇的链接. 目录如下: 项目搭建 ……

  8. Maven对不同的测试环境用不同的参数进行打包

    通过mvn package -P ${env} 加载不同配置文件 1.pom.xml中的配置 filter-dev.properties jdbc.properties

  9. Linux 学习（二）

    Linux相关命令 命令 说明 startx 当前用户界面切换至图形界面 init5 切换至另一用户的图形化界面 init3 从图形界面切换回文本界面 pwd 显示当前用户路径 logout 注销 s ...

  10. Java基础——异常

    一.什么是异常  异常的英文单词是exception,字面翻译就是“意外.例外”的意思,也就是非正常情况.事实上,异常本质上是程序上的错误,包括程序逻辑错误和系统错误.比如使用空的引用.数组下标越界. ...