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

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

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. vue二、脚手架搭建

    1:安装nodeJs(下载一路回车) https://nodejs.org/zh-cn/ 2:检验nodeJs是否安装成功 (注意nodeJs是否添加到window路径中) 进入cmd -> n ...

  2. 全志A33移植LCD驱动(ILI9806E)

    0x00 环境说明: 所使用的开发板为锐尔威视的插针版A33_Vstar 屏幕是买的第三方的KD050FWFPA011-C009A,其中LCD驱动IC为ILI9806E,所使用的接口为RGB666 0 ...

  3. C/C++ 获取系统时间 到秒 || 到毫秒

    string getNowSysTime(string &outPut) { ] = {}; struct timeval tv; struct timezone tz; struct tm ...

  4. 用java语言通过POI实现word文档的按标题提取

    最近有一个项目需要将一个word文档中的数据提取到数据库中.就去网上查了好多资料,最靠谱的就是用poi实现word文档的提取. 喝水不忘挖井人,我查了好多资料就这个最靠谱,我的这篇博客主要是借鉴htt ...

  5. Git命令(Git版本:Linux 2.14.3)

    常用 git status 跟踪状态git commit -m "xxx" yyy.cppgit pull git pushgit mergetool --tool=meld 合并 ...

  6. C博客第02次作业---循环结构

    1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量 1.2 本章学习体会及代码量 1.2.1 学习体会 1.这两周的学习懂得了循环结构的使用方法,懂得了在什么时候应该使用循环结构来处理问 ...

  7. 分享一个基于ssm框架下的webService接口开发

    首先肯定是导入相关jar包 cxf-core-3.1.9.jar cxf-rt-bindings-soap-3.1.9.jar cxf-rt-bindings-xml-3.1.9.jar cxf-rt ...

  8. Cesium 学习笔记

    Entity API 1,和 fill属性不太一样,outline没有对应的材质配置,而是用两个独立的属性outlineColor和outlineWidth. 注意outlineWidth属性仅仅在非 ...

  9. Android界面跳转几种情况

    Android界面简单跳转, Intent intent =new Intent(MainActivity.this,SecondActivity.class); startActivity(inte ...

  10. 手机APP应用外网访问本地WEB应用

    手机APP应用外网访问本地WEB应用 本地安装了WEB服务端,手机APP应用只能在局域网内访问本地WEB,怎样使手机APP应用从公网也能访问本地WEB? 本文将介绍具体的实现步骤. 1. 准备工作 1 ...