目录
0.讲解必备铺垫知识
一、AJAX是什么?
二、用axios发起Ajax请求
三、请求&响应报文
1、请求报文:
2.响应报文:
3.常见的响应码
该图为本文的核心汇总
0.讲解必备铺垫知识
在开始讲解之前认识下计算机体系的其他知识铺垫
1.服务器:
服务器是计算机的一种,它比普通计算机运行更快、负载更高。服务器在网络中为其它客户机(如PC机、智能手机、ATM等终端)提供计算或者应用服务。
2.url网址:
概念:url, 统一资源定位符, 标记资源在网络中的位置。也称网址
作用: 标记某个资源在网络中的唯一地址。只有通过URL地址,浏览器才能定位资源的存放位置,从而成功访问到对应的资源。
构成:1.协议 2.主机名 3.端口号(可省略)4.资源存放的路径
3.请求和响应:
浏览器和服务器之间的通信过程, 分为两个步骤: 请求和响应,
- 请求: 浏览器, 通过网络去服务器要资源的过程, 叫做"请求"
- 响应: 服务器, 通过网络给浏览器返回资源的过程, 叫做"响应"
如何查看响应与请求?
兄弟姐妹们去浏览器查看我框起来的这几个点(谷歌浏览器)
为何一个主页有这么多次请求?
首先请求回来的主页html里, 还有一些引用其他文件的语法, 例如script的src和link的href, 还有img的src, 都会让浏览器单独再发几次请求
访问网页时,能获取到几种类型资源?
有html, css, js, 图片, 音频, 视频, JSON字符串数据等等
好了,铺垫知识结束。AJAX开始!!!
一、AJAX是什么?
是一种在JS代码中发请求并获取响应数据的技术
使用场景:
不刷新页面的情况,从服务器获取数据,以局部更新页面
例如:我们在注册账户名的时候,当离开账户名时,系统会检测它的库里面有没有重合的名字,有就给我们提示:当前用户名存在
二、用axios发起Ajax请求
1.先引入axios.js文件到自己的网页中。
(axios.js文件链接: https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js)
2.axios的使用语法
axios({
url: '请求的URL网址',
method: '请求的方式' //data 对应POST方法
//params对应 GET方法
}).then((结果变量名) => { // .then 用来指定请求成功之后的回调函数
// 形参中的 结果变量名 是请求成功之后的结果
}).catch((错误变量名)=>{
// 如果请求发生了错误,会到这来来
// 形参中的 错误变量名 是请求失败之后的结果
})
来个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.引入axios.js -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script>
<!-- 2.使用axios -->
console.log(axios);
axios({
url:'http://ajax-api.itheima.net/api/area',
method:'GET',
params:{
pname:'江西省',
cname:'九江市'
}
}
).then(res=>{
console.log(res)//then节后请求成功之后的回调函数;
})
</script>
</body>
</html>
三、请求&响应报文
1、请求报文:
请求报文: 规定了浏览器 向 服务器, 以什么格式 把数据发送
- 请求报文组成 (三部分)
- 请求行
请求方式: (GET / POST / DELETE / PUT / PATCH ...)
请求url: 资源在服务器地址协议版本: 默认HTTP/1.1
协议版本: 默认HTTP/1.1
- 请求头部: 头部参数名: 值(键值对形式)
- 请求体: 携带给服务器的数据
2.响应报文:
响应报文: 规定了服务器 向 浏览器, 以什么格式 把数据返回
- 响应报文组成 (三部分)
- 响应行
协议版本: 默认HTTP/1.1
响应状态码: 服务器返回的一个数字标识, 代表本次响应的状态
响应状态描述: 服务器返回的一个文字标识, 代表本次响应的描述
- 响应头部: 头部参数名: 值
- 响应体: 服务器返回的响应数据