IT技术精粹[JiShuBu.Com]-倾力打造一流IT技术平台!
  • 登录
  • 注册
  • 设为首页
  • 加入收藏
  • 网站首页
  • IT风向标
  • 网站优化
  • Html
  • CSS
  • JavaScript
  • ASP
  • Php/Mysql
  • Flash
  • Ajax
  • 源码下载
  • 精美桌面
  • 供求信息
  • 超稳定100M虚拟主机只要100元,还送50M邮箱!
  • 文字广告招商中...
  • 会员注册 | 用户登录 | 我要投稿
  • 信息订阅
使用AJAX技术实现网页无闪自动局部刷新 您现在正在浏览:首页 > Ajax > 
使用AJAX技术实现网页无闪自动局部刷新

作者:dxaw 发布时间:2008-04-10 15:54:21 来源:赛迪网

我们在网页制作的过程中经常会遇到及时刷新数据的问题,如果使用 的方法,会造成整个屏幕不断闪烁刷新的效果,这会降低用户的操作满意度。

所以我们需要一种可以实现无闪自动刷新数据的方法来解决以上问题。

实例解决问题:

希望实现用户在进入系统以后(整个session的时效之内),如果收到新邮件则发出声音提示。

实现思路:

1.首页部分:< body onload="init('');"> // load时调用init(user);

2.js部分:用XMLHTTP实现页面局部刷新,调用check_mail.jsp对后台数据库进行检索判断并返回结果。

<!--

var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

var checkresult=null;

var username =null;

function init(user){

username=user;

window.setInterval('Checkmail()',5000);//每隔5秒自动调用Checkmail()

}

function Checkmail()

{

xmlhttp.open("POST", "check_mail.jsp?uName="+username, false);

xmlhttp.onreadystatechange = updatePage;

xmlhttp.send();

}

function updatePage() {

if (xmlhttp.readyState < 4) {

test1.innerHTML="loading...";

}

if (xmlhttp.readyState == 4) {

var response = xmlhttp.responseText;

if(response==1){//判断为假

test1.innerHTML="&nbsp;";

checkresult=1;

}

else{//判断为真

test1.innerHTML="<ccid_file alt=新邮件 values="img/tp024"

alt=新邮件 src=img/tp024.gif />

<EMBED src='music/nudge.wma' hidden=true autostart=true loop=false>";

checkresult=0;

}

}

}

// -->

3.check_mail.jsp

<%@ page contentType="text/html; charset=GBK" %>

<%@ page errorPage="error/login_error.jsp"%>

<%@ page import="myweb.*" %>

<%@ page import="java.sql.*" %>

<%

String user=request.getParameter("uName");

Connection conn=null;

try{

conn=DBConnection.getConnection();

PreparedStatement pStat=conn.divpareStatement("

select * from message where r_name='"+user+"' and status=0");

ResultSet rs=pStat.executeQuery();

if(rs.next()){//有记录

response.getWriter().print(0);

}else{

response.getWriter().print(1);

}

}finally{

if(conn!=null) conn.close();

}

%>

4.首页结果显示

将< span id="test1" > < /span >插入指定位置。

  
【评论】【加入收藏夹】【大 中 小】【打印】【关闭】
※ 相关信息
 ·AJAX技术汇总  (2008-04-06 21:25:26)
 ·Ajax实战(Ajax in action中文版)  (2008-04-04 22:04:00)
 ·利用AJAX技术实现网页无刷新进度条显示  (2008-02-15 23:23:23)
 ·Ajax 图片幻灯片放映[php]  (2008-01-28 17:57:42)
 ·'AjaxPro'未定义错误的原因&javascript顺序执行&AjaxPro机制  (2008-01-28 17:56:40)
 ·喜欢Ajax的十大理由  (2008-01-19 16:21:16)
 ·Ajax调试的小技巧  (2008-01-13 21:36:17)
 ·总结ajax的一些小技巧  (2008-01-13 21:27:08)
 ·在AJAX程序中实现互斥揭秘  (2008-01-13 21:23:05)
 ·AJAX技术汇总  (2008-01-10 21:57:32)

发表评论
查看评论 
用户名: 密码:
验证码: 匿名发表
[注册帐号]
[控制面板]
[用户登陆]
[修改资料]
[用户收藏]
[我的状态]
[退出登陆]
 
文章搜索
     
    [添加文章]   [管理文章]
最新技术文档
    ·中国移动188号段将于1月8日起在深圳正式放号
    ·PHP与Javascript的两种交互方式
    ·使用wordpress中的函数 (PHP)
    ·js倒计时效果-精确到秒 (Javascript)
    ·PHP无刷新删除数据
    ·PHP文件系统处理类
    ·PHP文件缓存数据类
    ·PHPMailer邮件类利用smtp.163.com发送邮件方
    ·PHP的POST方式
    ·md5 结合 crypt =无敌密码
技术文档排行榜
    ·天气预报小偷,根据IP自动判断地址
    ·超经典计算机使用问题105答
    ·CSS网页布局入门教程:下拉及多级弹出式菜单
    ·'AjaxPro'未定义错误的原因&javascript顺
    ·[初学者必读]网页制作之HTML基础知识
    ·DIV&CSS打造自动伸展三栏复合布局
    ·近1000本javascript电子图书下载列表
    ·CSS 文字樣式技巧 (摘自一台湾网站,确实很
    ·阿里妈妈广告的投放技巧
    ·ajax+php无刷新二级联动下拉菜单(省市联动)
关于站点 - 广告服务 - 联系我们 - 免责声明 - 程序支持 - 网站地图 - 留言中心 - 返回顶部

Copyright © 2007-2008 www.Jishubu.com online services. All rights reserved. Template designed by laogui.
违法不良信息举报中心 津ICP备07002356号