ajax-onreadystatechange 事件

前端之家收集整理的这篇文章主要介绍了ajax-onreadystatechange 事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_502_1@PS:看到JavaScript DOM编程艺术上有写onreadystatechange,于是想总结下onreadystatechange事件,方便下次回顾。

当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性

属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用函数
readyState

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

@H_301_48@
  • 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;
        }
      }

    demo程序:

    <html>
    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+,Firefox,Chrome,Opera,Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6,IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","/ajax/test1.txt",true);
    xmlhttp.send();
    alert("看,我的确是先出来的,然后会触发onreadystatechange函数");
    }
    </script>
    </head>
    <body>
    
    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button type="button" onclick="loadXMLDoc()">通过 ajax 改变内容</button>
    
    </body>
    </html>

    猜你在找的Ajax相关文章