表单动态验证之原生Ajax

什么是 AJAX?

AJAX代表异步JavaScript和XML。
简而言之，它是使用 XMLHttpRequest 对象与服务器端脚本进行通信。它可以发送以及接收各种格式的信息，包括JSON，XML，HTML，甚至文本文件。它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这让您可以根据用户事件对页面进行异步更新。

---

从上面这段介绍中，可以提取出实现ajax技术的几个关键：

• XMLHttpRequest对象 -> 向服务器发出HTTP请求 -> 如何发出?
• JSON/XML/HTML/文本/… -> 发送/接收各种格式的数据 -> 如何发送?接收后怎么处理?

根据上面的几个要点有以下思路：

• 创建XMLHttpRequest对象

  const xhr = new XMLHttpRequest();

• 声明如何处理服务器响应

  • 添加事件监听

    xhr.addEventListener('readystatechange', function)

    每当XMLHttpRequest的readyState属性改变时，就会触发onreadystatechange事件，调用相应事件响应函数来进行处理，下面是该function的主要内容

    • 事件响应函数

          //检查请求的状态 [状态的值为XMLHttpRequest.DONE（计算为4）表明已收到完整的服务器响应，可以继续处理]
          if(xhr.readyState === XMLHttpRequest.DONE) {
                  //检查HTTP服务器响应的响应代码 [检查200 OK响应代码来区分成功或失败的AJAX调用]
                  if(xhr.status === 200) {
                      //对服务器发送的数据进行处理
                  } else {
      
                  }
          } 

    • 如何处理数据

      访问数据有以下两种方式：

      xhr.responseText —— 以文本字符串形式返回服务器响应
      xhr.responseXML —— 将响应作为XMLDocument对象返回

      第二种方式可以使用JavaScript的DOM函数进行遍历，这里主要看第一种方式，对于传送过来的JSON格式的字符串，要进行反序列化，将其转换成javascript对象，这样就可以方便对字符串进行处理