原生xhr对象请求 ,数据交换, json 以及axios的概念及应用

XMLHttpRequest的基本使用


什么XMLHttpRequest

XMLHttpRequest 是浏览器提供一个javascript 对象 通过它 可以实现跟服务器的交互 实现数据传输

前所学的 jQuery 中的 Ajax 函数,就是基于 xhr 对象封装出来的

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第1张图片

使用xhr发起GET请求(⭐⭐⭐)

步骤

创建一个xhr对象

调用xhr.open函数

调用xhr.send函数

监听xhr.onreadystatechange事件

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第2张图片

 xhr 对象的readyState 属性

XMLHttpRequest 对象的 readyState 属性,用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求 必然处于以 下状态中的一个

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第3张图片

 使用xhr发起带参数的get请求

使用xhr对象发起get请求时 在xhr.open()中 为url加入指定参数即可

 查询字符串

 什么是查询字符串

定义:查询字符串(URL 参数)是指在 URL 的末尾加上用于向服务器发送信息的字符串(变量)。

格式:将英文的 ? 放在 URL 的末尾,然后再加上 参数=值 ,想加上多个参数的话,使用 & 符号进行分 隔。以 这个形式,可以将想要发送给服务器的数据添加到 URL 中。

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第4张图片

使用xhr发起POST请求(⭐⭐⭐)


步骤

创建 xhr 对象

调用 xhr.open() 函数

设置 Content-Type 属性(固定写法)

调用 xhr.send() 函数,同时指定要发送的数据

监听 xhr.onreadystatechange 事件

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第5张图片

 数据交换格式


什么是数据交换格式

数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式

数据交换格式有哪几种

XML  和  JSON

XML 

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

XML 的缺点

XML 格式臃肿,和数据无关的代码多,体积大,传输效率低 在 Javascript 中解析 XML 比较麻烦

JSON(⭐⭐⭐)


什么是JSON

json 是一种轻量级的数据交换格式 他的本质是一个字符串

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

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

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

JSON 的两种结构

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

对象结构

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

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第6张图片

 数组结构

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

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第7张图片

 JSON 和JS 对象的关系

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第8张图片

 JSON 和JS 对象的互转

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第9张图片

 代码应用

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第10张图片

 序列化和反序列化

序列化 json.stringfig() 把数据对象转换为json字符串的方式

反序列化 json.parse() 把json字符串转换为数据对象的方式

XMLHttpRequest Level2的新特性

可以设置 HTTP 请求的时限

可以使用 FormData 对象管理表单数据

可以上传文件

可以获得数据传输的进度信息

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第11张图片

 原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第12张图片

 原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第13张图片

 FormData对象管理表单数据


Ajax 操作往往用来提交表单数据。为了方便表单处理, HTML5 新增了一个 FormData 对象,可以模拟 表单操作

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第14张图片

 FormData 对象也可以用来获取网页表单的值,示例代码如下:

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第15张图片

 上传文件

步骤

① 定义 UI 结构

② 验证是否选择了文件

③ 向 FormData 中追加文件

④ 使用 xhr 发起上传文件的请求

⑤ 监听 onreadystatechange 事件

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第16张图片

 原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第17张图片

 

axios(⭐⭐⭐)


什么是axios

axios是专注于网络数据请求的库

axios的好处是什么

相比于原生的 XMLHttpRequest 对象, axios 简单易用。 相比于 jQuery , axios 更加轻量化,只专注于网络数据请求。

axios 发起 get 请求的语法:

 代码示例

原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第18张图片

 axios发起POST请求


axios 发起 get 请求的语法:

示例代码

 原生xhr对象请求 ,数据交换, json 以及axios的概念及应用_第19张图片

 

你可能感兴趣的:(服务器,javascript,前端)