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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 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实现获取图片颜色值的方法
2014/07/11 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
Python中操作MySQL入门实例
2015/02/08 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
生物科学专业个人求职信范文
2013/12/07 职场文书
药剂专业求职信
2014/06/20 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
通知的格式范文
2015/04/27 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers