对于JSON和JSONP的理解

最新推荐文章于 2022-03-05 09:37:37 发布

GY_Grace

最新推荐文章于 2022-03-05 09:37:37 发布

阅读量575

点赞数

文章标签： jsonp json

本文链接：https://blog.csdn.net/GY_Grace/article/details/72863677

版权

在前端的开发过程中不可避免地需要与后台产生交互，在与后台传输地过程中我们选择地是JSON数据格式，在网上查询和学习关于JSON的知识的同时总是会看到JSONP这个词，在这里记录一下我对JSON和JSONP的理解。

1.什么是JSON？

很容易知道，JSON是一种数据交换格式，具体来讲大概长下面这个样子：

// 描述一个人
var person = {
    "Name": "Bobby",
    "Age": 30,
    "Company": "IBM",
    "Engineer": true
}

JSON被选为较为常用的数据交换格式是因为它总的来说具备以下几个优点：

1.基于纯文本，跨平台传递十分简单

2.有JavaScript原生支持，只要是后台语言几乎都支持这一数据格式

3.是一种轻量级的数据格式，占用字符量较少，非常适合网络传输

4.可读性很强，结构性也很强

5.容易编写和解析，读取信息也相对容易

2.什么是JSONP？

JSONP是一种由开发人员创造出的非官方跨域数据交互协议，是一种信息传递的双方约定的传递信息的方法。

那么这个信息传递的方法是如何产生的呢？

众所周知，Ajax直接请求普通文件会存在跨域无权访问的问题，但是web页面上调用js文件时，却不受跨域的影响。

因此，如果想要通过单纯的web端进行跨域数据访问，那我们只能在远程服务器上把数据装进js格式的文件里，供客户端调用。

恰好有一种叫做json的数据格式不仅具备很多优点，还被js原生支持，那么web客户端就可以像调用脚本一样，调用跨域服务器上动态生成的js格式文件来获得自己所需要的数据。为了方便客户端使用数据，这种方式逐渐形成了一种非正式传输协议，人们把它称之为JSONP。

这个协议的一个特点是允许用户传递一个callback参数给服务器，服务器返回数据时会将这个callback作为函数名来包裹JSON数据，那么用户就可以根据这一点来定制自己的函数处理返回的数据了。

下面是jquery使用jsonp的代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
     <title> </title>
      <script type="text/javascript" src=jquery.min.js"></script>
      <script type="text/javascript">
     jQuery(document).ready(function(){ 
        $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
             success: function(json){
                 alert('您查询到的信息：票价： ' + json.price + ' 元，余量： ' + json.tickets + ' 个。');
             },
             error: function(){
                 alert('fail');
             }
         });
     });
     </script>
     </head>
  <body>
  </body>
 </html>