关于ajax

关于ajax

AJAX 的全称是 Asynchronous JavaScript and XML（译为：异步的 JavaScript 和 XML）。其 的意思就是“⽤ JavaScript 执⾏异步⽹络请求”。它不是⼀项新技术，⽽是很多原有的成熟技术的结合体。
Ajax 技术包括： XHTML 和 CSS 技术、DOM 技术、XML 和 XSTL 技术、XMLHttpRequest 对象及JavaScript 技术等。（其中：XHTML 和 CSS 是基于 Web 标准化的呈现,DOM 实现了动态的显示和交互， XML 和 XSTL实现数据交换与处理,，XMLHttpRequest 对象⽤于异步数据查询和检索, 最后采⽤ JavaScript 绑定和处理所有数据。）
A JAX 包括以下⼏步骤：

1. 创建 XMLHttpRequest 对象。
2. 打开连接。
3. 发送 HTTP 请求。
4. 处理服务器返回的消息，实现局部刷新。
   （但是ajax的创建 XMLHttpRequest 对象、打开连接、发送 HTTP 请求、处理服务器返回的消息，实现局部刷新。这些一般情况下代码都是固定的，所以推荐一套比较完整且简单实用的工具包供大家使用）
   实例：

function ajax({ url, success, data = {}, type = "get", async = true }) {
  let xhr;
  //1、:创建 XMLHttpRequest 对象。
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  //2、3、：打开连接。发送 HTTP 请求。（根据类型是 get 或者 post 来决定数据 data 不同的发送⽅式）
  if ((type = type.toLowerCase()) == 'get') {
    xhr.open('get', url + '?' + jsonToString(data), true);
    xhr.send();
  } else if (type == 'post') {
    xhr.open('post', url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-formurlencoded");//⼀般数据都以该⽅式传输
    xhr.send(jsonToString(data));
  }
  //4、：处理服务器返回的消息，实现局部刷新。
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
        success(xhr.responseText);
      }
      else {
        // error && error();
      }
    };
  };
  //⽤来将数据由json对象转换成符合url查询部分格式的字符串，⽅便数据的传输
}

可以把它存入一个工具包，使用时可以直接导入然后通过传参的方式进行ajax请求，success用于接收返回的数据，在里面可以书写对返回数据的处理。