在Javascript中，事件是一种非常重要的机制。这意味着，我们可以在代码中定义特定的事件，然后在特定的条件下触发这些事件。其中一个非常常见的事件是onreadystatechange事件。该事件在XMLHttpRequest对象中被广泛使用，可以帮助我们知道何时发送和接收已完成。

在本文中，我们将详细讨论onreadystatechange事件的作用及用法。我们将为您解释这个事件是什么，如何使用它和实际例子，以便您可以了解它的重要性和如何将其应用于您自己的代码中。

什么是onreadystatechange事件？

onreadystatechange事件是XMLHttpRequest对象中预定义的一个事件。该事件用于检测Ajax请求的状态。当发送请求时，浏览器会使用XMLHttpRequest对象预处理请求。其中，onreadystatechange事件是处理请求状态的事件。

当HTTP状态改变时，浏览器将触发onreadystatechange事件。根据这个事件的返回值，我们可以知道当前请求的状态。这些状态信息是重要的，因为我们可以根据需要对已发送的请求做出响应，例如改变页面内容，添加或移除元素等。

如何使用onreadystatechange事件？

为了使用onreadystatechange事件，我们需要按照下面的步骤操作：

1. 首先，我们必须创建一个XMLHttpRequest对象。可以使用一些内置的浏览器Javascript方法，例如XmlHttpRequest（）或ActiveXObject（）来创建它。

2. 我们需要使用open()和send()方法来发送请求。这两个方法可以接收URL和请求方法，还可以可选地将参数并发送到服务器上。

3. 然后，设置onreadystatechange事件处理程序。当状态发生变化时，浏览器会自动调用该函数。

4. 在事件处理程序中，我们可以通过XMLHttpRequest对象的readyState属性，查看当前请求的状态。 如果状态已更改，我们可以执行任何我们需要的操作。

onreadystatechange事件的返回值

XMLHttpRequest对象有五个readyState属性值：

0 - 请求未初始化（尚未调用open（）方法）

1 - 服务器连接已建立（已调用open（）方法，但尚未发生send（）方法）

2 - 请求已收到（已经调用sent（）方法，服务器已经收到请求并已经处理）

3 - 请求正在处理（正在处理请求，但响应未完成。请求仍未完成）

4 - 请求已完成（HTTP响应已经被完全接收并已经处理完毕）

我们可以在事件处理程序中根据当前标志进行操作，例如：

if (xhr.readyState === 4) {

// Do something

}

实际应用

如何实际应用onreadystatechange事件呢？

在上面的示例中，我们可以使用Ajax（XMLHttpRequest）来向服务器请求页面内容。以下是一个onreadystatechange事件的实际例子，用于从服务器获取数据并将其展示在页面上：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

document.getElementById("data").innerHTML =xhr.responseText;

}

};

xhr.open('GET', 'http://example.com/data.json', true);

xhr.send();

在此示例中，我们首先创建了一个XMLHttpRequest（）对象，并设置了一个事件处理程序，以便在XHR对象的状态发生变化时调用该函数。然后，我们使用open方法打开请求，并使用send方法发送请求。最后，我们通过innerHTML将响应的JSON数据插入ID为“ data”的Div中。

另一个实际的例子涉及到状态检测。例如，我们可以检测一个特定的请求状态，例如400和404等错误状态。当在XHR对象中触发onreadystatechange事件时，可以按照以下方法进行操作：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

// Success

} else if (xhr.status === 404) {

// Not found

} else if (xhr.status === 400) {

// Bad request

}

}

};

xhr.open('GET', 'http://example.com/data.json', true);

xhr.send();

在此示例中，我们在事件处理程序中检测请求的状态。 如果状态为200，则请求成功。 如果是404，则页面无法找到。 如果状态为400，则是无效请求。

结论

onreadystatechange事件是一种强大的Javascript工具，并且在Web开发中非常常见。使用onreadystatechange事件，我们可以轻松检测和响应请求状态，在请求返回后触发任何自定义代码。这是一个非常有用和实用的工具，如果您还没有学习过，现在便是时候了。