AJAX

AJAX

名词解释

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAX原理

贴一篇别人写的详细原理总结：blog.csdn.net/weixin_3758…

在AJAX标准出来以前，每一次的接口请求重新渲染数据，都需要浏览器给服务端发一次HTTP请求，请求成功了，服务器就给浏览器重新发html，这就是刷新了页面，也就是说，以前网页的所有业务都是在服务器上的。AJAX出来以后，可以实现在不刷新页面的前提下，更新网页部分数据，这就节约了非常多的网络资源，不必每次请求网页部分数据都要重新刷新页面。

XMLHttpRequest

原生js实现AJAX的写法

function success(text) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
request.open('GET', '/api/categories');
request.send();

jQuery的$.ajax()

jq的ajax就是封装XMLHttpRequest和添加jsonp，代码：

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function (result) {},
   error: function (error) {}
});

axios

axios 也是对 XMLHttpRequest的封装，但是他是通过ES6的Promise来对XMLHttpRequest封装。axios的特征是：

1. 从浏览器中创建 XMLHttpRequest
2. 支持 Promise API
3. 客户端支持防止CSRF
4. 提供了一些并发请求的接口（重要，方便了很多的操作）
5. 从 node.js 创建 http 请求
6. 拦截请求和响应
7. 转换请求和响应数据
8. 取消请求
9. 自动转换JSON数据

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
})

用Promise封装的异步，能够解决回调地狱问题。