原生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