ajax服务器本质：也是一台电脑。作用：存储一个网站的文件（HTML、CSS、JS、图片、音乐.....）提供网

服务器

本质：也是一台电脑。作用：存储一个网站的文件（HTML、CSS、JS、图片、音乐.....）提供网站的文件给用户

资源

服务器上的网页(html文件)、图片、音乐、视频、字体文件、CSS文件、JS文件等等都称之为资源。所以资源代指服务器上存储的内容。

网页中的数据，也是服务器对外提供的一种资源。例如股票数据、各行业排行榜等。

URL 地址

服务器上的每个资源，都对应着独一无二的URL地址

数据也是服务器上的资源对数据的操作（增删改查），也对应着不同的URL地址

Ajax

Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。

请求方式

使用 Ajax 请求数据的 5 种方式

操作性质（增删改查）

POST 向服务器新增数据

GET 从服务器获取数据

DELETE 删除服务器上的数据

PUT 更新服务器上的数据(侧重于完整更新：例如更新用户的完整信息)

PATCH 更新服务器上的数据(侧重于部分更新：例如只更新用户的手机号)

Ajax 的基础用法

axios（发音：艾克C奥斯）是前端圈最火的、专注于数据请求的库。

中文官网地址：www.axios-http.cn/ 英文官网地址：www.npmjs.com/package/axi…

1 axios的基础语法

axios({

	method:'请求的类型',

	url:'请求的URL地址'

}).then((result) => {

	//then用来指定请求成功之后的回调函数

	//形参中的result是请求成功之后的结果

})

2 基于 axios 发起 GET 请求

axios({

	method:'GET',

	url:'htttp://www.itcbc.com:3006/api/getbooks'

}).then((result) => {

	console.log(retult)

})

GET请求的查询参数

刚才查询回来的是所有图书的列表数据，如果想指定查询的条件，可以通过 params 选项来指定查询的参数：

axios({

	//1.指定请求方式为GET

	method:'GET',

	//2.指定请求的URL地址

	url:'http://www.itcbc.com:3006/api/getbooks',

	//3.查询参数

	params: {

		id:1

	}

}).then(result => {

	console.log(result)

})

3 基于 axios 发起 POST 请求

使用 axios 发起 POST 请求时，只需要将 method 属性的值设置为 'POST' ，URL地址改为 '/api/addbook'：

axios({

	method:'POST',

	url:'http://www.itcbc.com:3006/api/addbook',

	data: {

	bookname:' 水浒传'，

	author: '斯耐庵'

}

}).then(result => {

	console.log(result)

})

接口

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）。同时，每个接口必须有对应的请求方式。例如： www.itcbc.com:3006/api/getbook… 获取图书列表的接口(GET 请求) http://www. itcbc.com:3006/api/addbook 添加图书的接口（POST 请求）

接口文档格式

组成部分：接口名称，接口URL，请求方式，请求参数，返回事例，返回参数说明

接口名称 接口的名称，用来快速区分每个接口的作用。如登录接口、添加图书接口

接口URl 客户端发起Ajax调佣此接口时，请求的URL地址

请求方式 请求此接口时，如：GET、POST、PUT、DELETE等

请求参数 请求此接口时，需要发送到服务器的查询参数或请求体

返回示例 当接口请求成功后，服务器响应回来的数据基本格式

返回参数说明 接口响应结果的详细描述

Ajax课程案例接口文档 docs.apipost.cn/preview/f62…

form表单

在网页中，表单主要负责数据采集功能

表单的三个组成部分

网页中采集数据的表单由三个部分组成，分别是:表单标签、表单域、表单按钮。

1.表单的三个组成部分 - 表单标签

HTML 的

就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域：

2.表单的三个组成部分-表单域

表单域提供了采集用户信息的渠道，常见的表单域有：input、textarea、select 等。

3.表单的三个组成部分 - 表单按钮

当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。

注意： type="submit" 表示提交按钮的意思 type 属性的默认值就是 submit，因此 type="submit" 可以省略不写

标签的属性——览表

标签最重要的 3 个属性分别是 action、method 和 enctype。简介信息如下表所示：

属性可选值说明

action 接口的 url 地址把表单采集到的数据，提交到哪个接口中

method GET 或 POST 数据的提交方式（默认值为 GET）

enctype application/x-www-form-urlencoded 数据的编码格式。具体指的是：

multipart/form-data 把表单数据提交给服务器之前，如何对将要提交的数据进行编码

text/plain（很少用）（默认值 application/x-www-form-urlencoded）

注意：enctype 属性只能搭配 POST 提交方式一起使用；如果是 GET 提交，则 enctype 没有意义

通过 Ajax 提交表单数据

作用：通过 Ajax 提交表单采集到的数据，可以防止表单默认提交行为导致的页面跳转问题，提高用户的体验。

1.监听表单的 submit 提交事件 2.阻止默认提交行为 3.基于 axios 发起请求 4.指定请求方式、请求地址 5.指定请求体数据

代码：

const username = document.querySelector('[name=username]');

const password = document.querySelector('[name=password]');

form.addEventListener('click', function(event)){
    event.preventDefault()
    axios({
        method: 'POST',
        url: 'http://www.itcbc.com:3006/api/form',
        data: {
            username: $('[name="username"]').val(),
            password: $('[name="password"]').val()
        }
    }).then(result => {
        console.log(result.data)
    })
})

jQuery 的 serialize() 函数

jQuery 的 serialize() 函数能够一次性获取到表单中采集的数据，它的语法格式如下： $('表单元素的选择器').serialize();

document.querySelector('form').addEventListener('click', function(event) {

			event.preventDefault()

			axios({

				method: 'post',

				url:'http://www.itcbc.com:3006/api/form',

}).then(result => {

				conlose.log(result.data)

})

})

serialize() 函数的使用注意点

在使用 serialize() 函数快速获取表单数据时，必须为每个表单域添加 name 属性！例如下面的示例中，只能通过 serialize() 函数获取到密码的值：

serialize() 函数的其他特点

该方法是jQuery封装的，使用时必须引入jQuery 使用serialize()，各表单域必须有 name 属性使用该方法得到的结果是一个查询字符串结构：name=value&name=value 该方法能够获取隐藏域的值该方法不能得到禁用状态的值该方法不能得到文件域中的文件信息，所以不能完成文件上传

axios 请求方法的别名

为了简化开发者的使用过程，axios 为所有支持的请求方法提供了别名：

axios.get(url[, config])

代码用法

// 不带查询参数
axios.get('http://www.itcbc.com:3006/api/get').then(result => {
    console.log(result);
})
	// 带查询参数
axios.get('http://www.itcbc.com:3006/api/get', {
    params: { id: 1 }
}).then(result => {
    console.log(result);
})

axios.delete(url[, config])

axios.post(url[, data[, config]])

代码用法

// 不带请求体
axios.post('http://www.itcbc.com:3006/api/post').then(result => {
    console.log(result);
})
	// 带请求体
axios.post('http://www.itcbc.com:3006/api/post', {
    username: 'zhangsan',
    password: '123456'
}).then(result => {
    console.log(result);
})

axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])

axios全局配置&拦截器

全局配置请求根路径

在 url 地址中，协议://域名:端口 对应的部分叫做“请求根路径”。

全局配置请求根路径的好处：提高项目的可维护性。全局配置根路径后，后续所有的请求都可以使用全局配置的根路径

假设：端口号从 3009 变成了 3006 没有全局配置根路径，则每个请求的URL中的端口号都需要被修改！有全局配置根路径，则只需要修改全局配置即可

全局配置请求根路径 - 语法格式

基于 axios 提供的固定配置，即可轻松配置请求的根路径。语法格式如下： axios.defaults.baseURL = '请求根路径'

代码

// 全局配置根路径
axios.defaults.baseURL = 'http://www.itcbc.com:3006';
	// 请求接口时，不用写根路径
axios.get('/api/get').then(result => {
    console.log(result);
})
	// 请求接口时，不用写根路径
axios.post('/api/post', { username: 'zhangsan', password: '123456'}).then(result => {
    console.log(result);
})

拦截器

拦截器用来全局拦截 axios 的每一次请求与响应。好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。

FormData

FormData 是一个浏览器对象。用于管理表单数据

FormData的作用和 jQuery中的 serialize() 作用一样，用于快速收集表单数据

FormData + Ajax 技术实现文件上传的功能

可以将创建的FormData对象直接提交给接口

FormData基本使用方法

假设需要收集 ……

里面的所有表单项的值要求，每个表单元素都具有 name 属性

代码

// 1. 获取 form 标签的 DOM对象
let form = document.querySelector('form');
// 2. 实例化 FormData 对象，传入 form
let fd = new FormData(form);
// 3. 提交数据
axios.post('/api/formdata', fd).then(result => {
    console.log(result);
})

FormData的API方法

在提交数据前，可以使用下列API方法对数据进行查看和修改

append('key', 'value'); -- 向对象中追加数据 set('key', 'value'); -- 修改对象中的数据 delete ('key'); -- 从对象中删除数据 get('key') -- 获取指定key的一项数据 getAll('key') -- 获取指定key的全部数据 forEach() -- 遍历对象中的数据

文件域补充

input标签的属性

文件域： accept 属性：控制能够选择的文件类型，比如 accept="image/png,image/jpeg"

multiple 属性：控制是否可以多选文件

文件对象

文件对象，是本地文件的一个表示。在 JavaScript 中，使用文件对象表示一个本地文件。文件对象不需要自己创建，可以通过文件域获取得到选择一个或多个文件根据文件域，找到它的 files 属性。files属性是一个伪数组，里面包含了一个或多个文件对象。

取得文件对象代码

<script>
// 文件域内容改变的时候，获取文件列表及文件对象
document.querySelector('input').onchange = function () {
    // 文件列表 （用户选择的文件列表）得到一个伪数组，里面存放了一个一个的文件对象
    let fileList = this.files;
    // 判断，是否选择了文件
    if (fileList.length === 0) return;
    // 获取某个文件对象，比如第一个文件的文件对象
    let fileObj = fileList[0];
}

文件对象的作用之一

本地预览代码

// 文件域内容改变的时候，获取文件列表及文件对象
document.querySelector('input').addEventListener('change', function() {
    // 文件列表 （用户选择的文件列表）得到一个伪数组，里面存放了一个一个的文件对象
    let fileList = this.files;
    // 判断，是否选择了文件
    if (fileList.length === 0) return;
    // 获取某个文件对象，比如第一个文件的文件对象
    let fileObj = fileList[0];
    // 创建本地文件的预览url
    let url = URL.createObjectURL(fileObj);
    // 设置图片的src为url
    document.querySelector('img').src = url;
})

文件对象的作用之二

追加到FormData，实现文件上传代码

// 文件域内容改变的时候，获取文件列表及文件对象

document.querySelector('input').addEventListener('change', function() {
    // 文件列表 （用户选择的文件列表）得到一个伪数组，里面存放了一个一个的文件对象
    let fileList = this.files;
    // 判断，是否选择了文件
    if (fileList.length === 0) return;
    // 获取某个文件对象，比如第一个文件的文件对象
    let fileObj = fileList[0];
    // 追加到FormData对象中
    let fd = new FormData();
    fd.append('avatar', fileObj);
    // axios 提交 fd 到指定的接口，从而实现文件上传
    // axios提交FormData的代码略
})

请求报文&响应报文

客户端与服务器通信的过程是基于请求与响应的。其中： 请求报文规定了客户端以什么格式把数据发送给服务器 响应报文规定了服务器以什么格式把数据响应给客户端

请求报文 - 格式

请求报文由请求行、请求头部、空行和 请求体 4 个部分组成。

注意：在浏览器中，GET 请求比较特殊，它只有请求头，没有请求体。在浏览器中，POST、PUT、PATCH、DELETE 请求既有请求头，又有请求体。

响应报文 - 格式

响应报文由状态行、响应头部、空行和 响应体 4 个部分组成

URL参数

常用的5种请求方式，都可以在URL后面携带请求参数。由于URL的长度有限制，所以请求参数一般都比较小，比如不能做文件上传常用的请求参数有两种写法 /api/xxx?参数=值&参数=值（这种格式的字符串叫做查询字符串，所以这样的参数叫做查询参数） /api/xxx/值/值（Restful 风格的接口用这种格式的参数）

XMLHttpRequest

是浏览器内置的一个构造函数

作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR）封装出来的

1.使用 XMLHttpRequest 发起 GET 请求

主要的 4 个实现步骤：创建 xhr 对象调用 xhr.open() 函数调用 xhr.send() 函数监听 load 事件

示例代码

let xhr = new XMLHttpRequest();

xhr.open('GET', 'http://xxx.com/api/xx');

xhr.send();

xhr.addEventListener('load', function() {

	console.log(this.response);

})

请求体携带URL参数或提交请求体

URL参数，只能拼接在 URL 地址后面请求体，放到 send() 里面

示例代码

let xhr = new XMLHttpRequest();
	xhr.addEventListener('load', function () {
  console.log(this.response);
})
	// 将请求参数拼接到url后面
xhr.open('请求方式', 'http://www.itcbc.com/api/xx?id=1&username=zhangsan');
	xhr.send( 请求体 );

提交请求体数据，需指定Content-Type头

当需要提交请求体数据时，需要在 xhr.open() 之后，调用 xhr.setRequestHeader() 函数，指定请求体的编码格

示例代码

let xhr = new XMLHttpRequest();
	xhr.addEventListener('load', function () {
  console.log(this.response);
})
	// 将请求参数拼接到url后面
xhr.open('POST', 'http://www.itcbc.com/api/post');

// 根据请求体格式的不同，需设置对应的Content-Type头
xhr.setRequestHeader('Content-Type', '值')
	xhr.send('username=zs&age=20');

请求体格式 Content-Type

参数=值&参数=值 application/x-www-form-urlencoded

'{ "id": 1, "name": "zs" }' application/json

new FormData() multipart/form-data; xxxxxxxxx随机字符

数据交换格式

服务器端与客户端之间数据传输的格式。

两种数据交换格式： XML（很少用） JSON（主流）

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

JSON数据

用字符串的方式来表示的对象或数组类型的数据，叫做 JSON 数据。 JSON 数据的格式有两种： 1.对象格式 2.数组格式

JSON 的语法要求

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