AJAX 的版本与特性

XMLHttpRequest Level 1

XMLHttpRequest Level 1 版本存在以下局限性:

1. 无法发送跨域请求
2. 不能传输非纯文本数据
3. 无法获取传输进度

XMLHttpRequest Level 2

XMLHttpRequest Level 2 版本相比 Level 1 有了很大的改进,主要特性包括:

1. 可以发送跨域请求
2. 支持传输二进制数据(非文本数据)
3. 支持上传文件
4. 可以传输FormData对象
5. 可以获取传输进度
6. 可以设置请求超时时间

兼容性问题

虽然 XMLHttpRequest Level 2 带来了很多新特性,但并非所有浏览器都完全支持,主要兼容性问题包括:

1. IE 8/9 和 Opera Mini 不支持 XMLHttpRequest Level 2 对象
2. IE 10/11 不支持响应类型为 JSON
3. 部分浏览器不支持请求超时设置
4. 部分浏览器不支持Blob(文件二进制流)

HTTP 状态码与提示信息

通过xhr.status可以获取服务器返回的 HTTP 状态码,xhr.statusText可以获取服务器发送的状态提示信息。常见的状态码和提示信息如下:

• 200 OK 访问正常
• 301 Moved Permanently 永久重定向
• 302 Move Temporarily 临时重定向
• 304 Not Modified 未修改,也属于正常访问
• 307 Temporary Redirect 临时重定向
• 401 Unauthorized 未授权
• 403 Forbidden 禁止访问
• 404 Not Found 未找到指定资源
• 500 Internal Server Error 服务器内部错误

AJAX 的事件

AJAX 请求过程中会触发一系列事件,可以通过监听这些事件来执行相应的逻辑:

1. xhr.onloadstart 绑定 HTTP 请求发出时的监听函数
2. xhr.onload 绑定请求成功完成时的监听函数
3. xhr.onerror 绑定请求失败时的监听函数
4. xhr.onabort 绑定请求被中止(调用abort()方法)时的监听函数
5. xhr.onloadend 绑定请求完成(不管成功还是失败)时的监听函数

这些事件的执行顺序如下: loadstart -> readyState===4 -> load/error/abort -> loadend

请求超时处理

通过设置xhr.timeout属性可以指定请求超时时间,单位为毫秒。如果在指定时间内没有收到响应,就会自动终止请求。将该属性设为 0 表示没有时间限制。

可以通过xhr.ontimeout绑定一个超时监听函数,当请求超时时就会执行该函数。

下面是一个请求超时处理的示例

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功,清除定时器
    clearTimeout(timer);
    timer = null;
  }
};

// 设置3秒超时
var timer = setTimeout(function () {
  xhr.abort(); // 中止请求
  clearTimeout(timer);
  timer = null;
  xhr = null;
}, 3000);

响应数据类型

通过设置xhr.responseType属性,可以指定服务器返回数据的类型,例如"text"、"json"、"blob"等。不同的类型可以通过不同的xhr.response*属性来获取响应内容,具体可以参考XMLHttpRequest.responseType - Web API 接口参考 | MDN。

原生 AJAX 的使用场景

1. 在移动端开发中,为了控制代码体积,通常会直接使用原生 AJAX 而不是引入第三方库。现代浏览器对 AJAX 的支持已经比较完善了。

2. 大多数情况下 AJAX 请求都不会特别复杂,自己封装一个简单的 AJAX 工具函数就可以应对绝大部分场景了。

3. 一些对性能要求比较高的场景,例如游戏开发,也会选择使用原生 AJAX 以获得更好的性能。