前言

差不多到学期末了有点闲，于是就研究一下AJAX的原理。发现也没有想象中的那么难，当然还有高级点用法需要研究。不过基础用法还是挺容易理解的，正所谓万变不离其宗，底层理解了，其他的套路应该都差不多。

1. 同步和异步的理解

• 同步: 同步方法一旦执行，就只能只能执行下去，等待服务器响应成功或失败返回结果后，才能继续下一步操作。
• 异步: 异步方法和同步的区别就是无须等待服务器的响应结果返回来才能执行下一步操作。进一步的提高了用户的体验。

2. AJAX 介绍

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

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

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

• AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
  (ajax介绍转自菜鸟教程的AJAX教程)

3. AJAX 的4个阶段

1. 实例化一个xhr对象

var xhr = new XMLHttpRequest()

2. 连接服务器

xhr.open("get","api/test.php",true)

open(method,url,async) 参数：

• method 请求的类型；GET 或 POST
• url：API接口地址
• async：true（异步）或 false（同步）

3. 向服务器发送数据

xhr.send()

4. 等待服务器响应返回数据

xhr.onreadystatechange = function () {
	// 触发readystatechange事件，然后检测readyState属性
	
}

readyState, 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

1. 请求未初始化
2. 服务器连接已建立
3. 请求已接收
4. 请求处理中
5. 请求已完成，且响应已就绪

status状态

4. 完整流程

var obj = {
            type:'get',
            url: 'https://www.tanshangbiao.cn/project/phpApi/test.php',
            async: true,
            success: (res)=>{
                console.log(res)
            }
        }
        // ajax
        function _ajax(options) {
            // 1. 实例化xhr对象
            var xhr = new XMLHttpRequest();
            // 序列化参数
            var params = formsParams(options.data);
            // 判断请求类型
            /*
                open() 三个参数
                1. 请求类型
                2. 请求地址
                3. 是否异步
            */
            if(options.type == 'post') {
                xhr.open(options.type, options.url, options.async || true);
                // post 请求头
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                // 发送参数
                xhr.send(params)
            }else if (options.type == 'get') {
                xhr.open(options.type, options.url + "?" +params, options.async || true);
                xhr.send(null)
            }
            //  等待服务器返回结果
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    options.success(xhr.responseText)
                }
            }
        }
        // 序列化参数
        function formsParams(data) {
            var arr = [];
            for(var prop in data) {
                //console.log(prop)
                arr.push(prop + '=' + data[prop]);
            };
            return arr.join('&');
        }
        _ajax(obj)

5. 总结

万变不离其宗，高逼格的又实用的Promise写法好像也是这个原理。