1、ajax
1-1、作用:
能够局部刷新内容
1-2、背景:
js没有网络通讯能力,浏览器有内嵌的XMLHttpRequest能够实现网络请求
XMLHttpRequest本身是个构造函数,他提供属性方法用来实现网络请求
1-3、工作原理:
ajax的工作原理就是通过 XmlHttpRequest 对象来向服务器发出异步请求,从服务器中获得数据,然后用Javascript来操作DOM从而更新局部页面。
1-3-1、具体而言:
Ajax工作原理其实就是在一个页面的指定位置可以加载另一个页面中所有的输出内容。这样就实现了一个静态页面获取到数据库中所返回的数据信息了。根据这样的原理所以Ajax实现了静态页面在不刷新整个页面的情况下与服务器通信,减少了用户的等待时间,增强用户体验的友好程度。
2、promise
promise是为了解决回调地狱,本质也是XMLHttpRequest实现的
async/await基于promise实现,可以让异步请求以同步代码的形式呈现
promise是 es6 为解决异步编程的。
什么是异步?
1. 不会按照浏览器的加载方式 由上到下。
回调地狱:(出现层层回调函数的嵌套,我们称为回调地狱)
3、axios
axios是promise封装的http库
axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。
简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。
axios是ajax ajax不止axios。
4、前端哪里面有异步?
1. 回调函数
2. 定时器
3. 事件绑定
4. ajax
5、小结:(优缺点)
-
ajax:
本身是针对MVC的编程,不符合现在前端MVVM的浪潮;
基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案;
JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务。 -
axios:
从 node.js 创建 http 请求;
支持 Promise API;
客户端支持防止CSRF;
提供了一些并发请求的接口。 -
promise:
主要用于异步计算;
可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果;
可以在对象之间传递和操作promise,帮助我们处理队列。 -
为什么vue不使用ajax用axios:
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征: -
从浏览器中创建 XMLHttpRequest
-
支持 Promise API
-
客户端支持防止CSRF
-
提供了一些并发请求的接口
-
从 node.js 创建 http 请求
-
拦截请求和响应
-
转换请求和响应数据
-
取消请求
-
自动转换JSON数据