Json和Jsonp和ajax的本质和区别

柔情只为你懂 2022-05-19 06:58 210阅读 0赞

**json和jsonp和ajax的实质和区别**  
**ajax的两个问题**  
　　1.ajax以何种格式来交换数据  
　　2.跨域的需求如何解决  
　　　　数据跨域用自定义字符串或者用XML来描述  
　　　　跨域可以用服务器代理来解决  
**jsonp来跨域**  
　　json是一种数据交换格式 “暗号” 描述信息格式  
　　jsonp是非官方跨域数据交互协议 “接头方式” 信息传递双方约定的方法

**json是基于文本的数据交换方式或者数据描述格式**  
　　　　**json的优点**  
　　　　　　1.基于纯文本，跨平台传递极其简单；  
　　　　　　2.javascript原生支持，后台语言几乎全部支持  
　　　　　　3.轻量级数据格式，占用字符数量极小，特别适合互联网传递  
　　　　　　4.可读性比较强，不必xml那么一目了然但在合理的依次缩进之后还是很容易识别的  
　　　　　　5.容易编写和解析，当然前提是知道数据结构  
　　　　**json的格式或者规则**  
　　　　　　json以非常简单的方式来描述数据结构 xml能做的它都能做  
　　　　　　1.json的数据两种数据类型 大括号\{\}和方括号\[\] 其余英文冒号,是分隔符 冒号:是映射符 英文双引号""是定义符  
　　　　　　2.\{\}是描述一组 不同类型的无序键值对集合 每个键值对理解为OOP的属性描述  
　　　　　　    \[\]是描述一组 相同类型的有序数据的集合 对应OPP的数组  
　　　　　　3.\{\}不同类型无序键值对和\[\]相同类型有序集合中有有多个子项，通过英文逗号分隔  
　　　　　　4.键值对以英文冒号:分隔并且建议键名都加英文双引号""，以便不同语言的解析  
　　　　　　5.json内部常用数据类型是字符串(必须用双引号引起来其他不用) 数字 布尔 日期 null   
　　　　　　　　日期比较特殊？？？？？？

![复制代码][copycode.gif]

1             var person = { //一个人的描述
     2                 "name":"Bob",
     3                 "Age":32,
     4                 "Company":"IBM",
     5                 "Engineer":true
     6             }  
     7             var personAge = person.Age;
     8             var conference = {        //描述一次会议
     9                 "Conference": "Future Marketing",
    10                 "Date": "2012-6-1",
    11                 "Address": "Beijing",
    12                 "Members":
    13                     [
    14                         {
    15                             "Name": "Bob",
    16                             "Age": 32,
    17                             "Company": "IBM",
    18                             "Engineer": true
    19                         },
    20                         {
    21                             "Name": "John",
    22                             "Age": 20,
    23                             "Company": "Oracle",
    24                             "Engineer": false
    25                         },
    26                         {
    27                             "Name": "Henry",
    28                             "Age": 45,
    29                             "Company": "Microsoft",
    30                             "Engineer": false
    31                         }
    32                     ]
    33                 }
    34                 var henryIsAnEngineer = conference.Members[2].Engineer;// 读取参会者Henry是否工程师

![复制代码][copycode.gif]

**jsonp的产生原因**  
　　1.Ajax直接请求普通文件存在跨域无权限访问的问题（静态页、动态页、web服务、wcf只要是跨域请求一律不准）  
　　2.web的页面上调用js文件是不受跨域的影响（凡拥有src属性的标签都拥有跨域能力script img iframe）  
　　3.可以判断 现在想通过纯web端(ActiveX控件、服务端代理、H5之Websocket等方式不算)跨域访问数据就只有一种可能，就是在远程服务器上设法把数据装进js格式的文件里，供客户度调用和进一步处理；  
　　4.json的纯字符数格式可以简洁的描述复杂数据还被js原生支持  
　　5.web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json)，服务器之所以要动态生成json文件目的把客户端需要的数据装入进去  
　　6.客户端在对json文件调用成功后获得自己所需的数据剩下的就按照自己需求进行处理和展现，这种获取远程数据的方式非常像ajax其实并一样  
　　7.为了方便客户端使用数据逐渐形成非正式传输协议jsonp  
　　　　该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据 这样客户端就可以随意定制自己的函数来自动处理返回数据

![复制代码][copycode.gif]

1     <!DOCTYPE html>
     2         <html>
     3             <head>
     4              <title></title>
     5             </head>
     6             <body>
     7                 <script>
     8                 var flightHandler = function (data) {
     9                     alert('您查到的信息：票价' + data.price + '元，余票' + data.tickets + '张。');
    10                 };
    11                 var url = "https://www.baidu.com/jsonp/flightResult.aspx?code=1991&callback=flightHandler";
    12                 var script = document.createElement('script');
    13                     script.setAttribute('scr',url);
    14                 document.getElementsByTagName('head')[0].appendChild(script);
    15 
    16                 </script>
    17             </body>
    18         </html>

![复制代码][copycode.gif]

jsonp.html

1             flightHandler({
    2                 "code":"1991",
    3                 "price":1991,
    4                 "tickets":5
    5             });

**jQuery如何实现jsonp调用**

![复制代码][copycode.gif]

1     <!DOCTYPE html>
     2     <html>
     3     <head>
     4         <title>123</title>
     5         <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
     6         <script>
     7             $(document).ready(function () {
     8                 $.ajax({
     9                     type: "get",
    10                     async: false,
    11                     url: "https://www.baidu.com/jsonp/flightResult.aspx?code=1991&callback=flightHandler",
    12                     dataType: "jsonp",
    13                     jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
    14                     jsonpCallback: "flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
    15                     success: function(json) {
    16                         alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
    17                     },
    18                     error: function() {
    19                         alert("123456");
    20                     }
    21 
    22                 });
    23             });
    24         </script>
    25     </head>
    26     <body>
    27     </body>
    28     </html>

![复制代码][copycode.gif]

**ajax和jsonp的实质核心、区别联系**  
　　1.ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；  
　　2.实质不同  
　　　　ajax的核心是通过xmlHttpRequest获取非本页内容  
　　　　jsonp的核心是动态添加script标签调用服务器提供的js脚本  
　　3.区别联系  
　　　　不在于是否跨域  
　　　　ajax通过服务端代理一样跨域  
　　　　jsonp也不并不排斥同域的数据的获取  
　　4.jsonp是一种方式或者说非强制性的协议  
　　　　ajax也不一定非要用json格式来传递数据

[copycode.gif]: /images/20220519/1ecdc034d5f949589eaca4fe32c377b6.png