AJAX概念和axios使用

AJAX概念

AJAX就是使用XMLHttpRequest对象与服务器通信，它可以使用JSON、XML、HTML和text文本等格式发送和接收数据，AJAX最吸引人的就是它的异步特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据或更新页面

axios

基于XMLHTTPRequest封装 语法： 1.引入axios https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

2.使用axios函数 传入配置对象 再用.then回调函数接收结果，并做后续处理

axios({

url:‘目标资源地址'

}).then((result)=>{

//对服务器返回的数据做后续处理

})

URL

URL查询参数

浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：使用axios提供的params选项

注意：axios在运行时把参数名和值，会拼接到url?参数名=值

axios({

url:'目标资源地址'，

params:{

参数名：值

}

}).then(

对服务器返回的数据做后续处理

)

请求方法和数据提交

请求方法：对服务器资源要执行的操作 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，可以判断是否有值

使用：参考文章

精彩内容

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：