AJAX-让数据活起来(一)：入门
目录
一、AJAX概念和axios使用
1.1 什么是AJAX ?
1.2 怎么用AJAX ?
1.3 axios使用
二、认识URL
2.1 什么是URL?
2.2 URL的组成
组成
协议
域名
资源路径
获取-新闻列表
三、URL查询参数
URL查询参数
axios - 查询参数
四、常用请求方法和数据提交
常用请求方法
数据提交
axios请求配置
数据提交-注册账号
axios错误处理
五、HTTP协议-报文
HTTP协议-请求报文
请求报文的格式
请求报文-错误排查
HTTP协议-响应报文
六、接口文档
七、案例-用户登录
八、form-serialize插件
一、AJAX概念和axios使用
1.1 什么是AJAX ?
定义：
概念：AJAX是浏览器与服务器进行数据通信的技术
1.2 怎么用AJAX ?
1. 先使用axios库，与服务器进行数据通信
- 基于XMLHttpRequest封装、代码简单、月下载量在14亿次
- Vue、React项目中都会用到axios
2. 再学习XMLHttpRequest对象的使用，了解AJAX底层原理
1.3 axios使用
语法：
1. 引入axios.js：https://cdn.staticfile.org/axios/0.18.0/axios.min.js
或者：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2. 使用axios函数
- 传入配置对象
- 再用 .then 回调函数接收结果，并做后续处理
需求：请求目标资源地址,拿到省份列表数据，显示到页面
目标资源地址：http://hmajax.itheima.net/api/province
总结：
1. AJAX有什么用?
- 浏览器和服务器之间通信，动态数据交互
2. AJAX如何学
- 先掌握axios使用
- 再了解XMLHttpRequest原理
3. 这一节axios体验步骤?
- 引入axios库
- 使用axios语法
二、认识URL
认识URL
原因：知道作用和组成，方便与后端人员沟通
2.1 什么是URL?
定义：
例如：
概念：URL就是统一资源定位符，简称网址，用于访问网络上的资源
2.2 URL的组成
组成
协议
http协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式
域名
域名：标记服务器在互联网中方位
资源路径
资源路径：标记资源在服务器下的具体位置
获取-新闻列表
需求：使用axios从服务器拿到新闻列表数据
目标资源地址: http://hmajax.itheima.net/api/news
总结：
1. URL是什么:
- 统一资源定位符，网址，用于访问服务器.上资源
2. 请解释这个URL，每个部分作用?
- http://hmajax.itheima.net/api/news
- 协议://域名/资源路径
三、URL查询参数
URL查询参数
定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http://xxxx.com/ xxx/xxx?参数名1=值1&参数名2=值2
axios - 查询参数
语法：使用axios提供的params选项
注意: axios在运行时把参数名和值，会拼接到url!?参数名=值
城市列表：http://hmajax.itheima.net/api/city?pname=河北省
总结：
1. URL查询参数有什么作用?
- 浏览器提供给服务器额外信息，获取对应的数据
2. axios 要如何携带查询参数?
- 使用params选项，携带参数名和值
案例-地区查询
需求：根据输入的省份名字和城市名字，查询地区并渲染列表
首先：确定URL网址和参数说明
- 查询某个省内某个城市的所有地区：http://hmajax.itheima.net/api/area
- 参数名：
- pname：省份名字或直辖市名字，比如北京、福建省、辽宁省...
- cname：城市名字，比如北京市、厦门市、大连市...
完整：http://hma