关于ajax中的onreadystatechange

最新推荐文章于 2024-05-28 11:25:27 发布

原创最新推荐文章于 2024-05-28 11:25:27 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

技术篇专栏收录该内容

12 篇文章

订阅专栏

博客介绍了Ajax请求中readystate和status属性。readystate存有XMLHttpRequest状态信息，由0 - 4代表请求过程；status与readystate一起变化，200表示成功，404表示未找到页面等。还通过例子说明本地文件请求时status为0，并封装了loadeXMLDOC方法实现请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先铺垫一下知识：

readystate 属性存有 XMLHttpRequest 的状态信息，也就是代表着请求数据的过程，是由0~4代表，具体见（onreadystatechange）

status：跟readystate一起变化的属性，200表示成功，404表示未找到页面，还有很多其他的值表示不同的问题

只要readystate变化，就会触发onreadystatechange方法

我们先看一个例子：

<html>

<head>

    <script type="text/javascript">  
        function loadXMLDOC(url,cfunc) {
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=cfunc;
            xmlhttp.open("GET",url,true);
            xmlhttp.send();
        }
        function parseXML() {
           loadXMLDOC("demo.txt",function(){
               console.log(xmlhttp.status);
               if(xmlhttp.readyState==4&&xmlhttp.status==0){
                xmlDoc = xmlhttp.responseText;
                console.log(xmlDoc);
                document.getElementsByTagName("div")[0].innerHTML=xmlDoc;
               }
           });
        }  
    </script>
</head>

<body onload="parseXML()">
    <h1>W3School.com.cn Internal Note</h1>
    <div style="width: 100px;height: 100px;"></div>
    <button type="button" onclick="parseXML()">la</button>
</body>

</html>

所以我们这个例子中的onreadystatechange需要赋值一个函数，为什么我们的判断语句里面是写着status==0而不是200呢，因为：

如果在本地运行(如：C:\\ajax\\ helloworld.htm)，那么status属性不管是在”成功”还是”页面未找到”的情况下，都返回的是0。
也就是说没有通过Web服务器形式的Ajax请求返回值都是0;

也就是我们的demo.txt是本地文件，ajax请求根本就没有通过服务器，所以status的值只能是0

并且我们在这个例子中封装了一个loadeXMLDOC方法，里面的参数可以更好的实现ajax请求