Ajax实现的步骤

天将降大任于斯人也，必先劳其筋骨，苦其心志，饿其体肤，空乏其身，行拂乱其所为 ————《孟子》

Ajax 实现的步骤

实现 Ajax 异步交互需要服务器端逻辑进行配合，而作为客户端的 HTML 页面需要以下步骤：

1. 创建 Ajax 的核心对象XML HttpRequest对象
2. 通过XML HttpRequest对象的open()方法与服务器端建立联系
3. 构建请求所需的数据内容，并通过XML HttpRequest对象的send()方法发送给服务气短
4. 通过XML HttpRequest对象对象提供的onreadystatechange事件监听器端的通信状态
5. 接收并处理服务器端向客户端响应的数据结果
6. 将处理结果更新到 HTML

<script>
  var btn = document.getElementById("btn");

  btn.addEventListener("click", function () {
    //实现Ajax的异步交互

    //1.创建XMLHttpRequest对象
    var xhr = createXMLHttpRequest();

    /*
                2.调用XMLHttpRequest对象的open()方法
                    作用 - 与服务器端建议连接
                open(method,url)方法
                  method - 表示当前的请求方式
                    常见的请求方式为GET和POST
                  url - 表示当前请求的服务器端地址链接
            */
    xhr.open("get", "服务器端地址链接");

    /*
                 3.调用XMLHttpRequest对象的send()方法
                     作用 - 将客户端页面的数据发送给服务器端
                   send()方法
                     如果不传递任何数据内容时 - 向该方法传递null
            */
    xhr.send(null);
    /*
                 4.利用XMLHttpRequest对象的onreadystatechange事件
                     作用 - 用于监听服务器端的通信状态
                     服务器端的通信状态中 - 存在着处理完毕（信号）
                       接收服务器端返回的处理结果
            */
    xhr.onreadystatechange = function () {
      //监听服务器端的通信状态
      /*
                  XMLHttpRequest对象的readyState属性
                    作用 - 表示服务器端的通信状态
                    值
                      0 - 未初始化
                      1 - open()方法被调用
                      2 - send()方法被调用
                      3 - 正在响应
                      4 - 响应已完毕
                */
      if (xhr.readyState === 4) {
        /*
                       接收服务器端返回的处理结果
                       XMLHttpRequest对象的responseText属性
                         作用 - 用于接收服务器端的响应结果
                    */
        console.log(xhr.responseText);
      }
    };
    /*
              5.将接收的结果更新到HTML页面
            */
  });
</script>