Json和Jsonp理论实例代码详解


Posted in Javascript onNovember 15, 2013

什么是Json?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用
完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。易于人
阅读和编写,同时也易于机器解析和生成。
JSON有两种结构:
json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组2种结构,通过这两种结构可以表示各种复杂的结构
1、对象:对象在js中表示为“{}”扩起来的内容,数据结构为 {key:value,key:value,...}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key 获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种。
2、数组:数组在js中是中括号“[]”扩起来的内容,数据结构为 ["java","javascript","vb",...],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。
 JSON的格式或者叫规则:
JSON能够以非常简单的方式来描述数据结构,XML能做的它都能做,因此在跨平台方面两者完全不分伯仲。
 1、JSON只有两种数据类型描述符,大括号{}和方括号[],其余英文冒号:是映射符,英文逗号,是分隔符,英文双引号""是定义符。
 2、大括号{}用来描述一组“不同类型的无序键值对集合”(每个键值对可以理解为OOP的属性描述),方括号[]用来描述一组“相同类型的有序数据集合”(可对应OOP的数组)。
 3、上述两种集合中若有多个子项,则通过英文逗号,进行分隔。
 4、键值对以英文冒号:进行分隔,并且建议键名都加上英文双引号"",以便于不同语言的解析。
 5、JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个,字符串必须用双引号引起来,其余的都不用,日期类型比较特殊,这里就不展开讲述了,只是建议如果客户端没有按日期排序功能需求的话,那么把日期时间直接作为字符串传递就好,可以省去很多麻烦。
JSON实例

// 描述一个人
    var Person = {
        "Name": "aehyok",
        "Age": 25,
        "Company": "aehyok",
        "Engineer": true
    }
    //获取这个人的信息
    var PersonAge = Person.Age;
    alert(PersonAge);
    //描述几个人
    var members = [
        {
            "Name": "aehyok",
            "Age": 25,
            "Company": "aehyok",
            "Engineer": true
        },
        {
            "Name": "lqm",
            "Age": 25,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "thl",
            "Age": 22,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]
    // 读取其中lqm的公司名称
        var lqmCompany = members[1].Company;
        alert(lqmCompany);
    // 描述一次会议
    var conference = {
        "Conference": "Future Marketing",
        "Date": "2013-5-22",
        "Address": "ShenZhen",
        "Members":
        [
            {
                "Name": "aehyok",
                "Age": 25,
                "Company": "IBM",
                "Engineer": true
            },
            {
                "Name": "lqm",
                "Age": 25,
                "Company": "Oracle",
                "Engineer": false
            },
            {
                "Name": "Thl",
                "Age": 20,
                "Company": "Microsoft",
                "Engineer": false
            }
        ]
    }
        // 读取参会者Thl是否工程师
        var ThlIsAnEngineer = conference.Members[2].Engineer;
        alert(ThlIsAnEngineer);

什么是Jsonp
1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;
2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);
3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;
4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;
5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。
6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。
7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
如果对于callback参数如何使用还有些模糊的话,我们后面会有具体的实例来讲解。
Jsonp的客户端具体实现
1.先来个最简单的一个。首先我在IIS中建立了两个网站,当然端口一个是888另外一个是8888,我们就把888作为本地服务器,8888作为远程服务器的。
现在本地有这样一个网页
<html>
    <head>
        <title>index.html</title>
        <script type="text/javascript" src="http://localhost:8888/remote.js" ></script>
    </head>
    <body></body>
</html>

其中JavaScript文件引用的是8888的remote.js文件。
alert('我是远程文件');

运行本地服务器网站后效果为
Json和Jsonp理论实例代码详解
现在最简单的跨域成功了。
2.我们在1的基础上进行修改一下,先看代码
<html>
    <head>
        <title>index.html</title>
        <script type="text/javascript">
            function aehyok(data)
            {
                alert(data.result);
            }
        </script>
        <script type="text/javascript" src="http://localhost:8888/remote.js" ></script>
    </head>
    <body></body>
</html>

先将本地文件中添加一个js函数,然后调用远程服务器的js文件。
aehyok({"result":"我是远程js带来的数据"});

这是在远程服务端js文件中的代码。
运行后效果
Json和Jsonp理论实例代码详解
调用成功。显示本地函数被跨域的远程js调用成功,并且还接收到了远程js带来的数据。很欣喜,跨域远程获取数据的目的基本实现了,但是又一个问题出现了,我怎么让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,而这些服务对象各自的本地函数都不相同啊?我们接着往下看。
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "get",
            async: false,
            url: "../Home/aehyok",
            dataType: "jsonp",
            jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
            jsonpCallback: "aehyok", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
            success: function (json) {
                alert("第二次"+json.result);
            },
            error: function () {
                alert('fail');
            }
        });
    });
    function aehyok(data) {
        alert("第一次"+data.result);
    }
</script>

我是在asp.net mvc3.0项目中,所以后台在控制器中
public string aehyok()
        {
            return "aehyok({\"result\":\"我是远程js带来的数据\"})";
        }

然后执行结果为
Json和Jsonp理论实例代码详解
通过调试可以发现URLhttp://localhost:6247/Home/aehyok?callback=aehyok&_=1369235398641
callback=aehyok就是回调函数,在调用完后台返回是先执行aehyok(data)。
然后又执行success(json)。所以有两次的弹窗。
我现在只不过是在一个项目下进行,其实道理还是一样的。
Javascript 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
javascript实现五星评分功能
Nov 10 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
React路由管理之React Router总结
May 10 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
js实现验证码干扰(静态)
Feb 22 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 #Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 #Javascript
简洁Ajax函数处理(示例代码)
Nov 15 #Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 #Javascript
JavaScript?Apple设备检测示例代码
Nov 15 #Javascript
jquery放大镜效果超漂亮噢
Nov 15 #Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
收藏的一个php小偷的核心程序
2007/04/09 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php 中英文语言转换类代码
2011/08/11 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
详解jQuery选择器
2016/12/21 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
使用Python更换外网IP的方法
2018/07/09 Python
解析Python3中的Import
2019/10/13 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
总经理职责范文
2013/11/08 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
转让协议书范本
2014/09/13 职场文书