前后端交互---数据格式

一.数据格式

1.什么是数据交换格式

数据交换格式,就是服务器端客户端之间进行数据传输与交换的格式。
前端领域,经常提及的两种数据交换格式分别是XMLJSON。其中XML用的非常少,所以,我们重点要学习的数据交换格式就是JSON。

二.XML

 1.什么是xml

 XML的英文全称是EXtensible Markup Language,即可扩展标记语言。因此,XML和HTML类似,也是一种标记语言

 

2.xml和html的区别 

XML和HTML虽然都是标记语言,但是,它们两者之间没有任何的关系。

HTML被设计用来描述网页上的内容,是网页内容载体


XML被设计用来传输和存储数据,是数据载体

3.xml的缺点 

 

三.JSON

1.什么是json 

 概念:JSON的英文全称是JavaScript Object Notation,即“JavaScript对象表示法”。简单来讲,JSON就是Javascript对象和数组的字符串表示法,它使用文本表示一个JS对象或数组的信息,因此,JSON的本质是字符串


作用:JSON是一种轻量级的文本数据交换格式,在作用上类似于XML,专门用于存储和传输数据,但是JSON 比 XML更小、更快、更易解析


现状:JSON是在2001年开始被推广和使用的数据格式,到现今为止,JSON已经成为了主流的数据交换格式。

2.json的两种结构 

JSON就是用字符串来表示Javascript 的对象和数组。所以,JSON中包含对象数组两种结构,通过这两种结构的相互嵌套,可以表示各种复杂的数据结构

1.对象结构


对象结构:对象结构在JSON 中表示为{}括起来的内容。数据结构为{key: value, key: value,...}的键值对结构。其中,key必须是使用英文的双引号包裹的字符串,value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

2.数组结构 

数组结构:数组结构在JSON 中表示为[]括起来的内容。数据结构为[ "java" , "javascript", 30, true ... ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

3.json语法注意事项 

① 属性名必须使用双引号包裹
②字符串类型的值必须使用双引号包裹

③JSON中不允许使用单引号表示字符串

④JSON中不能写注释
⑤JSON的最外层必须是对象或数组格式

⑥不能使用undefined或函数作为JSON的值

JSON的作用:在计算机与网络之间存储和传输数据。
JSON的本质:用字符串来表示Javascript对象数据或数组数据
 

4.JSON与JS的对象的关系 

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

 5.JSON与JS对象相互转换

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

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

 

6.序列化与反序列化 

 把数据对象转换为字符串的过程,叫做序列化,例如:调用JSON.stringify()函数的操作,叫做JSON序列化。

字符串转换为数据对象的过程,叫做反序列化,例如:调用JSON.parse()函数的操作,叫做JSON反序列化

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
AJAX (Asynchronous JavaScript and XML) 是一种用于前后端数据交互的技术。它允许在不刷新整个页面的情况下,通过异步方式向服务器发送请求并获取响应数据。 使用 AJAX 可以实现以下功能: 1. 发送异步请求:通过 JavaScript 创建 XMLHttpRequest 对象,并使用该对象发送 HTTP 请求到服务器。 2. 处理响应数据:一旦服务器返回响应,可以通过回调函数处理返回的数据。常见的数据格式包括 XMLJSON 或纯文本。 3. 更新页面内容:根据服务器返回的数据,可以使用 JavaScript 动态更新页面内容,而不需要刷新整个页面。这样可以提升用户体验并减少网络流量。 以下是一个简单的 AJAX 示例代码: ```javascript // 创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); // 指定请求的方法和 URL xhr.open('GET', 'https://api.example.com/data', true); // 设置回调函数处理响应 xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 处理服务器返回的数据 var response = xhr.responseText; console.log(response); // 更新页面内容 document.getElementById('result').innerHTML = response; } }; // 发送请求 xhr.send(); ``` 在上述示例中,我们使用 AJAX 发送了一个 GET 请求到 `https://api.example.com/data`,并设置了一个回调函数来处理服务器返回的数据。在回调函数中,我们将返回的数据打印到控制台,并将其更新到 id 为 `result` 的 HTML 元素中。 通过 AJAX,前端可以与后端进行实时的数据交互,从而实现更加动态和响应式的用户界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cirrod

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值