Ajax+setInterval定时异步刷新页面
这个是之前一个项目中用到的功能，现在记录一下他的使用步骤。
现在讲解一下具体的关键代码：
1. window.onload：是指等待页面html和css都执行完毕以后才开始执行js文件，因为我这个文件是用来测试的，所以js文件放在头部。
2. setInterval()是启用计时器的函数，函数中需要传递两个参数，一个是一个函数，是指这段时间内需要执行什么操作，第二个参数是间隔的时间。
3. clearTimeout() 是指当执行一段时间之后清除计时器，这个在该案例中没有使用到。
4. $.post ：是jquery操作ajax发出post请求的函数，其中需要三个参数，第一个参数是向哪个页面发送请求，第二个参数是向后台传递的参数，可以是键值对，也可以使json数据格式的，第三个参数是返回函数，里面的data是后端发送过来的数据。
5. window.onload千万别写成window.onload()
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="../Js/jquery-1.7.1.js"></script> 7 <link href="../Css/tableStyle.css" rel="stylesheet" /> 8 <script type="text/javascript"> 9 window.onload = function () { 10 loadUserInfo(); 11 } 12 setInterval(function () { 13 $("#tabList").load(location.href + " #tabList>*", ""); 14 loadUserInfo(); 15 }, 5000); 16 17 function loadUserInfo() { 18 $.post("UserList.ashx", {}, function (data) { 19 var serverData = $.parseJSON(data); 20 var serverDataLength = serverData.length; 21 for (var i = 0; i < serverDataLength; i++) { 22 $("<tr><td>" + serverData[i].Id + "</td><td>" + serverData[i].UserName + "</td><td>" + 23 serverData[i].UserPass + "</td><td>" + serverData[i].Email + "</td><td>").appendTo("#tabList"); 24 } 25 }); 26 } 27 </script> 28 </head> 29 <body> 30 <a href="AddUserInfo.html">添加</a> 31 <table id="tabList"> 32 <tr><th>编号</th><th>用户名</th><th>密码</th><th>邮箱</th><th>时间</th><th>详细</th><th>删除</th><th>编辑</th></tr> 33 34 35 </table> 36 </body> 37 </html>
后端代码：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using BLL; 6 using Model; 7 namespace WebApp.ajax 8 { 9 /// <summary> 10 /// UserList 的摘要说明 11 /// </summary> 12 public class UserList : IHttpHandler 13 { 14 15 public void ProcessRequest(HttpContext context) 16 { 17 context.Response.ContentType = "text/plain"; 18 BLL.UserInfoService UserInfoService = new BLL.UserInfoService(); 19 20 List<UserInfo> list = UserInfoService.GetList(); //将数据库中读取的数据保存在list中 21 //转换json的方法 22 System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer(); 23 string str = js.Serialize(list);//转换json数据 24 context.Response.Write(str); //写入到返回的数据中 25 } 26 public bool IsReusable 27 { 28 get 29 { 30 return false; 31 } 32 } 33 } 34 }
谢谢观看！！！
