XMLHttpRequest 的基本用法

1.1 XMLHttpRequest的概念

XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new ​ 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 ​ axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装

1.2 XMLHttpRequest的使用

主要的 4 个实现步骤：

1. 创建 xhr 对象

2. 调用 xhr.open() 函数

3. 调用 xhr.send() 函数

4. 监听 load 事件

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function() {
    console.log(xhr.response);
});

1.3 GET请求携带参数

GET请求参数直接放到路径的最末尾就可以

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数    --  get参数
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=红楼梦');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function() {
    console.log(xhr.response);
});

 

1.4 POST请求携带参数

P0ST请求参数，分为两种：查询参数（几乎不用）和请求体参数（设置头信息）

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数    --  get参数
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbooks');
// 调用 xhr.send() 函数
// 设置头信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('bookname=三体&author=刘慈欣&publisher=北京人民出版社');
// 监听 load 事件
xhr.addEventListener('load', function() {
    console.log(xhr.response);
});

 POST请求查询参数几乎不用，且传递POST请求参数需要设置头信息。

1.5 数据交换格式JSON

数据交换格式，就是服务器端与客户端之间数据传输的格式。两种数据交换格式：XML和JSON。XML出现的比较早，现在大家常用JSON。

JSON（全称：JavaScript Object Notation）是一种数据交换格式，它本质上是用字符串的方式来表示对象或数组类型的数据。

用字符串的方式来表示的对象的数据，叫做 JSON 数据。JSON 数据的格式有两种：对象格式和数组格式。

调用浏览器内置的 JSON.parse() 函数，可以把 JSON 格式的字符串转换为 JS 数据。

调用浏览器内置的 JSON.stringify() 函数，可以把 JS 数据转换为 JSON 格式的字符串。

其中：把真实数据转换为字符串的过程，叫做序列化，把字符串转换为真实数据的过程，叫做反序列化。

 在 JSON 文件中定义 JSON 格式的数据时，要遵守以下的 6 条规则：
 1. 属性名必须使用双引号包裹
 2. 字符串类型的值必须使用双引号包裹
 3. JSON 中不允许使用单引号表示字符串
 4. JSON 中不能写注释
 5. JSON 的最外层必须是对象或数组格式
 6. 不能使用 undefined 或函数作为 JSON 的值