概念

AJAX 是浏览器与服务器进行数据通信的技术

怎么使用AJAX

先使用 axios库，与服务器进行数据通信

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios使用

引入

axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

使用axios函数

axios({

url: '目标资源地址'

}).then(result => {

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

})

<script>
        axios({
            url: 'http://hmajax.itheima.net/api/province'
        }).then(result => {
            console.log(result)
            console.log(result.data.list)
            console.log(result.data.list.join('<br>'))
            // 把准备好省份列表，插入到页面
            document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
        })
    </script>

查询参数

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

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

axios({

url: '目标资源地址',

params:{

参数名：值

}

}).then(result=>{

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

})

axios({
            url: 'http://hmajax.itheima.net/api/city',
            params:{
                pname:'广东省'
            }
        }).then(result=>{
            console.log(result)
            console.log(result.data.list)
            document.querySelector('p').innerHTML=result.data.list.join('<br>')
        })

请求配置

url：请求的 URL 网址

method：请求的方法，GET可以省略（不区分大小写）

data：提交数据

axios({
                url:'http://hmajax.itheima.net/api/register',
                method:'post',
                data:{
                    username:'12345678',
                    password:'123456'
                }

错误处理

在 then 方法的后面，通过点语法调用 catch 方法，传入回调函数并定义形参

url

概念

URL 就是统一资源定位符，简称网址，用于访问网络上的资源

组成

协议+域名+资源路径

协议

http 协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式

域名

域名：标记服务器在互联网中方位

资源路径

资源路径：标记资源在服务器下的具体位置

查询参数

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

语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

常用请求方法

GET

获取数据

POST

数据提交

PUT

修改数据（全部）

DELETE

删除数据

PATCH

修改数据（部分）

HTTP

协议－请求报文

请求报文的组成部分有:

请求行：请求方法，URL，协议

请求头：以键值对的格式携带的附加信息，比如：Content-Type

空行：分隔请求头，空行之后的是发送给服务器的资源

请求体：发送的资源

响应状态码

1xx：信息

2xx：成功

3xx：重定向消息

4xx：客户端错误

5xx：服务端错误

响应报文

响应报文的组成：

响应行（状态行）：协议、HTTP 响应状态码、状态信息

响应头：以键值对的格式携带的附加信息，比如 Content-Type

空行：分隔响应头，空行之后的是返回给浏览器的资源

响应体：返回的资源