Ajax 1 Ajax中的属性和方法一、XMLHttpRequest 实例属性 (Properties) 这些属性提供了

一、XMLHttpRequest 实例属性 (Properties)

这些属性提供了关于请求状态和响应数据的信息。

readyState (只读)
- 描述: 返回一个 unsigned short (无符号短整型)，表示请求的当前状态。
- 值:
  - 0 (UNSENT): 对象已创建，但尚未调用 open() 方法。
  - 1 (OPENED): open() 方法已被调用。已经建立了连接，但请求头还未发送。
  - 2 (HEADERS_RECEIVED): send() 方法已被调用，并且头部和状态已经可以获取。
  - 3 (LOADING): 下载中；responseText 属性已经包含部分数据。响应体正在接收中。
  - 4 (DONE): 操作完成。整个响应数据已经接收完毕，或者请求失败。
- 用途: 主要在 onreadystatechange 事件处理程序中使用，用于判断请求进行到了哪个阶段，特别是判断是否已完成 (readyState === 4)。
- 示例: if (xhr.readyState === 4) { /* 请求完成 */ }
status (只读)
- 描述: 返回一个 unsigned short (无符号短整型)，表示响应的 HTTP 状态码 (如 200, 404, 500 等)。
- 可用时机: 只有当 readyState 为 2 (HEADERS_RECEIVED) 或更高时才有效。通常在 readyState 为 3 或 4 时检查。
- 用途: 判断请求是否在 HTTP 层面成功。通常检查 status 是否在 200-299 范围内表示成功。
- 示例: if (xhr.readyState === 4 && xhr.status === 200) { /* 请求成功 */ }
statusText (只读)
- 描述: 返回一个 DOMString，包含了对应 status 状态码的文本描述 (如 "OK", "Not Found", "Internal Server Error")。
- 可用时机: 同 status。
- 用途: 提供更易读的状态信息，常用于日志或错误消息。
- 示例: console.error("请求失败:", xhr.status, xhr.statusText);
responseText (只读)
- 描述: 返回一个 DOMString，包含了作为文本的响应体。
- 可用时机:
  - 当 readyState 为 3 (LOADING) 时，它包含已接收的部分响应文本。
  - 当 readyState 为 4 (DONE) 时，它包含完整的响应文本。
- 限制: 如果 responseType 被设置为 "json", "blob", "arraybuffer" 或 "document"，访问 responseText 会抛出 InvalidStateError 异常。此时应使用 response 属性。
- 用途: 获取纯文本或需要手动解析（如 JSON）的响应数据。
- 示例: const data = JSON.parse(xhr.responseText);
responseXML (只读)
- 描述: 如果响应的 Content-Type 是 text/xml 或 application/xml，并且响应内容是有效的 XML，则返回一个 Document 对象。否则返回 null。
- 可用时机: readyState 为 4 (DONE)。
- 限制: 受 responseType 影响。如果 responseType 设置为非空或非 "document" 的值，访问 responseXML 会抛出 InvalidStateError。
- 用途: 直接处理 XML 格式的响应。
- 示例: const xmlDoc = xhr.responseXML; if (xmlDoc) { /* 处理 XML 文档 */ }
response (只读)
- 描述: 返回响应体，其类型由 responseType 属性决定。
- 可用时机: readyState 为 3 或 4。
- 类型:
  - "" (默认) 或 "text": DOMString (同 responseText)。
  - "json": JavaScript 对象 (通过自动解析 JSON 得到)。
  - "blob": Blob 对象 (用于二进制数据，如图片)。
  - "arraybuffer": ArrayBuffer (用于通用的、固定长度的原始二进制数据)。
  - "document": Document 对象 (同 responseXML)。
- 用途: 获取特定格式的响应数据，特别是 JSON、Blob、ArrayBuffer，避免手动解析或转换。
- 示例: xhr.responseType = 'json'; ... xhr.onload = function() { if (xhr.status === 200) { const data = xhr.response; /* data 是 JS 对象 */ } };
responseURL (只读)
- 描述: 返回一个 DOMString，表示响应的序列化 URL。如果 URL 在请求过程中发生了重定向，则返回最终的 URL。如果 URL 为 null 或为空字符串，则返回请求的 URL。
- 可用时机: readyState 为 2 或更高。
- 用途: 确认最终响应来自哪个 URL。
responseType
- 描述: 一个可设置的枚举字符串值，指定 response 属性返回的数据类型。
- 可设置时机: 必须在调用 send() 之前，且在 open() 之后设置。
- 值: "" (默认, 等同 text), "text", "json", "blob", "arraybuffer", "document"。
- 用途: 告知 XHR 对象如何处理响应数据，简化数据获取。
- 示例: xhr.responseType = 'json';
timeout
- 描述: 一个可设置的 unsigned long (无符号长整型)，表示请求超时的毫秒数。默认值 0 表示没有超时。
- 可设置时机: 可以在 open() 之后、send() 之前设置。
- 用途: 防止请求无限期挂起，改善用户体验。如果超时发生，请求会被中止，并触发 timeout 事件。
- 示例: xhr.timeout = 10000; // 设置 10 秒超时
upload (只读)
- 描述: 返回一个 XMLHttpRequestUpload 对象，该对象可以用来添加事件监听器以跟踪上传过程。
- 用途: 监控文件或其他数据的上传进度、完成、错误等。XMLHttpRequestUpload 对象本身也有一系列事件 (见下文事件部分)。
- 示例: xhr.upload.onprogress = function(event) { /* 更新上传进度条 */ };
withCredentials
- 描述: 一个可设置的布尔值。如果设为 true，跨域请求 (CORS) 会携带凭据 (如 Cookies、HTTP 认证信息)。默认 false。
- 可设置时机: 必须在调用 open() 之前设置。
- 用途: 在跨域场景下进行需要身份验证的请求。服务器端也需要正确配置 CORS 头部 (Access-Control-Allow-Credentials: true)。
- 示例: xhr.withCredentials = true; xhr.open('GET', 'api.example.com/user', true);

二、XMLHttpRequest 实例方法 (Methods)

这些方法用于配置和发送请求，以及获取响应信息。

open(method, url[, async[, user[, password]]])
- 描述: 初始化一个请求。
- 参数:
  - method: 请求方法 (如 "GET", "POST", "PUT", "DELETE" 等，大小写不敏感，但通常大写)。
  - url: 请求的 URL。
  - async (可选): 布尔值，true (默认) 表示异步执行，false 表示同步执行。强烈推荐始终使用异步 (true) ，同步请求会阻塞浏览器主线程，导致界面卡死。
  - user (可选): 用户名，用于 HTTP 基本认证 (不常用)。
  - password (可选): 密码，用于 HTTP 基本认证 (不常用)。
- 调用时机: 创建 XHR 对象后的第一步。
- 示例: xhr.open('GET', '/api/data?id=1', true);
send([body])
- 描述: 发送请求到服务器。
- 参数:
  - body (可选): 请求体数据。
    - 对于 GET 或 HEAD 请求，通常省略或传 null。
    - 对于 POST 或 PUT 请求，可以传入 DOMString, Document, Blob, BufferSource (如 ArrayBuffer, TypedArray), FormData, URLSearchParams 等类型的数据。
- 调用时机: 在 open() 之后，并且所有需要的请求头 (setRequestHeader) 和事件监听器已设置好之后。
- 行为: 如果 open() 的 async 参数为 true，send() 方法会立即返回，请求在后台发送。
- 示例:
  - GET: xhr.send(); 或 xhr.send(null);
  - POST JSON: xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify({key: 'value'}));
  - POST FormData: const formData = new FormData(); formData.append('user', 'john'); xhr.send(formData); (浏览器会自动设置 Content-Type)
setRequestHeader(header, value)
- 描述: 设置一个 HTTP 请求头部。如果该头部已存在，则将新值附加到现有值的末尾，以逗号分隔（某些头部除外，如 Content-Type 会被覆盖）。
- 调用时机: 必须在 open() 之后，send() 之前调用。
- 参数:
  - header: 头部名称 (大小写不敏感)。
  - value: 头部的值 (DOMString)。
- 用途: 发送自定义头部，如 Content-Type, Authorization, Accept 等。
- 注意: 不能设置某些被浏览器/规范禁止的头部 (如 Host, Referer, Cookie 等，它们由浏览器自动管理)。
- 示例: xhr.setRequestHeader('Authorization', 'Bearer your_token');
getResponseHeader(header) (只读方法)
- 描述: 返回指定响应头部的字符串值。如果响应尚未收到或头部不存在，则返回 null。
- 调用时机: readyState 为 3 或 4。
- 参数: header: 响应头部的名称 (大小写不敏感)。
- 用途: 获取服务器返回的特定头部信息，如 Content-Type, ETag, Last-Modified 等。
- 示例: const contentType = xhr.getResponseHeader('Content-Type');
getAllResponseHeaders() (只读方法)
- 描述: 返回一个包含所有响应头部的字符串，每个头部之间由 CRLF (\r\n) 分隔。如果响应尚未收到，则返回 null 或空字符串。
- 调用时机: readyState 为 3 或 4。
- 用途: 获取服务器返回的所有头部信息，通常用于调试。
- 示例: const allHeaders = xhr.getAllResponseHeaders(); console.log(allHeaders);
abort()
- 描述: 中止当前请求。
- 行为:
  - 如果请求已发送，则立即停止网络传输。
  - readyState 变为 0 (UNSENT) 或 4 (DONE)，取决于浏览器实现和中止时机。
  - 触发 abort 事件。
  - status 变为 0。
- 用途: 用户取消操作，或在超时、错误等情况下主动停止请求。
- 示例: cancelButton.onclick = () => { xhr.abort(); };
overrideMimeType(mimeType)
- 描述: 强制覆盖服务器发送的 MIME 类型，让浏览器按照指定的类型来解析响应体。
- 调用时机: 必须在 send() 之前调用。
- 用途: 罕见情况，当服务器发送的 Content-Type 不正确时，强制按特定类型（如 text/plain, application/json 等）处理。现在 responseType 更常用。
- 示例: xhr.overrideMimeType('application/json');

三、XMLHttpRequest 实例事件 (Events)

这些事件允许你在请求生命周期的不同阶段执行代码。你可以通过 on 属性或 addEventListener(eventName, handler) 来监听这些事件。

onreadystatechange

触发时机: 每当 readyState 属性发生变化时触发。
用途: 最传统的事件处理方式，需要在处理函数内部检查 readyState 和 status 来确定具体状态。

示例:

    xhr.onreadystatechange = function() {
    console.log("ReadyState changed to:", xhr.readyState);
    if (xhr.readyState === 4) { // 请求完成
        if (xhr.status === 200) { // 且成功
            console.log("Success:", xhr.responseText);
        } else {
            console.error("Error:", xhr.status);
        }
    }
};

onload

触发时机: 当请求成功完成时触发 (readyState 为 4，且 status 在 200-299 范围内)。
用途: 处理成功响应的推荐方式，比 onreadystatechange 更简洁，无需检查 readyState。

示例:

    xhr.onload = function() {
    // 此时 xhr.status 肯定是 2xx
    console.log("Request successful!");
    // 可以安全地处理 xhr.response 或 xhr.responseText
    const data = xhr.response; // 如果 responseType 设置了
};

onerror
- 触发时机: 当请求发生网络层面的错误时触发 (例如，DNS 解析失败、连接被拒绝、CORS 策略阻止等)。注意：它不会因为 HTTP 错误状态码 (如 404, 500) 而触发，那些需要在 onload 或 onreadystatechange 中通过检查 status 来处理。
- 用途: 处理无法到达服务器或被网络策略阻止的情况。
- 示例:
```
    xhr.onerror = function() {
    console.error("Network error occurred!");
    // 可能需要向用户显示通用网络错误信息
};
    
```

onprogress

触发时机: 在下载（接收响应体）过程中周期性触发。
事件对象 (ProgressEvent): 包含 loaded (已加载的字节数) 和 lengthComputable (布尔值，指示 total 是否可知)、total (响应总字节数，如果 lengthComputable 为 true) 属性。
用途: 实现下载进度条。需要服务器在响应头中提供 Content-Length 才能计算准确的百分比。

示例:

    xhr.onprogress = function(event) {
    if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        console.log(`Download progress: ${percentComplete.toFixed(2)}%`);
        // 更新进度条 UI
    } else {
        console.log(`Downloaded ${event.loaded} bytes`); // 总大小未知
    }
};

ontimeout
- 触发时机: 当请求因为超过设置的 timeout 值而被中止时触发。
- 用途: 处理请求超时的情况，告知用户重试或检查网络。
- 示例:
```
xhr.timeout = 5000; // 5 秒超时
xhr.ontimeout = function() {
    console.error("Request timed out!");
    // 提示用户超时
};
    
```
onabort
- 触发时机: 当请求被 abort() 方法中止时触发。
- 用途: 处理用户取消请求或其他程序化中止请求的操作。
- 示例:
```
    xhr.onabort = function() {
    console.log("Request aborted by user or script.");
};
    
```
onloadstart
- 触发时机: 当请求开始加载数据时（即 send() 被调用后不久）触发。
- 用途: 在请求开始时执行某些操作，如显示加载指示器。
- 示例: xhr.onloadstart = function() { showLoadingIndicator(); };
onloadend
- 触发时机: 当请求结束时触发，无论成功 (onload)、失败 (onerror)、中止 (onabort) 还是超时 (ontimeout)。它总是在这些特定事件之后触发。
- 用途: 执行请求完成后的清理工作，如隐藏加载指示器，无论请求结果如何。
- 示例: xhr.onloadend = function() { hideLoadingIndicator(); };

关于 xhr.upload 的事件

xhr.upload 对象主要用于监控上传过程，它也有类似的事件：

xhr.upload.onloadstart
xhr.upload.onprogress (极其常用，用于上传进度条)
xhr.upload.onload (上传成功完成)
xhr.upload.onerror (上传过程中发生错误)
xhr.upload.onabort (上传被中止)
xhr.upload.ontimeout (上传超时)
xhr.upload.onloadend (上传结束，无论结果如何)

xhr.upload.onprogress 示例:

    xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        console.log(`Upload progress: ${percentComplete.toFixed(2)}%`);
        // 更新上传进度条 UI
    }
};