AJAX onreadystatechange 事件 - 学习 AJAX - 简单教程，简单编程

AJAX 是异步的，当使用 XMLHttpRequest 发送请求时，我们需要定义当服务器响应时的处理函数

XMLHttpRequest 对象请求过程中的状态变更会赋值给 readyState 属性，同时触发 onreadystatechange 事件

readyState 属性存有 XMLHttpRequest 的状态变更信息

下表列出了 XMLHttpRequest 对象的三个重要的属性

属性	描述
onreadystatechange	存储状态变更处理函数每当 readyState 属性改变时，就会调用该函数
readyState	存有 XMLHttpRequest 的状态从 0 到 4 发生变化 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	HTTP 请求的返回的状态 200: "OK" 404: 未找到页面

onreadystatechange 的值用来定义当服务器响应已做好被处理的准备时所执行的任务

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

xmlhttp.onreadystatechange = function() {

    // 打开注释可以看到变更过程
    // console.log("readyState:",xmlhttp.readyState);

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

运行范例 »

注意

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

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数

如果我们的网页使用了多个 AJAX 任务，那么应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务

// url = /r/show/yufei/txt/ajax_info

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

运行范例 »