参考文章：zhuanlan.zhihu.com/p/33809782 ; developer.mozilla.org/zh-CN/docs/…

Ajax初步介绍

AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）

你可以使用AJAX最主要的两个特性做下列事：

• 在不重新加载页面的情况下发送请求给服务器。
• 接受并使用从服务器发来的数据。

当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。 服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器。【无刷新就能够获取服务器端的数据】

XMLHttpRequest

方法

open()：该方法创建http请求

• 第一个参数是指定提交方式(post、get)
• 第二个参数是指定要提交的地址是哪
• 第三个参数是指定是异步还是同步(true表示异步，false表示同步)
• 第四和第五参数在http认证的时候会用到。是可选的

setRequestHeader(String header,String value)：设置消息头（使用post方式才会使用到，get方法并不需要调用该方法）

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
复制代码

send(content)：发送请求给服务器

• 如果是get方式，并不需要填写参数，或填写null
• 如果是post方式，把要提交的参数写上去

属性

onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数

readyState：请求状态readyState一改变，回调函数被调用，它有5个状态

• 0：未初始化
• 1：open方法成功调用以后
• 2：服务器已经应答客户端的请求
• 3：交互中。Http头信息已经接收，响应数据尚未接收。
• 4：完成。数据接收完成

responseText：服务器返回的文本内容

responseXML：服务器返回的兼容DOM的XML内容

status：服务器返回的状态码

statusText：服务器返回状态码的文本信息

第一个Ajax程序

<input id="ajaxButton" type="button" value="Make a request" onclick="makeRequest()"></input>
<script>
    let httpRequest;
    function makeRequest() {
        // 创建XMLHttpRequest对象
        httpRequest = new XMLHttpRequest();
        // 请求状态改变的事件触发器，设置为弹窗文本
        httpRequest.onreadystatechange = alertContents;
        // 创建GET请求，路径是'index.html'，异步
        httpRequest.open('GET', 'index.html', true);
        // 发送请求
        httpRequest.send();
    }

    function alertContents() {
        // 完成，XMLHttpRequest.DONE
        if (httpRequest.readyState === 4) {
            // 状态码是200则表示成功
            if (httpRequest.status === 200) {
                alert(httpRequest.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }
    }
</script>
复制代码

Ajax完成了请求和响应的一系列操作

绕过缓存

var req = new XMLHttpRequest();
req.open('GET', url, false);
req.channel.loadFlags |= Components.interfaces.nsIRequest.LOAD_BYPASS_CACHE;
req.send(null);
复制代码