2022-05-29 ajax,axios,promise,async和await,bootstrap,npm,node,webpack,git,express,CORS跨域,fetch
·
文章目录
一.AJAX阶段
1.什么是AJAX?
简答:浏览器与服务器通信的技术
原理:通过XMLHttpRequest对象来和服务器通信,可以使用text,JSON,XML,HTML等格式发送和接收数据
特点:异步,即不刷新页面的情况下和服务器通信
2.如何学习ajax?
先下载和使用axios库,和服务器进行数据通信,
再回头学习XMLHTTPRequest对象的使用,从而了解ajax的底层原理
3.URL的组成和每个部分的作用,查询参数
网页地址简称网址,本质是统一资源定位符(Uniform Resource Locator)
分类:网页资源(xxx.com/index.html),图片资源(xxx.com/logo.png),数据资源(xxx.com/api/province)
URL有三个部分组成:协议+域名+资源路径
http://hmajax.itheima.net/api/provice
http协议:超文本传输协议,规定浏览器和服务器之间传输数据的格式
4.axios的核心配置:查询参数,请求方法,错误处理等
- 查询参数:
http://hmajax.itheima.net/api/city?pname=河北省
params:{
pname:'河北省'
}
案例:地区查询(略)
- 请求方法:
get,post,put
methods:'post'
data:{
//提交的数据
}
- 错误处理
.then()
.catch(err){
alert(err.data.message)
}
5.http的请求报文
5.1.什么是请求报文?
浏览器按照http协议要求的格式,发送给服务器的内容
5.2.请求报文长这样
POST /login HTTP/1.1----------1.请求行=请求方法+URL+协议
Host: www.example.com-----------2.请求头:多行键值对,即 键:值
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Content-Type: application/x-www-form-urlencoded 重点关注这个请求头,它规定了请求体的格式:application/x-www-form-urlencoded（表单数据）或 application/json（JSON数据）。
Content-Length: 28
Accept: text/html,application/xhtml+xml
Connection: keep-alive
--------------3.空行:分隔请求头,空行后面是发送给服务器的资源
username=john&password=123456-----------4.请求体(可选):发送给服务器的资源
- 请求行：位于报文第一行，格式为
[HTTP方法] [资源路径] [HTTP版本]。例如，GET /index.html HTTP/1.1 - 请求头：多行键值对，提供额外信息如客户端类型、内容格式等。常见头部包括
Host（服务器域名）、User-Agent（客户端标识）、Content-Type（请求体格式）和Content-Length（请求体大小） - 空行：一个空白行，用于分隔头部和请求体。
- 请求体：可选部分，用于POST等方法的表单提交或数据上传。格式取决于
Content-Type
5.3.在哪里可以看到请求报文?
请求头:F12>网络>fetch/XML>标头>请求标头>查看源代码
请求体:F12>网络>fetch/XML>载荷
请求报文的错误排查
目的是通过请求报文排查错误原因并修复
登录报错的示例:
6.http的响应报文
6.1.什么是响应报文?
http协议:规定浏览器发送服务器返回内容的格式
响应报文:服务器按照http协议要求的格式返回给浏览器的内容
6.2.响应报文长这样
HTTP/1.1 200 OK -------状态行=协议版本+状态码+状态描述
Content-Type: text/html; charset=UTF-8 -------响应头:以键值对格式携带的附加信息
Content-Length: 132
Connection: keep-alive
Date: Tue, 15 May 2024 10:00:00 GMT
Server: Apache/2.4.41 (Ubuntu)
Cache-Control: max-age=3600
--------空行:分隔响应头和响应体
<!DOCTYPE html> -------------响应体:服务器返回的资源(实际数据部分)
<html> <head>
<title>示例页面</title>
</head> <body> <h1>欢迎访问！</h1> </body>
</html>
7.什么是接口文档?
描述接口的文档
接口:使用ajax与服务器通信是使用的UTL,请求方法,参数等
一个有效的接口文档:apifox.cn/apidoc/project-1937884/doc-1695440
8.form-serialize插件
作用:快速表单收集元素的值
下载:略
使用:const data=serialize(form,{hash:true,empty:true})
hash:true==>data是JS对象
hash:false==>data是查询参数
emtpy==>是否返回空值
注意事项:input框要设置name属性
9.引入Bootstrap模态框
9.1.通过属性控制显隐
- 在点击按钮上绑定
data-bs-toggle='modal-backdrop' data-bs-target='myModal’来控制模态框的显示 - 在点击按钮上绑定
data-bs-dismiss='modal'来控制隐藏
<!-- 模态框 -->
<div id="bookModal" class="modal-backdrop">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle">添加图书</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="bookTitle">书名</label>
<input type="text" id="bookTitle" placeholder="请输入书名">
</div>
<div class="form-group">
<label for="bookAuthor">作者</label>
<input type="text" id="bookAuthor" placeholder="请输入作者">
</div>
<div class="form-group">
<label for="bookPublisher">出版社</label>
<input type="text" id="bookPublisher" placeholder="请输入出版社">
</div>
</div>
<div class="modal-footer">
<button id="cancelBtn" class="btn btn-secondary">取消</button>
<button id="confirmBtn" class="btn btn-primary">确认</button>
</div>
</div>
</div>
9.2.通过JS控制显隐
//html
<button id="addBtn">
<i class="fas fa-plus"></i><span id="addBtn">添加</span>
</button>
//js
var myModel=document.getElementById("myModal");
var model=new bootstrap.Modal(myModel);//实例化模态框对象
document.querySelector('#addBtn').addEventListener('click',function(){
model.show(); //显示模态框
})
10.非项目环境如何调用接口并动态渲染页面?
//获取文章列表
const creator='张三三'
function getBookList() {
axios({
url: "https://hmajax.itheima.net/api/books",
method: "get",
params: {
creator
}
})
.then(res => {
const bookList = res.data.data;
// 尝试打印bookList
console.log("bookList:", bookList);
const htmlStr = bookList.map((book, index) => {
return `<tr>
<td>${index + 1}</td>
<td>${book.bookname}</td>
<td>${book.author}</td>
<td>${book.publisher}</td>
<td><a href="#">删除</a><a href="#" id="editBtn" class="btn btn-warning" data-bs-toggle="modal"
data-bs-target="#myModal">编辑</a></td>
</tr>`
}).join("");
document.querySelector("table>tbody").innerHTML = htmlStr;
})
}
getBookList();
11.如何实现图片上传功能?
接口文档:https://apifox.cn/apidoc/docs-site/1937884/api-49760221
接口地址: https://hmajax.itheima.net/api/uploadimg
步骤:
- 获取图片文件对象
- 使用FormData携带图片文件
- 提交表单数据到服务器,使用图片url网址
示例:
//html
<input type="file" class="upload">
//js
// 1.获取文件对象
const upload = document.querySelector('.upload');
// 监听文件变化事件
upload.addEventListener('change', function (e) {
//target中的files属性是一个FileList对象(伪数组)，包含了用户选择的文件列表
// console.log(e.target.files[0]);//0:File {name: 'JSAPI2.png', lastModified: 1751373447138
const file = e.target.files[0];
//2.使用FormData携带图片文件
const fd = new FormData();//创建一个FormData对象，用于存储要发送到服务器的内容。
fd.append('img', file); //这里的'file'要和后端接收的字段名一致
//3.提交表单数据到服务器,使用图片url网址
axios({
method: 'post',
url: 'https://hmajax.itheima.net/api/uploadimg', // 这里要和后端接口一致
data: fd,
}).then(res => {//图片回显
const img = document.createElement('img');
img.src = res.data.data.url;
document.body.appendChild(img);
console.log(res);
});
});
12.如何使用上传图片功能更换网站背景?
步骤:
- 选择图片上传,设置body背景
- 上传成功后保存url网址
- 网页运行后获取url网址
示例:
//微调上例代码
axios({
method: "post",
url: 'https://hmajax.itheima.net/api/uploadimg', // 这里要和后端接口一致
data: fd,
}).then(res => {
localStorage.setItem('bg', res.data.data.url)
})
......
const bg = localStorage.getItem('bg')
if (bg) {
document.body.style.backgroundImage = `url(${bg})`
}
二.XMLHttpRequest对象
XHR对象可以在不刷新页面的情况下请求URL获取数据,特点是局部刷新
axios是XHR对象的封装函数,但并不等同于XHR
学习XHR对象可以了解与服务器通信的方式,了解axios内部原理,同时也有其使用场景:小型静态网页可以不引入axios以缩小体积
1.使用步骤
// 1.创建XHR对象
const xhr = new XMLHttpRequest();
// 2.配置请求方法和URL地址
xhr.open('get', 'https://hmajax.itheima.net/api/province');
// 3.监听loadend事件(加载完成事件),接收响应
xhr.addEventListener('loadend', () => {
console.log(xhr.response)
const data=JSON.parse(xhr.response);//JSON.parse()将字符串转换为对象
console.log(data.list.join('
'))
});
// 4.发起请求
xhr.send()
2.XHR的查询参数
是浏览器提供给服务器的额外信息,使其返回浏览器想要的数据
xhr.open('get', 'https://hmajax.itheima.net/api/city?pname=辽宁省');
"?"号后面即为查询参数,多个查询参数之间用"&"号隔开
3.示例:获取城市列表
要求使用https://hmajax.itheima.net/api/area?${queryString}
获取城市区域数据,用于后续渲染到页面中,其中queryString是用户在省份和城市的input框中输入的pname和cname组成的对象
//HTML部分略
var provinceInput = document.getElementById('province');
var cityInput = document.getElementById('city');
var queryBtn = document.getElementById('query-btn');
//1.获取用户输入的省份和城市
const pname=provinceInput.value;
const cname=cityInput.value;
// 2.把省份和城市拼接成字符串----字符串=>对象=>URLSearchParams实例=>字符串
//字符串=>对象
const obj={
pname,
cname,
}
//对象=>URLSearchParams实例
const queryObj=new URLSearchParams(obj);
//URLSearchParams实例=>字符串
const queryString=queryObj.toString();//pname=湖南省&cname=长沙市
// console.log(pname,cname,obj,queryObj,queryString);
// 点击获取后台数据,并渲染到页面
queryBtn.addEventListener('click',function(){
alert('点击了查询按钮')
// 声明xhr对象
const xhr=new XMLHttpRequest();
// 配置请求参数和url
xhr.open('GET',`https://hmajax.itheima.net/api/area?${queryString}`,true);
xhr.addEventListener('loadend',function(){
// console.log(xhr.response);
if(xhr.status===200){
// 请求成功
const result=JSON.parse(xhr.response);
console.log(result);
// 渲染到页面
result.list.forEach(item=>{
//思路:创建option元素,设置value和innerText属性,添加到select中
const option=document.createElement('option');
option.value=item;
option.innerText=item;
document.getElementById('district-select').appendChild(option);
});
// 显示select标签
document.getElementById('district-select').style.display='block';
// 隐藏提示信息
document.getElementById('result-hint').style.display='none';
}
})
// 发送请求
xhr.send();
})
三.Promise
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)