第十八天 Ajax总结
Ajax
1 概述
AJAX ：Asynchronous JavaScript And XML，异步的 JavaScript 和 XML。
我们先来说概念中的 JavaScript 和 XML，JavaScript 表明该技术和前端相关；XML 是指以此进行数据交换。而这两个我们之前都学习过。
AJAX 作用有以下两方面：
- 与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等。
上图所示的效果我们经常见到，在我们输入一些关键字（例如 java）后就会在下面联想出相关的内容，而联想出来的这部分数据肯定是存储在百度的服务器上，而我们并没有看出页面重新刷新，这就是 更新局部页面 的效果。
再如下图：
我们在用户名的输入框输入用户名，当输入框 失去焦点，如果用户名格式不正确，就会在下方展示提示的信息；在这整个过程中也没有页面的刷新，只是在局部展示出了提示信息，这就是 更新局部页面 的效果。
2 异步与同步
知道了局部刷新后，接下来我们再聊聊同步和异步：
- 同步发送请求过程如下：
浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。
- 异步发送请求过程如下
浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。
3 原生Ajax(了解)
1). 数据准备地址：
http://yapi.smart-xwork.cn/mock/169327/emp/list
2). 导入资料中准备的 Ajax-原生方式.html 文件，步骤如下:
A. 创建XMLHttpRequest对象：用于和服务器交换数据
B. 向服务器发送请求
C. 获取服务器响应数据
原生Ajax
原生Ajax获取返回的结果是json格式的字符串文本，要想解析，需要手动调用JSON.parse()转为js对象。
上述的原始Ajax写法，比较繁琐，在现在的项目开发中已经不再使用了。现在企业开发中，一般会使用一些高级的封装技术来实现Ajax请求，如Axios。
4 Axios
Axios 对原生的AJAX进行封装，简化书写、快速开发。
Axios官网是：https://www.axios-http.cn
4.1 基本使用
axios 使用是比较简单的，分为以下两步：
- 引入 axios 的 js 文件
- 使用axios 发送请求，并获取响应结果
-
- 发送 get 请求
axios({method:"get",url:"http://yapi.lkweixin.com/mock/6377/emp/list"
}).then((result) => {console.log(result.data);
});-
- 发送 post 请求
axios({method:"post",url:"http://yapi.lkweixin.com/mock/6377/emp/deleteById",data:"id=1"
}).then((result) => {console.log(result.data);
});axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：
- method 属性：用来设置请求方式的。取值为 get 或者 post。
- url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
- data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。
then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 result 参数是对响应的数据进行封装的对象，通过 result.data 可以获取到响应的数据。
为了方便起见， Axios 已经为所有支持的请求方法提供了别名。如下：
| 请求方式 | 调用形式 |
| GET | axios.get(url[,config]) |
| POST | axios.post(url[,data[,config]) |
| PUT | axios.put(url[,data[,config]) |
| DELETE | axios.delete(url[,config]) |
| HEAD | axios.head(url[,config]) |
| OPTIONS | axios.option(url[,config]) |
| PATCH | axios.patch(url[,data[,config]) |
而我们只关注 get 请求和 post 请求。
入门案例中的 get 请求代码可以改为如下：
function getData(){axios.get("http://yapi.lkweixin.com/mock/6377/emp/list").then((result) => {console.log(result.data);});}入门案例中的 post 请求代码可以改为如下：
function postData(){axios.post("http://yapi.lkweixin.com/mock/6377/emp/deleteById","id=1").then((result) => {console.log(result.data);});
}4.2 案例
基于Vue及Axios完成数据的动态加载展示。
1.在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面。
2.数据准备的url：http://yapi.lkweixin.com/mock/6377/emp/list
http://yapi.lkweixin.com/mock/6377/emp/list
具体的页面代码实现如下：
Vue-Axios案例
编号 姓名 图像 性别 职位 入职日期 最后操作时间 {{index + 1}} {{emp.name}} ![]()
{{emp.gender == 1 ? "男" : "女"}} {{emp.job}} {{emp.entrydate}} {{emp.updatetime}}