AJAX 初识

　　ajax全称为 asynchronous javasript and xml，是在浏览器端进行网络编程（发送请求，接收响应）的技术方案。ajax 也就是浏览器提供的一套api，可以供 javascript 调用，从而通过代码来控制请求和响应，实现网络编程。

ajax 使用基本模板

使用 ajax 的过程相当于访问一个页面

　　　　　// 1.创建一个 xmlhttprequest 的对象（相当于打开了一个浏览器）
　　　　  // 兼容方案
　　　　　var xhr = window.xmlhttprequest ? new xmlhttprequest() : new activexobject("microsoft.xmlhttp");
        // 2，输入网址（get或post 根据需求设置，一般参数通过url传递则使用 get, 关于账户密码等敏感信息使用 post）
        xhr.open('get', 'time.php');
        // 3.敲回车，开始请求
        // 因为响应需要时间，所以无法通过返回值的方式返回响应
        // var response = xhr.send();
        // console.log(response);
        xhr.send();
        // 3.等待响应
        xhr.addeventlistener('readystatechange', function () {
            if (this.readystate === 4) {
                // 获取响应体
                console.log(this.responsetext);
            }
        });

详解等待状态（readystate）

readystate	状态描述	含义
0	unsent	初始化，请求了一个代理对对象，
1	opened	open()方法已经调用，建立一个与服务端特定端口的连接
2	header_receive	已经接收到了响应头，但是还没有接收响应体
3	loading	正在下载响应体
4	done	响应体下载完成，可以直接使用 responsetext

遵循http

var xhr = new xmlhttprequest();

        // 设置请求行
        xhr.open('get', 'time.php');

        // 设置请求头
        xhr.setrequestheader('accept', 'text/plain');

        // 设置请求体
        xhr.send(null);

        xhr.addeventlistener('readystatechange', function () {
            if (this.readystate === 4 && this.status === 200) {

                // 获取响应状态码
                console.log(this.status);

                // 获取响应状描述
                console.log(this.statustext);

                // 获取响应头信息
                console.log(this.getresponseheader('content-type'));    // 指定响应头
                console.log(this.getallresponseheaders()); // 全部响应头


                // 转换成数组
                console.log(this.getallresponseheaders().split("\n"));

                // 获取响应头中的某一个信息
                console.log(this.getresponseheader('server'));

            }
        });

同步与异步

同步：在同一时刻只能做同一件事，在执行一些耗时的事情时不去做其他事情，而是等待

异步：在执行一些耗时的事情是去做其他事情，而不是等待（性能更好，默认为 true）

同步：

                console.time('ajax同步');
        const xhrsync = new xmlhttprequest();
        xhrsync.open('get', 'time.php', false);
        xhrsync.send();            // 同步代码会卡在 send() 这里 
        console.log(xhrsync.responsetext);
        console.timeend('ajax同步');    

异步：

// 异步性能更好，时间更短
        console.time('ajax异步');
        const xhr = new xmlhttprequest();
　　　　　// 这里 第三个参数默认为 true,即不写true时为异步(大多数使用)
        xhr.open('get', 'time.php', true);
        xhr.send();
        console.log(xhr.responsetext);
        console.timeend('ajax异步');