1.客户端与服务器
客户端
在前端开发中，客户端特指“Web 浏览器”。实际开发中，只要可以访问服务器的一端都属于客户端（手机、平板、电脑中的各种软件都可以是客户端）。
服务器
服务器就是能够提供服务的设备,主要作用就是存储数据和响应数据(对外提供服务)
客户端和服务器通信过程
客户端与服务器之间的通信过程， 请求——处理——响应
- 请求的概念：客户端通过网络去找服务器要资源的过程，叫做 “请求”
- 响应的概念：服务器把资源通过网络发送给客户端的过程，叫做 “响应”
XMLHttpRequest
什么是XMLHttpRequest
XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装的！
使用XMLHttpRequest
主要的 4 个实现步骤：
-
创建 XMLHttpRequest 的实例对象
(对象名一般命名为xhr 由于缩写和''小黄人''一样,我们也可以称作小黄人)
-
调用 xhr.open() 函数
xhr.open() 是设置xhr的访问方式和访问地址的 有两个参数 ,分别为访问方式 访问地址
xhr.open('GET', 'www.liulongbin.top:3006/api/getbook…');
-
调用 xhr.send() 函数
xhr.send() 是向服务器发送请求的
-
监听 load 事件
设置load监听时等待服务器响应,当服务器处理好数据响应给我们我们就可以拿到数据了
-
xhr.response
xhr.response 就是服务器响应过来的数据
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);
});
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);
});
接口文档
接口文档是什么
使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）。
接口文档的格式
接口文档的格式有很多，txt，word，excel，md等.... 现在最常用的是 html 格式文档。
线上地址，接口文档：www.showdoc.com.cn/ajaxapi/375…
