Ajax

简介

Ajax (Asynchronous JavaScript and XML) 主要用来加载数据，避免刷新整个页面。
XMLHttpRequest 是 Ajax 的基础。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject ）。

创建 XMLHttpRequest 对象

myAjax = new XMLHttpRequest();

发送请求

XMLHttpRequest 对象进行 HTTP 请求前必须通过 open 初始化， open 接受五个参数，分别为请求方法、请求链接、异步标识、账号和密码用以服务端验证

myAjax.open(Method, URL, Asynchronous, UserName, Password);

• method ：请求的类型；GET 或 POST。
• url ：文件在服务器上的位置。
• async ：true（异步）或 false（同步）。

在成功初始化请求之后， XMLHttpRequest 对象的 setRequestHeader 方法可以用来设置请求头：

myAjax.setRequestHeader(key, value);

调用 open 方法后，就可以通过调用 send 方法按照 open 方法设定的参数将请求进行发送

myAjax.send(data);

当 open 方法设定发送的方式为异步请求时， onreadystatechange 事件监听器将自动在 XMLHttpRequest 对象的 readyState 属性改变时被触发

switch (readyState) {
    case 1:
        break; //当 open 方法被成功调用，readyState 为 1
    case 2:
        break; //当 send 方法被调用，readyState 属性被置为 2
    case 3:
        break; //HTTP 响应内容开始加载，readyState 属性被置为 3
    case 4:
        break; //HTTP 响应内容结束加载，readyState 属性被置为 4
}

如果 XMLHttpRequest 对象的 readyState 属性还没有变成 4， abort 可以终止请求。这个方法可以确保异步请求中的回调不被执行。

myAjax.abort();

示例

function ajax(url, method = "GET", data = null, async = true) {
    // 声明 XMLHttpRequest 
    // 在 IE5 和 IE6 中需要使用 ActiveXObject
    const XHR = XMLHttpRequest;
    // 创建 XMLHttqRequest
    XHR = new XMLHttpRequest()
    // 设置请求状态改变时执行的函数
    XHR.onreadystatechange = function() {
        if (XHR.readyState === 4) console.log( `响应状态：${XHR.status}` , "FINISH") //XHR.responseText 为响应体
    }
    // 初始化请求参数
    XHR.open(method, url, async)
    // 发起请求
    XHR.send(data)
}

ajax("https://www.baidu.com");
ajax("https://www.baidu.com", "POST", "s=str");

服务器响应

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性获取响应数据。

• responseText ：获得字符串形式的响应数据。
• responseXML ：获得 XML 形式的响应数据。

当服务端的响应不是 XML 时，使用 responseText 属性。

document.getElementById("id").inndeHTML = myAjax.responseText;