<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AJAX</title>
</head>
<body>
<!-- 什么是AJAX
定义AJAX是异步的JavaScript和XML，
简单点说，就是XMLHttpRequest对象与服务器通信，它可以使用JSON，XML，HTML，和text文本格式发送和接收数据，
AJAX最吸引人的就是它的异步特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。 -->
<!-- 概念：AJAX是浏览器与服务器进行数据通信的技术,能把把数据变活 -->
<!-- 怎么用AjAX
1.先使用axios库，与服务器进行数据通信
2.再学习XMLHttp Request对象的使用，了解AJAX底层原理 -->
<!-- axios使用
语法：
1.引入axios.js
2.使用axios函数
要传入配置对象，再用.then回调函数接收结果，并做后续处理
axios({
url:'目标资源地址'
}).then((result)=>{
//对服务器返回的数据做后续处理
})
-->
<!-- URL
定义：统一资源定位符，简称网址，用于访问网络上的资源
组成：协议+域名+资源路径
http协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式
域名：必须要写的，标记服务器在互联网中的方位
资源路径：标记资源在服务器下的具体位置
-->
<!-- URL查询参数
定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http：//xxxx.com/xxx/xxx?参数名=值&参数名2=值2-->
<!-- axios查询参数
语法：使用axios提供的params选项
注意：axios在运行时把参数名和值，会拼接到url？参数名=值
-->
<!-- method：请求的方法，GET可以省略不区分大小写
GET:获取数据 （默认行为可以省略）
POST:提交数据
PUT:修改数据（全部）
PATCH:删除数据
DELETE:修改数据（部分）
-->
<!-- data：提交数据 -->
<!-- axios错误处理
语法：在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参
axios({
//请求选项
}),then(result => {
//处理数据
}).catch(error =>{
//处理错误
})
-->
<!--浏览器发送给服务器的内容叫做请求报文
请求报文格式
1.请求行：请求方法，URL，协议
2.请求头：以键值对的格式携带的附加信息，比如：Content-type（类型）
3.空行：分隔请求头，空行之后的是发送给服务器的资源
4.请求体：发送的资源
可以通过chrome网络面板查看请求报文
请求报文可以用于错误排查
可以通过请求报文排查错误原因，并修复
-->
<!-- HTTP协议-响应报文
HTTP协议：规定了浏览器发送及服务器放回内容的格式
响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的内容
1.响应行（状态行）：协议，HTTP响应状态码，状态信息
2.响应头：以键值对的格式携带的附加信息，比如：Content-Type
3.空行：分隔响应头，空行之后的是服务器返回的资源
4.响应体：返回的资源
HTTP响应状态码
用来表明请求是否成功完成
比如404：服务器找不到资源
1xx：信息
2xx：成功
3xx：重定向信息
4xx：客户端错误
5xx：服务器错误
-->
<!-- 接口文档
接口文档：后端提供的描述接口文章
接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数
-->
<p></p>
<!--
城市列表: http://hmajax.itheima.net/api/city
参数名: pname
值: 省份名字
-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'http://hmajax.itheima.net/api/city',
// 查询参数
params: {
pname: '福建省'
}
}).then(result => {
console.log(result.data.list)
document.querySelector('p').innerHTML = result.data.list.join('<br>')
})
</script>
<button class="btn">注册用户</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/*
注册用户：http://hmajax.itheima.net/api/register
请求方法：POST
参数名：
username：用户名（中英文和数字组成，最少8位）
password：密码 （最少6位）
目标：点击按钮，通过axios提交用户和密码，完成注册
*/
document.querySelector('.btn').addEventListener('click', () => {
axios({
url: 'http://hmajax.itheima.net/api/register',
method: 'post',
data: {
username: 'itheima007',
password: '7654321'
}
}).then(result => {
// 成功
console.log(result)
}).catch(error => {
// 失败
// 处理错误信息
console.log(error)
console.log(error.response.data.message)
alert(error.response.data.message)
})
})
</script>
</body>
</html>
