AJAX概念和axios使用

AJAX概念

  • 使用浏览器的 XMLHttpRequest 对象 与服务器通信
  • 浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页

image-20230403173156484.png

axios使用

语法：

  1. 引入axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
  2. 使用axios函数
    • 传入配置对象
    • 再用.then回调函数接收结果，并做后续处理
1
2
3
4
5
6
axios({
	url: 'http://hmajax.itheima.net/api/province' // 目标资源地址
}).then((result) => {
	// 对服务器返回的数据做后续处理
	console.log(result)
})

URL查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

image-20230404101257205.png

axios-查询参数

语法：使用 axios 提供的 params 选项

注意：axios 在运行时把参数名和值，会拼接到 url?参数名=值

城市列表：http://hmajax.itheima.net/api/city?pname=河北省

1
2
3
4
5
6
7
8
9
10
11
axios({
	url: 'http://hmajax.itheima.net/api/city',
	params: {
		pname: '广东省'
	}
}).then((result) => {
	// 对服务器返回的数据做后续处理
	console.log(result)
	// console.log(result.data.list)
	document.querySelector('.city').innerHTML = result.data.list.join(' ')
})

image.png

常用请求方法和数据提交

请求方法：对服务器资源，要执行的操作

请求方法 操作
GET 获取数据
POST 数据提交
PUT 修改数据（全部）
DELETE 删除数据
PATCH 修改数据（部分）

数据提交：当数据需要在服务器上保存时

axios请求配置

url：请求的URL地址

method：请求的方法，GET可以省略（不区分大小写）

data：提交数据

1
2
3
4
5
6
7
8
axios({
	url: 'http://hmajax.itheima.net/api/register',
	method: 'POST',
	data: {
		username: 'M78Alien',
		password: '123456789'
	}
})

axios错误处理

场景：再次注册相同的账号，会遇到报错信息

处理：用更直观的方式，给普通用户展示错误信息

1
2
3
4
5
6
7
8
9
10
11
12
axios({
	url: 'http://hmajax.itheima.net/api/register',
	method: 'POST',
	data: {
		username: 'M78Alien',
		password: '123456789'
	}
}).then(result => {
	console.log(result) // 因为上面注册过相同的账号密码，所以会返回错误信息
}).catch(error => {
	console.log(error)
})

image.png

HTTP协议

HTTP协议：规定了浏览器发送及服务器返回内容的格式

请求报文

请求报文：浏览器按照 HTTP 协议要求的格式，发送给服务器的内容

image-20230220132229960.png
请求报文的组成部分有：

  1. 请求行：请求方法，URL，协议
  2. 请求头：以键值对的格式携带的附带信息，比如：Content-Type
  3. 空行：分隔请求头，空行之后的是发送给服务器的资源
  4. 请求体：发送的资源

响应报文

响应报文：服务器按照 HTTP 协议要求的格式，返回给浏览器的内容

image-20230220133141151.png

响应报文组成部分：

  1. 响应行（状态行）：协议、HTTP 响应状态码、状态信息
  2. 响应头：以键值对的格式携带的附加信息，比如：Content-Type
  3. 空行：分隔响应头，空行之后的是服务器返回的资源
  4. 响应体：返回的资源

HTTP响应状态码

HTTP 响应状态码：用来表明请求是否成功完成

比如：404（服务器找不到资源）

状态码 说明
1xx 信息
2xx 成功
3xx 重定向消息
4xx 客户端错误
5xx 服务端错误

接口文档

接口文档：描述接口的文章（一般是后端工程师，编写和提供）

接口：指的使用 AJAX 和 服务器通讯时，使用的 URL，请求方法，以及参数，例如：AJAX阶段接口文档

例如：获取城市列表接口样子

image-20230404104720587.png

form-serialize 插件

form-serialize 插件语法：

  1. 引入 form-serialize 插件到自己网页中
  2. 使用 serialize 函数

函数参数：

  1. 参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）
  2. 参数2：配置对象
    • hash：
      true - 收集出来的是一个 JS 对象结构
      false - 收集出来的是一个查询字符串格式
    • empty：
      true - 收集空值
      false - 不收集空值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form action="javascript:;" class="example-form">
	<input type="text" name="uname">
	<br>
	<input type="text" name="pwd">
	<br>
	<input type="button" class="btn" value="提交">
</form>
<script src="js/form-serialize.js"></script>
<script>
	document.querySelector('.btn').addEventListener('click', () => {
		const form = document.querySelector('.example-form')
		const data = serialize(form, {hash: true, empty: true})
		console.log(data)
	})
</script>

image.png

  • 收集到的数据名称是表单名称