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

XMLHttpRequest的基本使用

---

什么XMLHttpRequest

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

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

使用xhr发起GET请求（⭐⭐⭐）

步骤

创建一个xhr对象

调用xhr.open函数

调用xhr.send函数

监听xhr.onreadystatechange事件

 xhr 对象的readyState 属性

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

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

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

 查询字符串

 什么是查询字符串

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

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

使用xhr发起POST请求（⭐⭐⭐）

---

步骤

创建 xhr 对象

调用 xhr.open() 函数

设置 Content-Type 属性（固定写法）

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

监听 xhr.onreadystatechange 事件

 数据交换格式

---

什么是数据交换格式

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

数据交换格式有哪几种

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种类型。

 数组结构

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

 JSON 和JS 对象的关系

 JSON 和JS 对象的互转

 代码应用

 序列化和反序列化

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

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

XMLHttpRequest Level2的新特性

可以设置 HTTP 请求的时限

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

可以上传文件

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

 

 

 FormData对象管理表单数据

---

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

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

 上传文件

步骤

① 定义 UI 结构

② 验证是否选择了文件

③ 向 FormData 中追加文件

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

⑤ 监听 onreadystatechange 事件

 

 

axios（⭐⭐⭐）

---

什么是axios

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

axios的好处是什么

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

axios 发起 get 请求的语法：

 代码示例

 axios发起POST请求

---

axios 发起 get 请求的语法：

示例代码