初识Ajax

一、什么是Ajax

        Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页。

二、Ajax的工作原理

        客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上。

        发送请求：即 new XMLHttpRequest  > 调用open（） >  监听状态码 > send()

        接受响应：接受返回的response  如responseText、responseURL等

三、实现Ajax的基本步骤                

1. 创建XMLHttpRequest对象,即创建一个异步调用对象.
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
3. 设置响应HTTP请求状态变化的函数.
4. 发送HTTP请求.
5. 获取异步调用返回的数据.
6. 使用JavaScript和DOM实现局部刷新.

四、实例

以下为简要版的Ajax实例 

/* 获取要操作的dom */
const p = document.querySelector('p')
/* 1.创建XMLHttpRequest对象，即创建一个异步调用对象 */
let xhr = new XMLHttpRequest()
/* 创建一个新的http请求，并指定该http请求的方法，url及是否异步 */
xhr.open('get', 'test.txt', true)
/* 设置响应HTTP请求状态改变的函数 readystatechange */
xhr.onreadystatechange = () => {
    /* 判断readyState属性值是否为4
        0 表示未调用open方法
        1 表示调用了open方法 未调用send方法
        2 表示发送请求 还没收到响应
        3 表示只受到部分响应
        4 表示响应都接受完 可以将响应内容显示出来 */
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            p.innerHTML = xhr.responseText
        }
    }
} 
/* 发送HTTP请求   send（data）
    其中data是个可选参数，如果请求的数据不需要参数，即可以使用null来替代。
    如果需要参数，则示例为：name=myName&value=myValue
*/
xhr.send(null)

以下为将Ajax用promise封装的简版

const button = document.querySelector('a')
const imgage = document.querySelector('img')
function ajaxPromise () {
    let promise = new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest()
        xhr.open('get', 'xxx.jpg', true)
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                    resolve(xhr.responseURL)
                }else{
                    reject( new Error(xhr.statusText));
                }
            }
        }
        xhr.send(null)
    })
    return promise
}

button.addEventListener('click',() => {
    ajaxPromise()
        .then( responseURL => {
            Image.src = responseURL
        })
        .catch( statusText => {
            console.log(statusText)
        })
})

部分内容引自：

《Ajax的五个请求步骤》Ajax请求的五个步骤_谁是听故事的人的博客-CSDN博客_ajax请求的五个步骤