这个是之前一个项目中用到的功能，现在记录一下他的使用步骤。

现在讲解一下具体的关键代码：

1.   window.onload：是指等待页面html和css都执行完毕以后才开始执行js文件，因为我这个文件是用来测试的，所以js文件放在头部。

2.    setInterval()是启用计时器的函数，函数中需要传递两个参数，一个是一个函数，是指这段时间内需要执行什么操作，第二个参数是间隔的时间。

3. clearTimeout()  是指当执行一段时间之后清除计时器，这个在该案例中没有使用到。

4. $.post ：是jquery操作ajax发出post请求的函数，其中需要三个参数，第一个参数是向哪个页面发送请求，第二个参数是向后台传递的参数，可以是键值对，也可以使json数据格式的，第三个参数是返回函数，里面的data是后端发送过来的数据。

5. window.onload千万别写成window.onload()

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <script src="../Js/jquery-1.7.1.js"></script>

     <link href="../Css/tableStyle.css" rel="stylesheet" />

     <script type="text/javascript">

         window.onload = function () {

             loadUserInfo();

         }

         setInterval(function () {

             $("#tabList").load(location.href + " #tabList>*", "");

             loadUserInfo();

         }, );

         function loadUserInfo() {

             $.post("UserList.ashx", {}, function (data) {

                 var serverData = $.parseJSON(data);

                 var serverDataLength = serverData.length;

                 for (var i = ; i < serverDataLength; i++) {

                     $("<tr><td>" + serverData[i].Id + "</td><td>" + serverData[i].UserName + "</td><td>" +

                         serverData[i].UserPass + "</td><td>" + serverData[i].Email + "</td><td>").appendTo("#tabList");

                 }

             });

         }

     </script>

 </head>

 <body>

     <a href="AddUserInfo.html">添加</a>

     <table id="tabList">

         <tr><th>编号</th><th>用户名</th><th>密码</th><th>邮箱</th><th>时间</th><th>详细</th><th>删除</th><th>编辑</th></tr>

     </table>

 </body>

 </html>

后端代码：

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 using BLL;

 using Model;

 namespace WebApp.ajax

 {

     /// <summary>

     /// UserList 的摘要说明

     /// </summary>

     public class UserList : IHttpHandler

     {

         public void ProcessRequest(HttpContext context)

         {

             context.Response.ContentType = "text/plain";

             BLL.UserInfoService UserInfoService = new BLL.UserInfoService();

             List<UserInfo> list = UserInfoService.GetList();  //将数据库中读取的数据保存在list中

             //转换json的方法

             System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

             string str = js.Serialize(list);//转换json数据

             context.Response.Write(str); //写入到返回的数据中

         }

         public bool IsReusable

         {

             get

             {

                 return false;

             }

         }

     }

 }

谢谢观看！！！

Ajax+setInterval定时异步刷新页面的更多相关文章

  1. Ajax实现定时刷新页面

    function deleteValue(){ var refresh = function() { $.ajax({   type:'post',   url:'/Application/index ...

  2. php+ajax+jquery 定时刷新页面数据

    testajax.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  3. vue单页应用中，使用setInterval()定时向服务器获取数据，后来跳转页面后，发现还在不停的获取数据。

    使用VUE开发单页项目时遇到这样的问题,mounted中使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据.我以为是因为我路由用的push导致的,改成repla ...

  4. JS定时刷新页面及跳转页面

    JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...

  5. ajax用get刷新页面元素在IE下无效解决~~

    总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端 ...

  6. PHP与Ajax的交互更新页面

    PHP与Ajax的交互更新页面 本次主要学习ajax的概念以及怎么与PHP之间进行交互操作 1.什么是Ajax?    国内翻译常为“阿贾克斯”和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网 ...

  7. Ajax方法实现登录页面

    Note: ajax技术 不用刷新页面,做局部刷新不用form表单,因为不需要提交,通过JQuery控制必须要有id如果要用ajax可以用JQuery也可以用js写,推荐JQuery 因为简单,直接引 ...

  8. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  9. JSP简单练习-定时刷新页面

    <%@ page contentType="text/html; charset=gb2312" %> <%@ page import="java.ut ...

随机推荐

  1. JMeter-生成性能测试结果报告

    1.将jmeter添加至环境变量,验证环境是否配置完毕: 终端输入jmeter,如果返回如下信息并启动jmeter说明环境已配置好了 2.修改配置文件 查找“Results file configur ...

  2. elasticsearch 之编译过程

    https://github.com/elastic/elasticsearch/blob/master/CONTRIBUTING.md 不同的版本需要指定JDK 可以下载openJDK版本到服务器上 ...

  3. 【论文速读】Cong_Yao_CVPR2017_EAST_An_Efficient_and_Accurate_Scene_Text_Detector

    Cong_Yao_CVPR2017_EAST_An_Efficient_and_Accurate_Scene_Text_Detector 作者和代码 非官方版tensorflow实现 非官方版kera ...

  4. loadrunner12中JavaVuser脚本的编写

    1.环境准备:      友情提示:用本地环境,不要用虚拟机      LoadRunner11----->对应JDK1.6版本(32位) LoadRunner12----->对应JDK1 ...

  5. nginx 阻止非自己域名解析到服务器

    server模块加入 default_server server { listen 80 default_server; return 403; # return 301 https://$serve ...

  6. 自己动手写java锁

    1.LockSupport的park和unpark方法的基本使用,以及对线程中断的响应性 LockSupport是JDK中比较底层的类,用来创建锁和其他同步工具类的基本线程阻塞原语.java锁和同步器 ...

  7. Mac 下 实现终端跳转 服务器 不用输入密码

    首先需要安装 expect 安装 expect  需要 tcl 依赖 第一步 下载tcl http://www.tcl.tk/software/tcltk/downloadnow84.tml 将下载好 ...

  8. Redis的数据结构、通用操作及其特性

    Redis的数据结构 五种数据类型: 字符串(String).字符串列表(list).字符串集合(set).有序字符串集合(sorted set).哈希(hash) key定义的注意点: 不要过长,不 ...

  9. 1.4：SubShader

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 在了解了渲染流水线之后,我们可以开始SubShader的学习了. 什么是S ...

  10. vue 添加旋转图片 修改css transform 值

    //点击放大图片并旋转图片 conponents组建 <template>    <!-- 过渡动画 -->    <transition name="fade ...