ylbtech-JSON:  介绍、应用

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

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

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

1. JSONP 应用返回顶部
 
2. 服务器端 JSONP 格式数据返回顶部
如客户想访问：http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction
假设客户期望返回 JSONP 数据：["customername1","customername2"]。
2.1 真正返回到客户端的数据显示为：(["customername1","customername2"])
2.2 （实例给出）真正返回到客户端的数据显示为：callbackFunction(["customername1","customername2"])
服务器端文件 jsonp.php 代码为：

  1. <?php
  2. header('Content-type: appliaction/json');
  3. //获取回调函数名
  4. $jsoncallback=htmlspecialchars($_REQUEST['jsoncallback']);
  5. //json 数据
  6. $json_data='["customername1","customername2"]';
  7. //输出 jsonp 格式的数据
  8. echo $jsoncallback . "(" .  $json_data . ")";
  9. ?>
3. 客户端实现 callbackFunction 函数返回顶部 
  1. <script type="text/javascript">
  2.     function callbackFunction(result, methodName) {
  3.         var html = '<ul>';
  4.         for (var i = 0; i < result.length; i++) {
  5.             html += '<li>' + result[i] + '</li>';
  6.         }
  7.         html += "</ul>";
  8.         document.getElementById("divCustomers").innerHTML = html;
  9.     }
  10. </script>

页面展示

  1. <div id="divCustomers"></div>
客户端页面完整代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>JSONP 实例</title>
  6. </head>
  7. <body>
  8.     <div id="divCustomers"></div>
  9.     <script type="text/javascript">
  10.         function callbackFunction(result,methodName)
  11.         {
  12.             var html = '<ul>';
  13.             for (var i = 0; i < result.length; i++)
  14.             {
  15.                 html += '<li>' + result[i] + '</li>';
  16.             }
  17.             html += "</ul>";
  18.             document.getElementById("divCustomers").innerHTML = html;
  19.         }
  20.     </script>
  21.     <script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
  22. </body>
  23. </html>
4. jQuery 使用 JSONP返回顶部
以上代码可以使用 jQuery 代码实例：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>JSNP 实例</title>
  6.     <meta charset="utf-8" />
  7.     <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
  8. </head>
  9. <body>
  10.     <div id="divCustomers"></div>
  11.     <script>
  12.         $.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function (data) {
  13.             var html = '<ul>';
  14.             for(var i=0;i<data.length;i++)
  15.             {
  16.                 html += '<li>' +data[i]+ '</li>';
  17.             }
  18.             html += "</ul>";
  19.             $('#divCustomers').html(html);
  20.         });
  21.     </script>
  22. </body>
  23. </html>
5.返回顶部
 
 
6.返回顶部
 
7.返回顶部
 
8.返回顶部
 
9.返回顶部
 
10.返回顶部
 
 
11.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

JSON: 介绍、应用的更多相关文章

  1. xml与json 介绍

    一.JSON数据格式 1)概念:json是一种网络数据传输格式,有值/对象:{“A”:1,”B”:”2”…}词典:对象的序列:[,,,,,]数组两种数据类型 2)URLWithString 将字符串网 ...

  2. Json介绍以及解析Json

    首先,介绍一下Json字串,以下Json的介绍引用网上资料. 简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应 ...

  3. JSON介绍及Android最全面解析方法(Gson、AS自带org.son、Jackson解析)

    前言 今天,我们来介绍一下现今主流的数据交换格式-JSON! 相同作为主流为数据交换格式-XML,假设有兴趣能够阅读我写的XML及其DOM.SAX.PULL解析方法和对照 文件夹 定义 JavaScr ...

  4. Json介绍与Ajax技术

    AJAX   AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据 ...

  5. 【】JSON介绍

    0.说明 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写. 同时也易于机器解析和生成. 它是基于JavaScript Programm ...

  6. 1.4 jQuery方法，JSON介绍

    jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...

  7. JSON介绍

    JSONhttp://www.json.org/json-zh.html JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机 ...

  8. iOS开发网络篇—JSON介绍

    一.什么是JSON JSON是一种轻量级的数据格式,一般用于数据交互 服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除外) JSON的格式很像OC中的字典和数组 {" ...

  9. 安卓Json介绍（转）。

    1.JSON(JavaScript Object Notation) 定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式, ...

随机推荐

  1. chmod、chown、umask、lsattr/chattr

    1.chmod 命令 改变文件权限 文件对于使用者来说,有 读 .写 .执行 (当然,还有删除),而这里主要说的是,读写执行(rwx)    r  w  x    对应的是 读写执行,也对应 :  4 ...

  2. Python IDLE theme

    #转自 http://www.2cto.com/os/201507/418532.html #win10+python3.5.2 #保护视力 .idlerc 目录下新建名为 config-highli ...

  3. 【idea】清除类中无用的包

    快捷键 ctrl+alt+o 自动清除的配置方法 可以settings-general-auto import-java项,勾选optimize imports on the fly,在当前项目下会自 ...

  4. WebService 学习记录

    -------------------------------------------PS:这个WebService 服务必须一直开着,关闭就没法访问了 Web Service 教程 一.webser ...

  5. 开机或者安装系统时提示tsc: Fast TSC calibration failed解决方法

    其实这个问题很简单,主要是时间不对的问题. 就拿我遇到这个问题来说.我是在vm虚拟机中安装了xenserver,然后在物理机安装xencenter连接xenserver,然后在安装新的虚拟机时遇到这个 ...

  6. HI35XX NVR

    NVR类型的:3515-3520-3531-3535-3536 后面的高端

  7. java int and Integer

    本文转自:https://www.cnblogs.com/guodongdidi/p/6953217.html int和Integer的区别 1.Integer是int的包装类,int则是java的一 ...

  8. openstack--8--控制节点部署Dashboard

    Horizon介绍 Dashboard服务,这里具体的产品就是Horizon1.它提供一个Web界面操作Openstack的系统2.使用Django框架基于Openstack API开发3.支持将Se ...

  9. 家庭记账本web开发

    这个系统的整体结构: GitHub:https://github.com/lq1998lq/Test.git com.action包: package com.action; import java. ...

  10. 如何使用redis计数器防止并发请求

    需求描述 最近项目中有个需求,短信发送的并发请求问题:业务需求是需要限制一个号码一分钟内只能获取一次随机码,之前的实现是短信发送请求过来后,先去数据库查询发送记录,根据上一次的短信发送时间和当前时间比 ...