目录
学习目标
工具
01.概念-浏览器&服务器
目标
浏览器
服务器
02 概念-url网址
目标
讲解
小结
03.概念-请求和响应
目标
概念讲解
实操验证
04.概念-响应资源划分
目标
小结
05.概念-Ajax讲解
目标
讲解
小结
06 Ajax_基础使用
目标
讲解
小结
07.案例_图书管理_铺设
目标
小结
08.Ajax_传参使用
目标
讲解
小结
09.概念-url编码
目标
讲解
10.案例_图书管理_筛选
目标
讲解
11.Ajax_POST方法
目标
讲解
12.案例_图书管理_新增
目标
讲解
13.概念-请求报文
目标
讲解
小结
14.概念-响应报文
目标
讲解
小结
15.概念-响应码 / 状态码
目标
讲解
小结
16.概念-接口相关
目标
讲解
17.概念-接口调试工具
目标
讲解
小结
19.概念-逻辑码
目标
讲解
小结
今日重点(必须会)
理解浏览器和服务器通信过程
掌握axios的使用
理解接口的概念
1. FeHelper 谷歌浏览器插件安装
在浏览器访问的地址返回的不是网页(标签+样式), 而是JSON的字符串内容, 会帮助美化它的展示格式
2. postman安装并汉化
了解浏览器和服务器的作用
浏览器概念: 安装并运行在电脑上的一个软件, 常见浏览器软件如下
浏览器作用: 输入网址, 即可浏览相关内容 (数据)
思考: 浏览器自己有这些内容吗? 肯定是没有的! 那浏览的这些网页文件在哪里? -- 在服务器上
服务器概念: 一台24小时开机的电脑, 拥有更大的磁盘空间和访问速度, 一般只有主机和系统
服务器作用: 为访问者提供各种资源
资源: html文件, css文件, js文件, 视频文件, 音频文件, 数据等
理解url作用
理解url组成部分
前面说, 浏览器用于浏览资源, 服务器用于提供资源, 那浏览器想要访问需要看到的资源, 就得知道资源的url网址
url网址作用: 标记某个资源, 在网络中的唯一地址, 只有通过URL地址，才能定位资源的存放位置，从而成功访问到对应的资源
例如: 这里每个url网址都能访问不同的页面和资源
淘宝首页: 淘宝网 - 淘！我喜欢
京东首页: 京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！
中国首都博物馆首页: http://www.capitalmuseum.org.cn/zlxx/zlxx.html
网易新闻数据: http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html
传智教育logo图: http://www.itcast.cn/2018czgw/images/logo.png
url网址组成:
http协议: 浏览器和服务器之间传输数据的规则, 保证都能读懂对方发来的内容
主机名(户): 标识服务器在互联网中的唯一地址, 确保能够访问到他
端口号(柜子):
端口号有效范围默认在0-65535之间的整数
标识服务器里的不同服务
浏览器默认访问的都是80端口
路径解释(抽屉):
确定在服务器上的具体位置
url网址的作用是什么?
用来标记资源的位置和访问
url网址的组成部分是什么?
协议, 主机名, 端口号, 资源路径
目标
掌握请求和响应的概念
在浏览器和服务器之间的通信过程, 分为请求和响应, 两个步骤
请求: 浏览器, 通过网络去服务器要资源的过程, 叫做"请求" request
响应: 服务器, 通过网络给浏览器返回资源的过程, 叫做"响应 response
目标: 要学会使用浏览器自带的Network调试工具查看请求和响应过程
一看:请求是否成功
二看:请求的url地址是否正确
三看:请求的方式是否和接口要求一致
四看: 响应返回的结果提示
如果说请求失败, 接着看
五看: 请求的参数名是否正确, 值是否正确
1 打开浏览器, 访问百度一下，你就知道, 并右键检查, 选择Network选项卡
2.这里每一行, 都是浏览器发送的一次请求
3. 点击后, 会先看到请求的具体url网址
4.点击右侧response是响应的结果
5.点击右侧 preview, 是浏览器试着对响应内容进行格式化
为何一个主页有这么多次请求?
首先请求回来的主页html里, 还有一些引用其他文件的语法, 例如script的src和link的href, 还有img的src, 都会让浏览器单独再发几次请求
大家记住: 一次请求对应一次响应, 响应回来的内容浏览器会进行解析
了解url网址都能返回哪些类型资源
那还有一些URL地址可以返回一些JSON格式的字符串数据
例如: 图书列表: http://ajax-base-api-t.itheima.net/api/getbooks
例如: 网易新闻-头条: http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html
重要: 这些url地址不变, 但是数据会在服务器端自动随着时间自动更新
他们也叫数据地址
所以数据对于一个网页是否重要呢?
当然是非常重要的
以前, 我们写的网页都是html+css+js, 而且数据都是固定在文件里的, 无法动态变化
离开数据之后，哪怕这个网页做的再漂亮，也没有实际的作用。
那我们能不能在自己的项目里, 用一些技术请求一些数据铺设到我们自己的网页中呢?
那就是接下来要学习的Ajax技术了
响应的资源类型有哪些?
有html, css, js, 图片, 音频, 视频, JSON字符串数据等等
数据类型的url网址返回的数据格式是?
JSON格式的字符串, 前端接收后转换下就可以当对象用
了解Ajax概念和作用
1 Ajax[ˈeɪdʒæks], 是一种在JS代码中发起一次请求并获取响应数据的技术(也有其他技术可实现)
2 它的使用场景非常广泛, 比如要验证手机号是否在服务器已经注册过了
3 根据输入的搜索关键字, 联想菜单提示数据切换
4 根据增和删除, 修改页面数据
5 以上的效果数据都在服务器上, 所以浏览器刷新数据也还在
小结因为使用了Ajax, 从服务器获取数据铺设到页面上
需要在JS中编写Ajax代码, 来获取数据
2. Ajax重要不, 要不要学好它?
有数据的地方, 可能就有Ajax, 所以必须要学会!
掌握Ajax库->axios的使用
因为以后我们写项目工作, 一般会使用axios来进行网络请求
Ajax是个概念, axios是要用到的代码包
axios的使用:
先引入axios.js文件到自己的网页中
axios.js文件链接: https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js
2.明确axios的使用语法
axios({
url: '请求的URL地址',
method: '请求的方法'
}).then((result) => {
// .then 用来指定请求成功之后的回调函数
// 形参中的 result 是请求成功之后的结果
})
3.请求的url地址, 就是标记资源的url网址
图书列表: http://ajax-base-api-t.itheima.net/api/getbooks
4. 请求的方法, 标记本次请求的动作不同(主要服务器端要求什么, 我们就写什么, 有5种固定名字的值)
5 根据服务器的数据url网址的文档说明, 我们编写代码请求一次数据
文档地址: 接口文档在线分享 - Apifox
axios({
url: 'http://ajax-base-api-t.itheima.net/api/getbooks',
method: 'GET'
}).then(result => {
console.log(result)
})
6.运行后结果, 在控制台可以看到, 请求并接收到此url网址返回的响应结果
axios会对响应结果处理, 转成对象, 放到结果对象的data属性下
Ajax和axios是什么关系?
Ajax是浏览器向服务器请求数据的一种技术; axios是库, 是对这个技术具体代码的实现
2.axios语法结构是什么?
需要明确请求的url网址和请求方式, 调用axios函数传入配置对象, 并用.then和回调函数等待结果使用
目标
把图书列表的数据铺设到页面上
1 新建07.案例_图书管理_铺设.html, 把这里的标签和样式复制过去准备好, 在这基础上写
07.案例_图书管理_铺设
| Id | 书名 | 作者 | 出版社 | 操作 |
|---|
2 代码
// 若scr里有src(外链),请求回来的目标资源js会覆盖掉src里写的js内容
// 3 准备数据(利用Ajax引入网址中动态数据)
axios({
url: 'http://ajax-base-api-t.itheima.net/api/getbooks',
method: 'GET'
}).then(result => {
console.log(result)
// 4 准备模板字符串并渲染在页面中(web) 也该写在then中回调函数下,否则result会undefined
// 获取的result是个对象,要正确引入数据
// 多行标签要遍历实现
let str = ''
result.data.data.forEach(item => {
str += `
${item.id}
${item.bookname}
${item.author}
${item.publisher}
`
});
document.querySelector('tbody').innerHTML = str
})
小结
动态获取数据铺设页面思路是?
- 找到接口文档, 把数据请求回来, 循环数据创建标签承载, 最后把标签和数据插入到页面上
目标
请求时, 查询下西游记这本书相关信息
掌握Ajax传参时的语法
2 编写代码进行尝试 axios({params{}})
3 运行后, 在浏览器的Network调试工具观察, 本次Ajax请求, params的参数在运行时, 会被axios携带在url?后面
其实这才是查询参数最终携带的位置
所以, 我们是否可以自己拼接在url?后面, 不劳烦axios了?
答案是可以的, 但是, 我们还是用params写起来更轻松, 所以这个点了解下即可, 它是查询参数本质写法
// 尝试把params参数自己拼接
// 格式: 多个参数用&链接(固定)
// url地址?参数名=值&参数名=值
axios({
url: 'http://ajax-base-api-t.itheima.net/api/getbooks?id=1&bookname=西游记',
method: 'GET'
}).then(result => {
console.log(result)
})
查看文档可以传递哪些查询用的参数
文档地址: 接口文档在线分享 - Apifox
axios如何传查询参数?
在axios函数配置对象里, 有个固定名字params参数, 它运行后会把参数名和值以?参数名=值&参数名=值, 格式拼接在url上发送给服务器
查询参数有什么作用?
告诉后台, 我们要查询哪些条件的值
了解什么是url编码
url地址中, 不允许出现中文和空格等特殊符号, 所以会被自动转换成url编码
格式%xx%xx%xx
JS内置了2个方法, 可以对字符串进行, url编码和url解码
只会对中文和空格和特殊符号转换, 英文数字不会转换
3. window对象内置的方法encodeURI和decodeURI
// 需求: 中文 -> url编码 // 语法: encodeURI(中文字符串) // 返回值: url编码字符串 let str = '西游记' let urlStr = encodeURI(str) console.log(urlStr);
// 需求: url编码 -> 中文 // 语法: decodeURI(url编码字符串) // 返回值: 中文字符串 let zhStr = decodeURI(urlStr) console.log(zhStr);
实现图书列表筛选功能
1. 复制之前案例文件, 并改名为`09.案例_图书管理_筛选.html`, 在之前案例基础上, 增加右侧筛选表单标签
> 复制如下标签, 在此基础上书写
> 在表格的div容器隔壁下
筛选图书
// 目标: 根据输入框,筛选动态数据并渲染在页面中
// 思路:
// 1 为"筛选"添加点击事件(去默认事件判断非空)
// 2 把参数携带发送给后台,返回筛选结果
// 3 空值判断
// 4 封装渲染函数
// 问题1:筛选随便搜都能响应
// 原因:有请求必有响应, 只是能不能出来结果而已
// 问题2:搜有的书名但没出来结果
// 原因:发送参数,服务器端都会使用;但有的值为空,它也会(把空)当做条件来匹配,因此找不到
// 解决:前端做好空值判断
document.querySelector('.btn-dark').addEventListener('click', e => {
// 去掉默认事件,不去掉会默认提交数据到当前网页,事件走不完
let sel_bookname = document.querySelector('#sel_bookname').value
let sel_author = document.querySelector('#sel_author').value
let sel_publisher = document.querySelector('#sel_publisher').value
e.preventDefault()
// 3 空值判断 (用户输入了就作为筛选条件,比三个值全做为参数要灵活)
let queryObj = {}
if (sel_bookname) {
queryObj.bookname = sel_bookname
}
if (sel_author) {
queryObj.author = sel_author
}
if (sel_publisher) {
queryObj.publisher = sel_publisher
}
axios({
url: 'http://ajax-base-api-t.itheima.net/api/getbooks',
method: 'GET',
params: queryObj
// params: { // 筛选参数
// bookname: sel_bookname,
// author: sel_author,
// publisher: sel_publisher
// }
}).then(result => {
show(result) // 调用封装好的渲染函数
// 清空表单值,dom对象是form
document.querySelector('#addForm').reset()
})
})
前面用的都是GET, 这里讲解POST作用
前面都是在从服务器索要数据, 我们前端是否能给服务器发送点数据, 保存在服务器里呢?
答案是可以的, 但是一般请求方式用的是POST
区别:
GET和POST本质上都是http请求, 区别只是被贴上了不同的请求方法( 携带参数的方式不同 ), 后端会根据不同的方式执行不同的代码操作
所以在url?携带参数还是请求体里携带参数, 要和后端代码对上即可使用
问题: 那为何我们不建议在GET上携带数据发给后端呢?
浏览器对GET方式传参url长度有限制
下面以添加书籍url网址为例, 我们使用一次POST请求, 新建11.Ajax_POST方法.html, 并引入axios编写代码
准备输入框和按钮标签, 实现增加图书功能
把之前图书案例复制一份, 改名12.案例_图书管理_新增.html, 并复制如下新增表单的标签, 接着写
在筛选的div隔壁下边再来个
添加新图书
了解什么是请求报文
复习下请求
请求: 浏览器 向 服务器 发起的一个动作过程请求报文: 规定了浏览器 向 服务器, 以什么格式 把数据发送
响应报文: 规定了服务器 向 浏览器, 以什么格式 把数据返回
3. 请求报文组成
请求行
请求方式: (GET / POST / DELETE / PUT / PATCH)
请求url: 资源在服务器地址
协议版本: 默认HTTP/1.1
请求头部: 头部参数名: 值
请求体: 携带给服务器的数据
4. 请求报文在Network调试查看
5. 请求体在这里查看
小结请求报文的3个组成部分?
-- 请求行 请求头 请求体
了解什么是响应报文
1.复习下响应
响应: 服务器 向 浏览器 返回的一个动作过程
2 响应报文组成
响应行
协议版本: 默认HTTP/1.1
响应状态码: 服务器返回的一个数字标识, 代表本次响应的状态
响应状态描述: 服务器返回的一个文字标识, 代表本次响应的描述
响应头部: 头部参数名: 值
响应体: 服务器返回的响应数据
3. 响应报文在Network调试查看
4. 响应体在这里查看
小结响应报文的3个组成部分?
答案: 响应行, 响应头部, 响应体
了解每个响应码数字对应的含义
常见的响应状态码如下
2. 分类汇总
3. 各种响应状态码的查看
200: 比如我们前面案例里的Ajax的请求, 正确的响应状态就为200
302: 比如先打开Network, 再访问百度一下，你就知道, 会出现302重定向
304: 比如先打开Network, 再访问百度图片-发现多彩世界, 有的css, js, 图片文件就会有缓存
4xx: 可以在后续做案例/项目中遇到
500: 比如先打开Network, 再访问http://pcapi-xiaotuxian-front-devtest.itheima.net/login, 会出现500
4.其实无论出现哪种情况, 你要掌握的是每个状态码, 是服务器想要告诉你什么含义即可
小结数字几开头的代表此次响应的结果是ok的?
2xx和3xx的响应状态码, 表示此次响应结果ok
了解什么是接口
掌握并熟练阅读接口文档
接口: 其实就是提供服务的url网址, 我们前面想要数据/提交数据, 需要知道服务器在互联网中的唯一url地址
而服务器会把一些接口地址罗列整理到一个文档上
3. 接口文档: 就是接口使用说明书
4. 接口文档格式: 包含如下内容
了解postman接口调试工具的使用
先要确保本机电脑安装了postman这个软件, 如果没安装请参考本文档最顶部(必须)自学-postman安装
使用: 其实这个软件,前端和后端攻城师都可以使用, 不用编写代码, 可以发送请求, 测试接口是否可用
使用步骤如下
GET方式发一次请求:
5. POST方式发一次请求:
小结postman软件有什么用?
-- 不用编写代码, 先发一次请求, 看看接口是否可以正常使用, 调试接口使用
了解响应码和逻辑码的区别
先演示个效果, 把刚刚删除传递的id参数删除, 不传参
点击删除发现没删除掉, 也没有报错
分析原因
其实一次请求和响应的过程是成功了. http响应码为200, 所以浏览器不会报错
但是观察响应体(data)里status字段的值不太一样
删除成功了是200; 删除失败了是502
4.所以我们从3个角度来分析他们的区别
5.所以我们在最后, 图书管理删除案例中, 接着做判断
// 调用接口
axios({
url: 'http://ajax-base-api-t.itheima.net/api/delbook',
method: 'DELETE'
}).then(res => {
if (res.data.status === 200) {
// 5. 清除表格现有数据, 并重新获取铺设
tbody.innerHTML = ''
getList()
} else {
alert('删除失败')
}
})
小结
1. http响应码用于表示什么?
表示这次请求对应的响应是否成功, 可以影响浏览器是否报错
2. 逻辑状态码的作用是什么?
后端比较偷懒, 全都响应200, 再用逻辑状态码来区分到底是完全成功还是逻辑上有错了
分清楚, 请求和响应对应的方向
必须掌握axios的语法(刚开始多抄多套, 慢慢就记住了)
学会看接口文档, 使用axios请求/发送数据
学会JSON结构解析, 把数据铺设到页面(10个星的重点)
