一些地址
Code-Share地址 : git clone git@gitee.com:vrfe/code-share-28.git
Notion 地址 : https://zxdfe.notion.site/Ajax-day01-c6e13938d17540b1b18a80158c0a8b68
复习
javascript
// 1. 配置用户名邮箱
git config --global user.name 用户名
git config --global user.email 邮箱
// 2. git init 初始化仓库
// 常用
// 1. git status
// 2. git add .
// 3. git commit -m "msg" 提交更新
// git log --oneline ==> 推荐
// git reflog 查看所有的记录
// git reset --hard id ==> 回退版本
.gitinore ==> 未跟踪的文件才能忽略
// 远端
// 添加远端仓库
git remote add origin 地址
// 查看
git remote
git remote -v
// 移除
git remote rm origin
// 第一次推送
git push 别名 分支名
git push -u origin master // 以后 都可以git push
// git clone 仓库地址 克隆仓库 、下载
// git pull 拉取远端的更新,合并到本地
// 分支
git branch 分支名
git branch
git checkout 分支名 // ===> 切换分支的时候,注意查看状态,
// 创建并切换分支
git checkout -b 新分支名
// 删除分支
git branch -d 分支名
// 合并分支
git merge 分支名 // ==> 要把login合并到master,一定要先切换到master
1. 服务器相关概念
1.1 服务器
javascript
// 1. C/S 架构 ===> 客户端 client 服务器 server
// 服务器: 为客户提供服务的计算机
// 2. B/S 架构 ==> 浏览器 browser 服务器 server
// 3. C/S架构的通讯过程是怎么样的?
// 主要就是请求和响应
// 请求:客户端向服务器发送一条请求,我想要什么资源?
// 比如说,我顺着网线找到建国家的位置,拿着刀架着建国的脖子说,V我50,这,就是请求
// 响应:服务器考虑了一下,给我资源
// 建国考虑了一下,说 V我100(不行,我就要50)
// 请求:request , 响应: response
1.2 认识URL
javascript
// URL : Uniform Resource Locator 统一资源定位符
// URL由哪几部分组成 四部分
// 1. 协议 https http file ftp
// 2. 主机名 ip / 域名
// 是哪台计算机提供的服务,可以通过IP或域名访问
// 3. 端口号
// 80 => http 443 => https
// 一个端口一次只能被一个服务占用
// 4. 路径 资源路径
// 表示主机上的一个目录或文件地址
2. ajax
javascript
// 1. 同步和异步的概念
// 同步:一件事情做完了才能做下一件事情,顺序执行。一件一件的做
// 异步:在做这件事情的同时,可以做另一些事情。 煮饭的时候,可以炒菜
// 2. Ajax ==> Asynchronous JavaScript and XML, 异步JavaScript和XML
// // ==> 最大的特性:异步 => 局部刷新页面
// 在不刷新页面的情况下与服务端通讯
// ==> 如何理解异步?
// 当我们触发Ajax请求,用户仍可在请求等待响应时工作(JS还可以做其他的),
// 当服务器返回响应时,会运行回调来处理它.
// 3. 我们可以用Ajax做什么?
// 我们可以使用Ajax与服务器通信,
// 在不刷新页面的情况下发送请求给服务器,
// 接收并使用从服务器发来的数据,交换数据,更新页面
2.1 体验ajax
javascript
<h2>城市数据</h2>
<p class="province">
<!-- 数据渲染到这里 -->
</p>
<button class="btn">渲染省份数据</button>
<!--
axios库地址: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
省份数据地址: http://hmajax.itheima.net/api/province
需求: 点击按钮 通过 axios 获取省份数据 并渲染
-->
<!-- 使用axios记得先导包 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const btn = document.querySelector('.btn')
btn.addEventListener('click', () => {
// console.log('点了按钮')
// 通过 axios 获取省份数据 并渲染
// 1. 调用axios函数
axios({
url: 'http://hmajax.itheima.net/api/province',
method:'GET'
}).then(res => {
// 2. 接收并使用数据
// res.data 可以获取服务器返回的数据
alert(res.data.list)
})
})
</script>
2.2 接口文档
javascript
<!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>
<h2>接口及接口文档</h2>
<button>测试</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 1.绑定点击事件
document.querySelector('button').onclick = function () {
// 调用方法 和 服务器 通讯
axios({
url: 'url地址',
method: 'get',
}).then(result => {
console.log(result)
})
}
</script>
</body>
</html>
请求方法
2.3 axios-get请求
接口地址 :
[https://gitee.com/westblueflower/testApi#lol-](https://gitee.com/westblueflower/testApi#lol-)查询
javascript
<p>点击发送请求</p>
<button class="btn1">没有参数</button>
<button class="btn2">有参数</button>
<!-- 1. 引入axios库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
javascript
// 接口地址 : `https://gitee.com/westblueflower/testApi#lol-查询`
<h2>axios-get</h2>
<button class="btn1">测试 没有参数</button>
<button class="btn2">测试 有参数</button>
<!-- 1. 引入axios库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const btn1 = document.querySelector('.btn1')
const btn2 = document.querySelector('.btn2')
const api_url = 'http://ajax-api.itheima.net/api/news123'
const api_city = 'http://ajax-api.itheima.net/api/area?pname=辽宁省&cname=辽阳市'
const api_lol = 'https://autumnfish.cn/api/lol/search'
btn1.addEventListener('click', () => {
axios.get(api_url)
.then( res => {
// 成功的
console.log(res)
})
.catch(err => {
// 如果地址写错了,或者其他一些报错的情况,进入到这里
console.clear()
console.log(err)
})
})
// GET方式请求
// 1. 拼接字符串的方式 ?key=val&key2=val&key3=val
// btn2.addEventListener('click', () =>{
// axios.get(`${api_lol}?q=提莫`)
// // ?key=value&key2=value2
// .then(res => {
// console.log(res)
// })
// })
// 用params的形式传递数据
btn2.addEventListener('click', () => {
axios.get(api_lol, {
params:{ // 这个params不能改,固定
q: '提莫'
}
})
.then(res => {
console.log(res)
})
})
2.4 axios.get发送请求
javascript
// axios方法get请求 几种方式 ? 2 种 , 本质上都是把参数拼接到url地址后面
// 1. 字符串拼接
axios.get(url地址?key=val)
.then(res => {
console.log(res)
})
.catch(err => {console.logI(err)} )
// 2. 对象的形式
axios.get('地址', {
// 实际上params这种方式,也是字符串拼接
params:{
key: val
}
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
2.4 eg.新闻列表
https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/api-24999380
javascript
// 等页面加载之后发送请求
// window ==> load 页面完全加载之后渲染
// document => DOMContentLoaded
window.addEventListener('load', () => {
const box = document.querySelector('#news-list')
// 1. 调用axios.get发送请求
const api = 'http://ajax-api.itheima.net/api/news'
axios.get(api).then(res => {
// res response ,如果请求成功,后端返给我的数据
// 2. 成功的回调
// console.log(res)
const htmlArr = res.data.data.map(el => {
// 对象的解构
const {cmtcount, id, img, source, time, title} = el
return `
<div class="news-item">
<img class="thumb" src="${img}" alt="" />
<div class="right-box">
<!-- 新闻标题 -->
<h1 class="title">${title}</h1>
<div class="footer">
<div>
<!-- 新闻来源 -->
<span>${source}</span>
<!-- 发布日期 -->
<span>${time}</span>
</div>
<!-- 评论数量 -->
<span>评论数:${cmtcount}</span>
</div>
</div>
</div>
`
})
// 3. 渲染到页面上~~~
box.innerHTML = htmlArr.join('')
}) // end then
})
调用接口 ==> 类似于访问后端封装好的一个函数 /方法
中午复习
javascript
// 前后端
// ===> Ajax 异步JavaScript and XML
// 特点: 不用刷新页面就可以发送请求,更新数据
// URL地址: 四个
// 1. 协议:http https
// 2. 主机名 : ip/域名
// 3. 端口号: 0-65535 http: 80 https: 443
// 4. 路径 :资源的路径
// 接口: url地址 ==> 就叫做接口
// 调用一个接口 ===> 类似于访问调用后端的一个函数方法
// 接口文档 注意三个点:
// 1. 接口的地址
// 2. 接口的方法
// 3. 参数
// 请求的方法常见的有5个 (2个)
// GET 获取数据,查询数据
// POST 传递数据
// DELETE 删除
// PUT 更新完整的数据
// PATCH 更新部分数据
// axios 是一个js库,专门用作网络请求的,基于XHR封装 XMLHttpRequest对象封装
// axios发送GET请求,
// 1. 先引入axios包
// axios-get请求
// 1.1 字符串拼接
axios.get(URL地址?key=value&key2=value2).then(res => {
console.log(res)
}).catch(err => { 错误处理})
// 1.2 传一个params对象
axios.get(URL地址, {
params:{
key1:val1,
key2:val2,
}
}).then(res => {
// 成功的回到
}).catch(err => {
// 失败的回调
})
2.5 axios-post请求
javascript
<h2>axios-POST</h2>
<button class="btn">测试 POST</button>
<!-- 1. 引入axios -->
<!-- http://ajax-api.itheima.net/api/login -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const btn = document.querySelector('.btn')
btn.addEventListener('click', () => {
// 2. 点击发送请求, 根据文档设置请求方法和参数信息
axios.post('http://ajax-api.itheima.net/api/login',{
username:'admin',
password:'123456'
}).then(res => {
// 成功的逻辑
console.log(res)
}).catch(err => {
// 失败的逻辑
console.log(err.message)
})
})
</script>
2.6 用户登录案例
javascript
<script src="./lib/axios.js"></script>
<script>
// 1. 获取按钮表单
const btn = document.querySelector('#btnLogin')
const user_ipt = document.querySelector('#username')
const pwd_ipt = document.querySelector('#password')
// 接口地址
const api = 'http://ajax-api.itheima.net/api/login'
// 2. 注册事件
btn.addEventListener('click', () => {
// 箭头函数没有this
// 点击按钮的时候,获取usrename和password的值
const username = user_ipt.value
const password = pwd_ipt.value
// 3. 发送请求
axios.post(api, {
// ES6 的简写
username,
password
}).then(res => {
// console.log(res)
alert(res.data.message)
}).catch(err => {
// console.log(err)
console.dir(err)
alert(err.response.data.message)
// alert('登录失败')
})
})
</script>
3. 报文
3.1 请求报文
3.2 响应报文
4. 状态码
4.1 http状态码
三位数字组成,在network => 网络中查看 http 响应状态码(Status Code)由三位数字组成,用来标识响应成功与否的状态。 在状态行中所包含的状态码,叫做响应状态码 / http状态码 响应状态码是由 http 协议规定的,具有通用性。每个不同的状态码都有其标准的含义,不能乱用。
常见的http状态码
CV体验一下
javascript
<!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>
<h2>测试http状态码</h2>
<button class="class-a">200状态码</button>
<button class="class-b">400状态码</button>
<button class="class-c">401状态码</button>
<button class="class-d">404状态码</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 正常请求 200
document.querySelector('.class-a').onclick = function (e) {
// ajax前后端交互
axios({
url: `http://ajax-api.itheima.net/api/news`,
method: 'get',
}).then(res => {
// 逻辑略
console.log('res:', res)
})
}
// 参数错误 400
document.querySelector('.class-b').onclick = function (e) {
// ajax前后端交互
axios({
url: `http://ajax-api.itheima.net/login`,
method: 'post',
data: {
username: 'jack',
password: '123456',
},
}).then(res => {
// 逻辑略
console.log('res:', res)
})
}
// 未授权(未登录) 401
document.querySelector('.class-c').onclick = function (e) {
// ajax前后端交互
axios({
url: `http://ajax-api.itheima.net/dashboard`,
method: 'get',
}).then(res => {
// 逻辑略
console.log('res:', res)
})
}
// 地址不存在 404
document.querySelector('.class-d').onclick = function (e) {
// ajax前后端交互
axios({
url: `http://ajax-api.itheima.net/login123`,
method: 'post',
data: {
username: 'jack',
password: '123456',
},
}).then(res => {
// 逻辑略
console.log('res:', res)
})
}
</script>
</body>
</html>
4.2 业务状态码
在响应体的数据中所包含的状态码,叫做业务状态码 业务状态码是后端程序员自定义的,不具有通用性。
eg.机器人聊天
todo01 按下回车或点击按钮发送请求
javascript
const ipt = document.querySelector('.input_txt')
const btn = document.querySelector('.input_sub')
// 1. 回车的时候
ipt.addEventListener('keyup', function(e){
// 怎么判断按下了哪个键?
// console.log(e.key)
if (e.key === 'Enter'){
// 发送请求,和机器人聊天
chat()
}
})
// 2. 按下按钮的时候
btn.addEventListener('click', function(){
// 发送请求
chat()
})
// 3. 和机器人聊天
const chat = function(){
// 发送请求,和机器人聊天
console.log('ohayo')
}
todo 02 创建自己的聊天框
javascript
const chat = function(){
/* ==================== 创建一个自己的聊天框 ===================== */
// 1. 有内容才创建聊天li标签
const value = ipt.value.trim()
// 如果输入的值等于空,不执行后面的代码
if(!value) return
// 创建一个li标签
const myLi = document.createElement('li')
myLi.innerHTML = `
<img src="img/person02.png" />
<span>${value}</span>
`
myLi.classList.add('right_word')
// 把创建好的li标签放到box中
box.append(myLi)
// 清空数据
ipt.value = ''
/* ==================== 发送请求,并创建机器人的聊天框 ===================== */
}
todo03 发送请求,创建机器人聊天框
javascript
// axios.get(`${api}?spoken=${value}`)
axios.get(api, {
params:{
spoken:value
}
}).then(res => {
// 在这个位置创建机器人的聊天框
console.log(res)
const robotLi = document.createElement('li')
robotLi.innerHTML = `
<img src="img/person01.png" />
<span>${res.data.data.info.text}</span>
`
robotLi.classList.add('left_word')
// 追到到box中
box.append(robotLi)
// 调用滚动的方法
resetui()
})
完整的代码
javascript
const ipt = document.querySelector('.input_txt')
const btn = document.querySelector('.input_sub')
const box = document.querySelector('.talk_list')
const api = 'http://ajax-api.itheima.net/api/robot'
// 1. 回车的时候
ipt.addEventListener('keyup', function(e){
// 怎么判断按下了哪个键?
if (e.key === 'Enter'){
// 发送请求,和机器人聊天
chat()
}
})
// 2. 按下按钮的时候
btn.addEventListener('click', function(){
// 发送请求
chat()
})
// 3.
const chat = function(){
/* ==================== 创建一个自己的聊天框 ===================== */
// 1. 有内容才创建聊天li标签
const value = ipt.value.trim()
// 如果输入的值等于空,不执行后面的代码
if(!value) return
// 创建一个li标签
const myLi = document.createElement('li')
myLi.innerHTML = `
<img src="img/person02.png" />
<span>${value}</span>
`
myLi.classList.add('right_word')
// 把创建好的li标签放到box中
box.append(myLi)
// 清空数据
ipt.value = ''
resetui()
/* ==================== 发送请求,并创建机器人的聊天框 ===================== */
// axios.get(`${api}?spoken=${value}`)
axios.get(api, {
params:{
spoken:value
}
}).then(res => {
// 在这个位置创建机器人的聊天框
console.log(res)
const robotLi = document.createElement('li')
robotLi.innerHTML = `
<img src="img/person01.png" />
<span>${res.data.data.info.text}</span>
`
robotLi.classList.add('left_word')
// 追到到box中
box.append(robotLi)
// 调用滚动的方法
resetui()
})
}