AJAX - onreadystatechange 事件
·Previous Page
·Next Page
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
属性
|
描述
|
onreadystatechange
|
存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
|
readyState
|
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
· 0: 请求未初始化
· 1: 服务器连接已建立
· 2: 请求已接收
· 3: 请求处理中
· 4: 请求已完成,且响应已就绪
|
status
|
200: "OK"
404: 未找到页面
|
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 &&xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
亲自试一试
注释:onreadystatechange 事件被触发 4 次,对应着 readyState 的每个变化。
使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务,那么您应该为创建XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
functionmyFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 &&xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
亲自试一试
来自:http://www.w3school.com.cn
分享到:
相关推荐
`onreadystatechange`事件是AJAX中的关键部分,它使得开发者能够在XMLHttpRequest对象的状态发生变化时执行相应的处理程序。 XMLHttpRequest对象是AJAX的核心,它提供了与服务器进行通信的能力。`...
4. **接收响应**:服务器处理请求后返回数据,XMLHttpRequest对象的onreadystatechange事件会被触发,通过status和responseText属性获取服务器响应。 5. **更新页面**:根据接收到的数据,使用JavaScript动态修改DOM...
在 AJAX 中,`onreadystatechange` 事件扮演了关键角色,它使得开发者能够根据请求的状态来执行相应的处理。 `onreadystatechange` 事件是一个事件处理器,每当 `XMLHttpRequest` 对象的 `readyState` 属性发生变化...
在Ajax-B中,可能有对XMLHttpRequest.open()、send()等方法的调用,用于构建和发送AJAX请求,以及对onreadystatechange事件的处理,用于在请求状态改变时执行相应操作。 **AJAX与Java** 的结合可能涉及到服务器端的...
2. **事件处理**:在发送请求前,需要设置一些事件监听器,例如`onreadystatechange`事件,当请求状态改变时,该事件会被触发。`readyState`属性表示请求的当前状态,值为4表示请求完成,`status`属性表示HTTP状态码...
4. **事件监听**:使用`onreadystatechange`事件监听请求状态变化,当`readyState`属性值为4(表示请求已完成)且`status`属性值为200(表示请求成功)时,表示数据已成功获取。 5. **处理响应**:通过`...
5. **监听状态变化**:通过`onreadystatechange`事件监听XMLHttpRequest对象的状态变化。当`readyState`属性为4(表示请求已完成)且`status`属性为200(表示成功)时,表明请求成功。 6. **处理响应**:使用`...
7. **处理响应**:AJAX请求完成后,XMLHttpRequest对象的`onreadystatechange`事件会被触发。当`readyState`属性变为4(表示请求已完成)且`status`属性为200(表示请求成功)时,我们可以通过`responseText`或`...
4. **处理响应**:监听XMLHttpRequest的onreadystatechange事件,当状态变为4(表示请求已完成),根据status属性判断请求是否成功,并更新UI。 5. **服务器端代码**:根据所使用的服务器端语言(如PHP、Java等),...
4. **监听状态变化**:通过`onreadystatechange`事件,当服务器响应准备好时,执行相应的处理函数。 5. **处理响应**:在响应处理函数中,检查`readyState`和`status`属性,确保请求成功,然后读取`responseText`或...
- **接收并解析响应**:前端的AJAX回调函数监听`onreadystatechange`事件,当状态改变为4(表示请求完成)且状态码为200(表示成功)时,调用`responseText`或`responseXML`获取服务器返回的数据。 - **更新界面**...
5. **监听状态变化**:使用`onreadystatechange`事件处理函数,当请求状态改变时进行相应操作。 6. **处理响应**:当状态变为4(完成)且状态码表示成功时,使用`responseText`或`responseXML`获取数据,并用DOM方法...
6. **事件处理**:在JavaScript中,我们需要监听Ajax请求的状态变化,比如当`readyState`变为4(表示请求完成)且`status`为200(表示请求成功)时,处理返回的数据。 7. **跨域问题**:由于同源策略的限制,Ajax...
5. 处理响应:在`onreadystatechange`事件的回调函数中,可以使用`xhr.responseText`或`xhr.responseXML`获取到服务器返回的数据,并进行解析和展示。 在"ajax-database.zip"这个压缩包中,很可能包含了以下内容: ...
3. 监听状态变化:通过XMLHttpRequest对象的onreadystatechange事件,检查readyState属性(表示请求/响应过程的当前状态)和status属性(HTTP状态码),当状态为4(完成)且状态码为200(成功)时,表示请求已完成且...
8. **接收响应**:当服务器响应准备好,XMLHttpRequest对象的onreadystatechange事件被触发,通过status属性检查请求状态,通过responseText或responseXML获取响应数据。 9. **处理响应**:JavaScript解析返回的...
4. 监听并处理服务器的响应,通常会有一个onreadystatechange事件,当状态改变时触发。 5. 如果响应状态成功(如HTTP状态码为200),则读取响应数据,更新前端界面,告知用户用户名是否可用。 在“ajax-register....
在请求过程中,可以监听onreadystatechange事件,当状态改变时进行相应的处理,如解析响应数据,更新DOM。 【DOM和JSON的运用】 - DOM:在Ajax中,DOM用于动态修改和操作页面元素。通过JavaScript,我们可以查找、...
xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且状态码为200 var data = JSON.parse(xhr.responseText); console.log(data); // 处理返回的数据 } }; ...
4. 监听状态变化:通过设置XMLHttpRequest对象的`onreadystatechange`事件处理器,当服务器响应状态改变时执行相应的函数。 5. 处理响应:当请求完成且状态为4(即HTTP状态码200表示成功),可以通过`responseText`...