仙游有人做网站宣武郑州阳网站建设
AJAX概念和axios使用
AJAX概念
AJAX就是使用XMLHttpRequest对象与服务器通信，它可以使用JSON、XML、HTML和text文本等格式发送和接收数据，AJAX最吸引人的就是它的异步特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据或更新页面
axios
基于XMLHTTPRequest封装
语法：
1.引入axios
https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
<!-- 引入axios.js文件 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>console.log(axios)</script>
2.使用axios函数
传入配置对象
再用.then回调函数接收结果，并做后续处理
axios({
url:‘目标资源地址'
}).then((result)=>{
//对服务器返回的数据做后续处理
})
<!-- 引入axios.js文件 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>let div = document.querySelector('div')// 2.使用axios给提供的函数，进行数据请求axios({url: 'https://hmajax.itheima.net/api/province'}).then(// function(result){ // 在then回调函数中，第一个参数就是我们服务端返回的数据结果 }// 箭头函数的写法result => {console.log(result)console.log(result.data)console.log(result.data.list)// 把省份写回到页面//还可以使用结构获取所需数据 const {data:{list}}=resultconst data = result.data.listdiv.innerHTML = data.join('<br>')})</script>
URL
URL查询参数
浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：使用axios提供的params选项
注意：axios在运行时把参数名和值，会拼接到url?参数名=值
axios({
url:'目标资源地址'，
params:{
参数名：值
}
}).then(
对服务器返回的数据做后续处理
)
<!-- 引入axios.js文件 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>let div = document.querySelector('div')// 2.使用axios给提供的函数，进行数据请求axios({url: 'https://hmajax.itheima.net/api/city',params: {pname: '北京'}}).then(// function(result){ // 在then回调函数中，第一个参数就是我们服务端返回的数据结果 }// 箭头函数的写法result => {const { data: { list } } = resultconsole.log(result)console.log(list)})</script>
请求方法和数据提交
请求方法：对服务器资源要执行的操作
GET:获取数据
POST:数据提交
PUT:修改数据(全部)
DELETE:删除数据
PATCH:修改数据(部分)
axios请求配置
url:请求的URL网址
method:请求的方法，GET可以省略（不区分大小写）
data:提交数据
错误处理
浏览器报错
axios报错
错误信息在错误对象中的response->data->message
axios错误处理
语法:在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参
axios({
//请求选项
}).then(result=>{
//处理数据
}).catch(error=>{
//处理错误
})
HTTP协议-报文
请求报文(请求标头)
组成
1.请求行(第一行)：请求方法，URL，协议
2.请求头(第2行到第11行)：以键值对的格式携带的附加信息，比如：Content-Type(发送给后台的数据格式)(关注这个就可以)
3.空行：分隔请求头，空行之后市发送给服务器的资源
空行在新版本的浏览器中去掉了
载荷就是请求体
发送的数据json数据(json数据的键和值都用“ ”包裹)
XHR(网络资源请求)
请求报文(错误排查)
先打开控制台，再执行操作
打开XHR，打开所发送的这一条请求
先看请求标头，检查请求方式和请求地址是否正确
再看请求体(请求载荷)
响应报文
HTTP协议：规定了浏览器要发送及服务器返回内容的格式
响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的内容
组成：
1.响应行(状态行)：协议、HTTP响应状态码、状态信息
2.响应头:以键值对的格式携带的附加信息，比如：Content-Type
3.空行:分隔响应头，空行之后市服务器返回的资源
4.响应体：返回的资源
预览是处理过的响应体
响应状态码(用来表明请求是否成功完成)
404：服务器找不到资源
接口
接口文档
描述接口的文章
form-serialize插件
作用：快速收集表单元素的值
//表单必须存在name属性
const data=serialize(document.querySelector('form') //不写参数的话得到的是一个键=值的查询参数
const data=serialize(document.querySelector('form'，{hash:true}) //会得到一个对象格式的数据
const data=serialize(document.querySelector('form' {hash:true,empty:true}) .//未输入的表单以控制代替，而不是空对象，能够获取为空的input，可以判断是否有值使用：参考文章