一个ajax异步调用并自动刷新的例子

最新推荐文章于 2024-04-17 17:01:56 发布

原创最新推荐文章于 2024-04-17 17:01:56 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

eclipse 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的异步调用示例，通过GET请求获取数据，并每5秒自动更新页面内容。展示了具体的JavaScript脚本、HTML结构及调用结果。

1.异步调用uri：

uri为svc/CheckSample/1

调用后的结果：

<table border="1"><tr><th>Company in USA</th><th align="right">Address</th></tr><tr><td>Apple, Inc.</td><td>1 Infinite Loop Cupertino, CA 95014</td></tr><tr><td>Google, Inc.</td><td>1600 Amphitheatre Parkway Mountain View, CA 94043</td></tr><tr><td> current Date.</td><td>2017-08-15 22:10:19</td></tr></table>

2.脚本

<script language="JavaScript">
    var xmlrequest;
    function createXMLHttpRequest()
    {
        if(window.XMLHttpRequest)
        { //Mozilla 浏览器
            xmlrequest = new XMLHttpRequest();
        }
        else if (window.ActiveXObject)
        {
            // IE浏览器
            try
            {
                xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                try
                {
                    xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {}
            }
        }
    }
    function load(){
     change();
     setInterval("change()",5000);
    }
    function change()
    {        
        var displaySelect = document.getElementById("content");
        createXMLHttpRequest(); 
//        var uri = "svc/CheckSample/1;"+Math.random();//OK
        var uri = "svc/CheckSample/1";
        xmlrequest.open("GET", uri, true); 
        xmlrequest.onreadystatechange = processResponse;
        xmlrequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  xmlrequest.setRequestHeader("If-Modified-Since","0");//OK
        xmlrequest.send();
    }
    function processResponse()
    {
        if(xmlrequest.readyState == 4)
        {
            if(xmlrequest.status == 200)
            {
                var cityList = xmlrequest.responseText;//.split("$");
                var displaySelect = document.getElementById("content");
                displaySelect.innerHTML=cityList;
                
            }
        }
    }    </script>

3.html页面

<!doctype html> 
<html lang="zh"> 
  <head> 
    <meta charset="utf-8"> 
    <title>信息汇总</title> 
    <link href="fixed.css" rel="stylesheet"> 
  </head> 
  <body onload="load()"> 
    <header id="headHeader"> 
      <h1>XX信息汇总</h1>                    
    </header> 
    <article> 
      <header id="contentHeader"> 
        <h3>YY显示信息</h3>               
      </header> 
      <div id="content" > 
        内容                            
      </div> 
    </article> 
    <footer> 
      weifq2017                            
    </footer> 
    <aside id="nav">        
      <nav> 
        <ul> 
          <li><a href="#">XX信息</a></li> 
          <li><a href="#">YY信息</a></li> 
        </ul> 
      </nav> 
    </aside>                 
    <aside id="AD"> 
        ADAD               
    </aside> 
  </body> 
</html>