javascript

戏说JSON与JSONP

一、什么是JSON

  • JSON指的是Javascript对象表示法(Javascript Object Notation)
  • JSON是轻量级的文本数据交换格式或数据描述格式
  • JSON使用javascript语法来描述对象，但JSON仍然独立于语言和平台
  • JSON和文字对象唯一的语法差异在于，在JSON中，属性名称需要包装在引号中才能称为合法的JSON。而对象字面量中，仅当属性名称不是有效的标识符时才会需要引号。比如，字符之间有空格{“first name”,”Sem”}

二、JSON的优点

  • 基于纯文本，便于跨平台传递；
  • Javascript原生支持，后台语言几乎全部支持；
  • 轻量级数据格式，占用字符数量极少，适合网络传输；
  • 容易编写和解析，格式化处理后可读性较强

三、使用JSON

1、定义及使用
//描述一个人
var person = {
    "name" : "Semlinker",
    "age" : "28"    
}
//获取这个人的姓名
var name = person.name;
2、常用操作
//字符串转JSON
var jsStr = '{"mykey" : "my value"}';
var data = JSON.parse(jsStr);
//序列化为一个JSON字符串
var mycar = {
    name : "ferrari",
    color : "yellow"
};
var jsonstr = JSON.stringify(mycar);

四、什么是JSONP

  • Javascript出于安全方面的考虑，不允许跨域调用其他页面的对象
  • Web中含有src属性的组件，都拥有跨域的能力，比如script、img、iframe组件
  • 当前阶段如果想通过纯web端跨域访问数据只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，以便供客户端进一步调用和处理
  • 恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据
  • 这样一来解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件，显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去
  • 客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样
  • 为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了

五、JSONP的实现

一、客户端实现
<!DOCTYPE html>
<html lang="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<head>
    <title></title>
    <script type="text/javascript">
        // 获取航班信息查询结果后的回调函数
        var flightHandler = function(data){
        console.info('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.ticket + ' 张。');
        };
        // 提供jsonp服务的url地址（不管是什么类型的地址，最终的返回值都是一段javascript代码）
       var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
        // 创建script标签，设置其属性
        var script = document.createElement('script');
        script.setAttribute('src', url);
        // 把script标签加入head，此时调用开始
       document.getElementsByTagName('head')[0].appendChild(script); 
   </script>
</head>
    <body></body>
</html>
二、服务端实现
flightHandler({
  "code": "CA1998",
  "price": 1780,
  "tickets": 5
});

六、ajax与jsonp的区别

  • ajax和jsonp这两种技术在调用方式上很相似，都是请求一个url，然后对服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装
  • ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取远程内容，而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本
  • ajax与jsonp的区别不在于是否支持跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取
  • jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务
Fork me on GitHub