AJAX
AJAX 入门(让数据活起来)
AJAX 概念和 axios 使用
AJAX是游览器与服务器进行数据通信的技术。
- 怎么用AJAX?
先使用 axios [æk‘sioʊs] 库,与服务器进行数据通信
- 基于 XMLHttpRequest 封装、代码简单
- Vue、React 项目中都会用到 axios
再学习 XMLHttpRequest 对象的使用,了解 AJAX 底层原理
- axios 使用
语法:
1.引入 axios.js:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2.使用 axios 函数
- 传入配置对象
- 再用 .then 回调函数接收结果,并做后续处理
需求:请求目标资源地址,拿到省份列表数据,显示到页面
目标资源地址:http://hmajax.itheima.net/api/provinceaxios({ url: 'http://hmajax.itheima.net/api/province' }).then(result => { // 对服务器返回的数据做后续处理 })
URL
概念:URL 就是统一资源定位符,简称网址,用于访问网络上的资源
- URL组成
- 协议
http 协议:超文本传输协议,规定浏览器和服务器之间传输数据的格式
- 域名
域名:标记服务器在互联网中方位
- 资源路径
资源路径:标记资源在服务器下的具体位置
URL 查询参数
定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据
语法:http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
- axios-查询参数
语法:使用 axios 提供的 params 选项
注意:axios 在运行时把参数名和值,会拼接到 url ?参数名=值
城市列表:http://hmajax.itheima.net/api/city?pname=河北省
常用请求方法和数据提交
- 常用请求方法
请求方法:对服务器资源,要执行的操作
- axios 请求配置
url:请求的 URL 网址
method:请求的方法,GET可以省略(不区分大小写)
data:提交数据
- 数据提交-注册账号
需求:通过 axios 提交用户名和密码,完成注册功能
注册用户 URL 地址:http://hmajax.itheima.net/api/register
请求方法:POST
参数名:
- username 用户名(中英文和数字组成,最少 8 位)
- password 密码(最少 6 位)
axios 错误处理
语法:在 then 方法的后面,通过点语法调用 catch 方法,传入回调函数并定义形参
HTTP协议-报文
- HTTP 协议-请求报文
HTTP 协议:规定了浏览器发送及服务器返回内容的格式
请求报文:浏览器按照 HTTP 协议要求的格式,发送给服务器的内容
组成部分:
- 请求行:请求方法,URL,协议
- 请求头:以键值对的格式携带的附加信息,比如:Content-Type
- 空行:分隔请求头,空行之后的是发送给服务器的资源
- 请求体:发送的资源
- HTTP 协议-响应报文
HTTP 协议:规定了浏览器发送及服务器返回内容的格式
响应报文:服务器按照 HTTP 协议要求的格式,返回给浏览器的内容
- 响应行(状态行):协议、HTTP 响应状态码、状态信息
- 响应头:以键值对的格式携带的附加信息,比如:Content-Typ
- 空行:分隔响应头,空行之后的是服务器返回的资源
- 响应体:返回的资源
- HTTP 响应状态码
HTTP 响应状态码:用来表明请求是否成功完成
form-serialize 插件
作用:快速收集表单元素的值
语法: