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}}=result
                const data = result.data.list
                div.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 } } = result
                console.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，可以判断是否有值

使用：参考文章