json和jsonp的使用格式

   说到AJAX就会不可避免的面临两个问题：

第一个是AJAX以何种格式来交换数据？

第二个是跨域的需求如何解决？

这两个问题目前都有不同的解决方案，

比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。

但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。而这就是本文将要讲述的内容。

JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没？一个是描述信息的格式，一个是信息传递双方约定的方法。

 什么是JSON？

前面简单说了一下，JSON是一种基于文本的数据交换方式，或者叫做数据描述格式，是否该选用它首先肯定要关注它所拥有的优点。 

JSON的优点：

1、基于纯文本，跨平台传递极其简单；

2、Javascript原生支持，后台语言几乎全部支持；

3、轻量级数据格式，占用字符数量极少，特别适合互联网传递；

4、可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的；

5、容易编写和解析，当然前提是你要知道数据结构；

JSON的格式或者叫规则：

JSON能够以非常简单的方式来描述数据结构，XML能做的它都能做，因此在跨平台方面两者完全不分伯仲。

1、JSON只有两种数据类型描述符，大括号{}和方括号[]，其余英文冒号:是映射符，英文逗号,是分隔符，英文双引号""是定义符。

2、大括号{}用来描述一组“不同类型的无序键值对集合”（每个键值对可以理解为OOP的属性描述），方括号[]用来描述一组“相同类型的有序数据集合”（可对应OOP的数组）。

3、上述两种集合中若有多个子项，则通过英文逗号,进行分隔。

4、键值对以英文冒号:进行分隔，并且建议键名都加上英文双引号""，以便于不同语言的解析。

5、JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个，字符串必须用双引号引起来，其余的都不用，日期类型比较特殊，这里就不展开讲述了，只是建议如果客户端没有按日期排序功能需求的话，那么把日期时间直接作为字符串传递就好，可以省去很多麻烦。

JSON实例：

// 描述一个人

var person = {
    "Name": "Bob",
    "Age": 32,
    "Company": "IBM",
    "Engineer": true
}

// 描述几个人

var members = [
    {
        "Name": "Bob",
        "Age": 32,
        "Company": "IBM",
        "Engineer": true
    },
    {
        "Name": "John",
        "Age": 20,
        "Company": "Oracle",
        "Engineer": false
    },
    {
        "Name": "Henry",
        "Age": 45,
        "Company": "Microsoft",
        "Engineer": false
    }
]

// 读取其中John的公司名称

var johnsCompany = members[1].Company;

// 描述一次会议

var conference = {
    "Conference": "Future Marketing",
    "Date": "2012-6-1",
    "Address": "Beijing",
    "Members":
    [
        {
            "Name": "Bob",
            "Age": 32,
            "Company": "IBM",
            "Engineer": true
        },
        {
            "Name": "John",
            "Age": 20,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "Henry",
            "Age": 45,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]
}

// 读取参会者Henry是否工程师

var henryIsAnEngineer = conference.Members[2].Engineer;

二、什么是JSONP?

JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用<script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的 JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

原理：

script标签的src属性，支持跨域；

它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；

服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

JSOP包含两部分：回调函数和数据，

• 回调函数是在响应到来时应该调用的函数，一般通过查询字符串添加；
• 数据就是传入回调函数中的JSON数据，确切的说，是一个JSON对象，可以直接访问。

核心：

• 发送的只能是get请求
• 假设浏览器的script标签获取到的eatFood()，将会调用当前页面中的eatFood方法，并从中获取到了从服务器发来的数据

JSONP的缺点

• 只能实现GET，没有POST；
• 从其他域中加载的代码可能不安全；
• 难以确定JSONP请求是否失败（XHR有error事件），常见做法是使用定时器指定响应的允许时间，超出时间认为响应失败。

7.为了方便客户端使用数据逐渐形成非正式传输协议jsonp
　　该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据 这样客户端就可以随意定制自己的函数来自动处理返回数据

测试实例：

  function ajaxFun(){
    var strUrl="http://www.b.com/demo/json.txt";
     $.ajax({ 
            type:"get",
            url:strUrl, 
	    dataType: 'jsonp',
	    jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
	    jsonpCallback: "flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
        success: function(data){ 
        	alert('您查到的信息：票价' + data.price + '元，余-票' + data.tickets + '张。');
        },
	   error: function(XMLHttpRequest,textStatus,errorThrown){
	   	 alert("error");
	                 // 状态码
                   console.log(XMLHttpRequest.status);
                    // 状态
                 console.log(XMLHttpRequest.readyState);
                    // 错误信息   
                   console.log(textStatus);
         }
		    }); 
		}

 其中  sucess中的代码片段也可以不写，可以单独建立一个回调函数来调用返回的数据。如下一样可以获得数据。

    var flightHandler = function (data) {
                  alert('您查到的信息：票价' + data.price + '元，余票' + data.tickets + '张。');
             };

需要注意的是，ajax跨域请求(jsonp)中,服务端返回数据格式必须是:

flightHandler({ "price":"120","tickets":"20"});

如果直接这样的json格式{ "price":"120","tickets":"20"}，将会报parser error的错误.

请注意这个函数最后的分号";",必须加上,否则,如果同一个页面有多个ajax请求,并且在数据没有返回时,再发出其它ajax请求时,

有可能出现parsererror出错提示.这种错误很隐敝,在开发时,不容易发现,在并发测试时,就很容易暴露出.