通过实例解析json与jsonp原理及使用方法


Posted in Javascript onSeptember 27, 2020

1.json与jsonp的引入

在ajax中 JSON用来解决数据交换问题,而JSONP来实现跨域。

备注:跨域也可以通过服务器端代理来解决;

理解:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

2.JSON:是一种基于文本的数据交换方式,或者叫做数据描述格式,是否该选用它首先肯定要关注它所拥有的优点。

JSON的优点:

  • 1) 基于纯文本,跨平台传递极其简单;
  • 2) Javascript原生支持,后台语言几乎全部支持;
  • 3) 轻量级数据格式,占用字符数量极少,特别适合互联网传递;
  • 4) 可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的;
  • 5) 容易编写和解析,当然前提是你要知道数据结构;

JSON的格式或者叫规则:

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

  • 1) JSON只有两种数据类型描述符,大括号{}和方括号[],其余英文冒号:是映射符,英文逗号,是分隔符,英文双引号""是定义符。
  • 2) 大括号{}用来描述一组“不同类型的无序键值对集合”(每个键值对可以理解为OOP的属性描述),方括号[]用来描述一组“相同类型的有序数据集合”(可对应OOP的数组)。
  • 3) 上述两种集合中若有多个子项,则通过英文逗号,进行分隔。
  • 4) 键值对以英文冒号:进行分隔,并且建议键名都加上英文双引号"",以便于不同语言的解析。
  • 5) JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个,字符串必须用双引号引起来,其余的都不用,日期类型比较特殊,这里就不展开讲述了,

只是建议如果客户端没有按日期排序功能需求的话,那么把日期时间直接作为字符串传递就好,可以省去很多麻烦。

示列1:{} 用来描述一组“不同类型的无序键值对集合”
    var person = {
      "Name": "Bob",
      "Age": 32,
      "Company": "IBM",
      "Engineer": true
    }
  示列2:[] 用来描述一组“相同类型的有序数据集合”
    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;
  
  示列3:{}中包含的[]使用
    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;

3.什么是JSONP

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

3.1 JSOPN跨域的原理:script标签的src属性,支持跨域;它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

3.2 JSOP包含两部分:回调函数和数据,回调函数是在响应到来时应该调用的函数,一般通过查询字符串添加; 数据就是传入回调函数中的JSON数据,确切的说,是一个JSON对象,可以直接访问。

3.3 JSONP的缺点:

1) 只能实现GET,没有POST;

2) 从其他域中加载的代码可能不安全;难以确定JSONP请求是否失败(XHR有error事件),常见做法是使用定时器指定响应的允许时间,超出时间认为响应失败。

为了方便客户端使用数据逐渐形成非正式传输协议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出错提示.这种错误很隐敝,在开发时,不容易发现,在并发测试时,就很容易暴露出.

服务端代码示列:

public String jsonReturn(HttpServletResponse response, String callback, Map<String, Object> jsonMap) {
    if (org.apache.commons.lang.StringUtils.isEmpty(callback)) {
      return appAjaxJson(response, getJson(jsonMap));
    }
    return appAjaxJson(response, callback + "(" + getJson(jsonMap) + ")");
  }

  public String appAjaxJson(HttpServletResponse response, String jsonString) {
    return appAjax(response, jsonString, "text/html");
  }

  public String appAjax(HttpServletResponse response, String content, String type) {
    try {
      response.setContentType(type + ";charset=UTF-8");
      response.setHeader("Access-Control-Allow-Origin", "*");//表示支持跨域请求
      // 如果IE浏览器则设置头信息如下
      if ("IE".equals(type)) {
        response.addHeader("XDomainRequestAllowed", "1");
      }
      response.setHeader("Pragma", "No-cache");
      response.setHeader("Cache-Control", "no-cache");
      response.setDateHeader("Expires", 0);
      response.getWriter().write(content);
      response.getWriter().flush();
    } catch (IOException e) {
      this.logException(e);
    }
    return null;
  }

4、JSON.stringify()、JSON.parse()、toString()

4.1 JSON.stringify():将入参(JavaScript值)转换为 JSON 字符串;

示列1:
  let arr = [1,2,3];
  JSON.stringify(arr);//"[1,2,3]"
  typeof JSON.stringify(arr);//"string"

  示例2:
  //判断数组是否包含某对象
  let data = [
    {name:'echo'},
    {name:'听风是风'},
    {name:'天子笑'},
    ],
    val = {name:'天子笑'};
  JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true

  //判断两数组/对象是否相等
  let a = [1,2,3],
    b = [1,2,3];
  JSON.stringify(a) === JSON.stringify(b);//true

4.2 JSON.parse():将JSON字符串转为一个对象;

示列:

let string = '[1,2,3]';
console.log(JSON.parse(string))//[1,2,3]
console.log(typeof JSON.parse(string))//object

4.3 JSON.stringify()与 toString()的区别

let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
arr.toString();//1,2,3

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 #Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 #Javascript
react-intl实现React国际化多语言的方法
Sep 27 #Javascript
Javascript异步流程控制之串行执行详解
Sep 27 #Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 #Javascript
Openlayers实现测量功能
Sep 25 #Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 #Javascript
You might like
php 文件状态缓存带来的问题
2008/12/14 PHP
深入PHP数据加密详解
2013/06/18 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
php检测文本的编码
2015/07/26 PHP
javascript preload&amp;lazy load
2010/05/13 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
python 对key为时间的dict排序方法
2018/10/17 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
营销与策划应届生求职信
2013/11/04 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
开票员岗位职责
2015/02/12 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
婚宴主持词
2015/06/30 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书