526互联

AJAX002——XMLHttpRequest对象（AJAX的核心对象）

发布时间 2023-10-03 07:11:04作者: 猪无名

XMLHttpRequest对象

  • XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。

  • XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象。直接用即可。

  • 创建XMLHttpRequest对象

    • var xhr = new XMLHttpRequest();

  • XMLHttpRequest对象的方法

方法 描述
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method, url, async, user, psw) 规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码
send() 将请求发送到服务器，用于 GET 请求
send(string) 将请求发送到服务器，用于 POST 请求
setRequestHeader() 向要发送的报头添加标签/值对
  • XMLHttpRequest对象的属性
属性 描述
onreadystatechange 定义当 readyState 属性发生变化时被调用的函数
readyState 保存 XMLHttpRequest 的状态。0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText 以字符串返回响应数据
responseXML 以 XML 数据返回响应数据
status 返回请求的状态号200: "OK"403: "Forbidden"404: “Not Found”
statusText 返回状态文本（比如 “OK” 或 “Not Found”）

readyState
  • readyState 为 0 时，表示请求未初始化。此时 XMLHttpRequest 对象已经创建，但尚未调用 open 方法设置请求参数。
  • readyState 为 1 时，表示服务器连接已建立。此时已经调用了 open 方法，但还未调用 send 方法发送请求。
  • readyState 为 2 时，表示请求已收到。此时已经调用了 send 方法，并且服务器已经接收到了请求。
  • readyState 为 3 时，表示正在处理请求。此时服务器正在处理请求，并尚未返回响应。
  • readyState 为 4 时，表示请求已完成且响应已就绪。此时服务器已经返回了完整的响应数据，可以通过 status 属性来判断请求的结果是否成功。

status

常见的 HTTP 响应状态码以及它们的含义：

  • 1xx（信息类状态码）：表示请求已被接收，继续处理。

    • 100 Continue：服务器已收到请求的初始部分，客户端应该继续发送剩余的请求。

  • 2xx（成功类状态码）：表示请求已成功被服务器接收、理解和处理。

    • 200 OK：请求成功，正常返回结果。
    • 201 Created：请求成功并在服务器上创建了新的资源。
    • 204 No Content：请求成功，但响应报文不包含实体主体部分。

  • 3xx（重定向类状态码）：表示需要进一步操作以完成请求。

    • 301 Moved Permanently：请求的资源已被永久移动到新位置。
    • 302 Found：请求的资源已临时移动到新位置。
    • 304 Not Modified：客户端可以使用缓存的版本。

  • 4xx（客户端错误类状态码）：表示服务器无法处理客户端的请求。

    • 400 Bad Request：请求无效或无法被服务器理解。
    • 401 Unauthorized：请求需要用户验证。
    • 404 Not Found：请求的资源不存在。

  • 5xx（服务器错误类状态码）：表示服务器在处理请求时发生了错误。

    • 500 Internal Server Error：服务器遇到了意外的错误。
    • 503 Service Unavailable：服务器当前无法处理请求。

这只是一部分常见的 HTTP 响应状态码，还有其他许多状态码具有特定的含义。

在实际开发中，了解这些状态码可以帮助你更好地理解和处理与服务器通信的问题。

responseText

responseText 是 XMLHttpRequest 对象的一个属性，用于获取从服务器返回的响应数据，以字符串形式表示。

当我们发送一个异步请求（例如使用 XMLHttpRequest.send() 发送请求）后，服务器会返回响应数据。通过 responseText 属性，我们可以获取到这些响应数据的文本内容。这些文本内容可以是普通文本、HTML、JSON 等格式的数据。

示例用法如下：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api", true);
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var responseText = xhr.responseText;
    console.log(responseText);
    // 在这里可以对响应数据进行处理
  }
};

在以上示例中，当 readyState 的值为 4（响应数据已经完全接收）且 status 的值为 200（成功）时，通过 xhr.responseText 获取响应的文本内容，并将其输出到控制台。你可以根据需要对响应数据进行进一步的处理，比如解析 JSON 格式的数据、更新页面内容等等。

open()

open() 方法是 XMLHttpRequest 对象的一个方法，用于设置请求的相关参数。它接受五个参数：

  • method：指定请求的方法，通常是 "GET" 或者 "POST"。
  • url：指定请求的地址，可以是相对路径或绝对路径。
  • async：一个可选的布尔值参数，指定请求是否异步，默认为 true，即异步请求。
  • user：一个可选的字符串参数，用于指定用户名，用于需要用户身份验证的请求。
  • psw：一个可选的字符串参数，用于指定密码，与用户名一同用于用户身份验证。

示例：

javascriptCopy Codexhr.open("GET", "https://example.com/api/", true, "username", "password");

上述代码表示创建了一个使用 GET 方法的异步请求，请求地址为 "https://example.com/api/"，并且进行了基本的身份验证，用户名为 "username"，密码为 "password"。