原生AJAX

• 前提：存在DOM元素
• 获取DOM元素：

  document.getElementById('DOM ID')
  document.getElementsByTagName('DOM Tag')[0]
  document.getElementsByClassName('DOM Class')

Get操作

• 绑定事件

  dom.onclick = function() {}

• 在DOM点击事件内部创建AJAX对象

  const xhr = new XMLHttpRequest();

• 在DOM点击事件内部初始化AJAX对象，并设置请求方法和url

  xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

• 在DOM点击事件内部发送信息

  xhr.send();

• 在DOM点击事件内部，给AJAX对象绑定事件，处理服务端返回的结果

  xhr.onreadystatechange = function() {}

• 以下为AJAX对象绑定事件内可用的方法
  • xhr.readystate：是 xhr 对象中的属性, 表示状态 0 1 2 3 4
    • 0：表示未初始化
    • 1：表示open方法调用完毕
    • 2：表示send方法调用完毕
    • 3：表示服务端返回部分的结果
    • 4：表示服务端返回所有的结果
  • xhr.status：判断响应状态码，200 成功
  • xhr.getAllResponseHeaders()：所有响应头
  • xhr.statusText：状态字符串
  • xhr.response：响应体

POST操作

• 绑定事件：

  dom.addEventListener("mouseover",function(){})

• 在DOM点击事件内部创建AJAX对象

  const xhr = new XMLHttpRequest();

• 在DOM点击事件内部初始化AJAX对象，并设置请求方法和url

  xhr.open('POST', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

• 在DOM点击事件内部给AJAX对象设置请求头

  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

• 在DOM点击事件内部发送信息

  xhr.send('一些参数，用&分隔');

• 在DOM点击事件内部，给AJAX对象绑定事件，处理服务端返回的结果

  xhr.onreadystatechange = function(){}

JSON响应

• 绑定键盘按下事件

  window.onkeydown = function(){}

• 在键盘按下事件内部创建AJAX对象

  const xhr = new XMLHttpRequest();

• 在键盘按下事件内部给AJAX对象设置响应体数据的类型

  xhr.responseType = 'json';

• 在键盘按下事件内部初始化AJAX对象，并设置请求方法和url

  xhr.open('GET','http://127.0.0.1:8000/json-server');

• 在DOM点击事件内部发送信息

  xhr.send();

• 在DOM点击事件内部，给AJAX对象绑定事件，处理服务端返回的结果

  xhr.onreadystatechange = function() {}

  • 手动对数据转化：

    const data = JSON.parse(xhr.response);
    dom.innerHTML = data.name;

  • 自动转换

    result.innerHTML = xhr.response.name;

处理IE缓存问题

• Date.now()：获取当前的时间戳
• 解决IE缓存：在GET请求路径上添加

  ''?t=' + Date.now()

请求超时与网络异常

• 给AJAX对象配置超时设置 2s 设置

  xhr.timeout = 2000;

• 给AJAX对象配置超时回调

  xhr.ontimeout = function(){}

• 给AJAX对象配置网络异常回调

  xhr.onerror = function(){}

取消请求

• 定义一个值为null的变量cancel
• 在取消的dom事件回调中设置 cancel.abort()

重复请求问题

• 结合取消请求
• 定义一个标识变量用来判断是否正在发送AJAX请求

  let isSending = false;

• 在DOM事件回调中，先判断标识变量是否正在发送，
  • 是就取消请求
  • 否则就按流程执行，并设置标识变量为true，然后在 xhr.readystate为4时设置为false