4221学习网
首页 | 网址大全 | 脑力倍增 | 电脑学院 | 学习方法 | 英语学习 | 口才交际 | 工作职场 | 成功励志 | 文学小说 | 视频教程 | 视频短片 | 下载中心 | NBA | 奥运 | 图片专区 | QQ·技巧 | 游戏技巧 | 恋爱技巧 | 谈天说地 | 专题教程 | 4221论坛
热门关键字: 视频教程  百家讲坛  美女  记忆力  疯狂英语
 → 当前位置:4221学习网>电脑学院>编程开发>AJAX>正文

使用AJAX技术实现网页无闪自动局部刷新

4221学习网 2007-09-28 来源:互联网 收藏本文

训练30小时,让阅读提速5-10倍!---速读记忆训练软件免费下载!(点击下载)

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

 

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

 

实例解决问题:

 

希望实现用户在进入系统以后(整个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应用篇:必须用到和不必使用的地方   下一篇:精典文萃:过渡技术的Ajax及Apusic JSF
添加到google书签 digg this! 添加到bolaa 添加到yahoo+ 添加到新浪vivi 添加到365key  
收藏】 【评论】 【推荐】 【投稿】 【打印】 【关闭

相关文章
·AJAX应用篇:必须用到和不必使用的地方
·精典文萃:过渡技术的Ajax及Apusic JSF
·AJAX使用技巧:如何处理书签和翻页按扭
·新手入门:Ajax的JSP示例以及相关知识
·AJAX并不神秘:揭密各种AJAX控件和类库
·理解AJAX工作原理 构建网站的有效方法
·AJAX学习基础:简单介绍数据岛使用方法
·Eclipse平台上开始支持AJAX和动态语言
·新手入门:AJAX应用需要组件技术作支撑
·AJAX实例应用初体验:自动保存草稿
发表评论
要记得去论坛讨论,点击注册新会员) 密码: 匿名评论
评论内容:(请自觉遵守互联网相关政策法规。)
最新文章
·精典文萃:过渡技术的Ajax及Apusic JSF
·AJAX应用篇:必须用到和不必使用的地方
·AJAX使用技巧:如何处理书签和翻页按扭
·新手入门:Ajax的JSP示例以及相关知识
·AJAX并不神秘:揭密各种AJAX控件和类库
·理解AJAX工作原理 构建网站的有效方法
·AJAX学习基础:简单介绍数据岛使用方法
·Eclipse平台上开始支持AJAX和动态语言
·新手入门:AJAX应用需要组件技术作支撑
·AJAX实例应用初体验:自动保存草稿
本类阅读排行榜
·AJAX实例应用初体验:自动保存草稿
·新手入门:Ajax的JSP示例以及相关知识
·AJAX快速入门之HTTP协议基础
·用AJAX编写一个简单的相册
·理解AJAX工作原理 构建网站的有效方法
·Ajax核心:XMLHTTP组件相关技术资料
·AJAX使用技巧:如何处理书签和翻页按扭
·ajax技术制作得在线歌词搜索功能
·AJAX学习基础:简单介绍数据岛使用方法
·AJAX并不神秘:揭密各种AJAX控件和类库
热点视频教程
视频街舞 舞步 教学
视频windowsxp重装系统视频教程
视频李孝利十分钟详细舞蹈教程
视频美女教你跳舞
视频街舞 舞步 教学2
视频双截棍视频教程-定式
视频如何安装双操作系统
视频韩国的太空步教程,后滑、侧滑、旋转太空
视频【WindowsXP入门教程】 - 硬盘分区
视频台球教程-基本杆法
视频[百家讲坛]三十六计01_借刀杀人
视频24式太极拳教学---基本动作
视频 斯诺克台球竿法-后退球
视频动物世界之决战生死线2
视频超级全脑速读训练教程

设为首页 - 加入收藏 - 关于我们 - 联系我们 - 友情连接

4221学习网版权所有-鄂ICP备07006816号
已浏览: