JSON的基本概念

╰半夏微凉° 2023-10-12 20:29 12阅读 0赞

## 前言 ##

### web1.0时代 ###

早期网站我们进行登录操作,如果登录失败,需要重新刷新页面才能重新登录,而且不点击提交按钮,就不知道密码输入错误(同步)

注册的时候,发现手机已经注册过了,但是你只是输入,没有提交,它从数据库查询进行提(异步)

现在大多数都网站,都是局部刷新,不刷新整个页面的情况下,实现页面更新

前后端分离,数据交互变得异常重要,JSON就是王者

### web2.0时代 ###

最重要的一个因素就是ajax

1.  ## 什么是ajax? ##

Ajax即**A**synchronous **J**avascript **A**nd **X**ML（异步JavaScript和[XML][]）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: [HTML][] 或 [XHTML][], CSS, [JavaScript][], [DOM][], XML, [XSLT][], 以及最重要的[XMLHttpRequest][]，使用Ajax技术网页应用能够快速地将增量更新呈现在[用户界面][Link 1]上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

1.  ## 什么是JSON? ##

**JSON:** **JavaScript Object Notation（JavaScript 对象标记法）** \*\*\*\***是一种存储和交换数据的语法，是一种轻量级的数据交换格式 “\{\}”**

[JSON][]([JavaScript][JavaScript 1] Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 [ECMAScript][] (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

### **交换数据** ###

当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。

JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。

我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。

以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

1.  ## JSON的使用语法格式 ##
    
    1.  对象表示为键值对
    2.  数据由逗号分隔(最后一个数据不用加逗号)
    3.  花括号保存对象\{\}
    4.  方括号保存数组

JSON键值对是用来保存JS对象的一种方式,和JS对象的写法也大同小异,键值对组合中的键名写在前面并且用双引号""来包裹,使用冒号:分隔,然后紧接着值:

{"name":"weiyihe"}
    
    {"age":"22"}
    
    {"sex":"男"}

1.  ## JSON和JS的区别 ##

JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串

可以理解成JSON是被JS toString后的格式

var js={a:"hello",b:"world"};  //这是一个JS,注意键名也是使用引号包裹的
    
        var json={"a":"hello","b":"world"}; //这是一个json字符串,本质是一个字符串

1.  ## JSON和JS对象的互转 ##
    
    1.  要实现从JSON字符串转换为JS对象,使用JSON.parse()方法:

var js=JSON.parse('{a:"hello",b:"world"}');  //JOSN字符串转换为JS对象

1.  要实现从JS对象转换为JSON字符串,使用JSON.stringify()方法:

var json=JSON.stringify({"a":"hello","b":"world"}); //JS对象转化为JSON字符串

[XML]: https://baike.baidu.com/item/XML/86251
[HTML]: https://baike.baidu.com/item/HTML/97049
[XHTML]: https://baike.baidu.com/item/XHTML/316621
[JavaScript]: https://baike.baidu.com/item/JavaScript/321142
[DOM]: https://baike.baidu.com/item/DOM/50288
[XSLT]: https://baike.baidu.com/item/XSLT/1330564
[XMLHttpRequest]: https://baike.baidu.com/item/XMLHttpRequest/6788735
[Link 1]: https://baike.baidu.com/item/%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2/6582461
[JSON]: https://baike.baidu.com/item/JSON
[JavaScript 1]: https://baike.baidu.com/item/JavaScript
[ECMAScript]: https://baike.baidu.com/item/ECMAScript