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 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
详解uniapp的全局变量实现方式
Jan 11 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
使用php清除bom示例
2014/03/03 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
python简单实现AES加密和解密
2019/03/28 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
Python常用编译器原理及特点解析
2020/03/23 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
办公室内勤工作职责
2013/12/11 职场文书
小学教师办公室制度
2014/02/03 职场文书
太太口服液广告词
2014/03/20 职场文书
2015年导购员工作总结
2015/04/25 职场文书
聘任合同书
2015/09/21 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript