Ajax

一、Ajax简介

Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。

二、原理

Ajax通过XMLHttpRequest对象来向服务器端发起异步请求，从服务器获取响应后，便使用JavaScript进行DOM操作更新页面

三、优势与缺点

优势：

1. 无需额外插件支持（一般浏览器且默认开启JavaScript即可使用）
2. 优秀的用户体验（部分刷新页面，从而使web应用程序能快速响应客户操作）
3. 性能提升（相比于传统form表单提交和整页刷新获取数据，ajax实现了按需发送）
4. 减轻服务器和带宽的负担。Ajax工作原理相当于在用户和服务器之间加了一个中间层，使用户操作和服务端响应异步化。Ajax在客户端创建Ajax引擎，把传统方式下的一些服务器负担工作转移至客户端，从而减轻了服务器和带宽的负担。

缺点：

1. Ajax本身是基于MVC的编程，而目前前端的趋势是MVVM
2. 不符合关注分离的原则
3. 传统Ajax请求之间若是有先后关系的话会出现回调地狱

四、手动简单实现

function myAjax(url, method="GET",data=null,async_=true) {
        let xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                console.log(`响应状态:${xhr.status}`,"FINISH");
            }
        }
        xhr.open(method, url, async_);
        xhr.send(data)
    }

结果：