AJAX —— onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面 304 文档的内容（自上次访问以来或者根据请求的条件）并没有改变

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

304 文档的内容（自上次访问以来或者根据请求的条件）并没有改变

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}

注意：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction()
{
loadXMLDoc("ajax_info.txt",function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}});
}

示例

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}
else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}});
}
</script>
</head>
<body><div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button></body>
</html>

AJAX —— onreadystatechange 事件相关推荐

AJAX - onreadystatechange 事件
AJAX - onreadystatechange 事件 1.当请求被发送到服务器时,我们需要执行一些基于响应的任务. 2.每当 readyState 改变时,就会触发 onreadystatecha ...
[JavaScript][AJAX]onreadystatechange事件；AJAX含义及组成部分；AJAX工作原理/HTTP工作原理；一个页面从输入url到呈现网页过程；FormData对象；防抖
目录 onreadystatechange事件 AJAX含义及组成部分 AJAX工作原理/HTTP工作原理一个页面从输入url到呈现网页过程 TCP三次握手图示渲染引擎渲染网页流程图编辑 Fo ...
Ajax onreadystatechange事件
onreadystatechange 事件当请求被发送到服务器时,我们需要执行一些基于响应的任务. 每当 readyState 改变时,就会触发 onreadystatechange 事件. rea ...
ajax的4种状态事件,AJAX - onreadystatechange 事件
onreadystatechange 事件当请求被发送到服务器时,我们需要执行一些基于响应的任务. 每当 readyState 改变时,就会触发 onreadystatechange 事件. rea ...
IE中同一个url第二次AJAX调用无法触发onreadystatechange事件
如果第二次通过XMLHttpRequest去请求一个URL,则不会触发onreadystatechange时间,虽然从调试插件来看,ie是进行了这次请求. 后来发现,这个是因为在ie下,如果请求的UR ...
ajax的readyState状态值和onreadystatechange事件，帮助你更好的理解ajax
认识ajax的readyState状态值和onreadystatechange事件 1.readyState是什么? 2.readyState它有多少个值,分别代表什么? 3.认识ajax的onrea ...
简单解析Ajax中onreadystatechange事件的readyState属性和status属性
简单解析Ajax中的onreadystatechange 事件 onreadystatechange 事件当请求被发送到服务器时,我们需要执行一些基于响应的任务.每当 readyState 改变时, ...
对ajax中onreadystatechange事件执行流程的理解
对Ajax中onreadystatechange事件执行流程的理解 onreadystatechange 事件当请求被发送到服务器时,我们需要执行一些基于响应的任务. 每当 readyState 改 ...
ajax打开后回调事件,[AJAX系列]onreadystatechange事件
onreadystatechange事件: 当请求被发送到服务器时,我们需要执行一些基于响应的任务每当readyState改变时,就会触发onreadystatechange事件 readyStat ...

AJAX —— onreadystatechange 事件

使用 Callback 函数

AJAX —— onreadystatechange 事件相关推荐

最新文章

热门文章