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 }

谢谢观看！！！