一个ajax异步调用并自动刷新的例子
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>
4.结果