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

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

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

实例解决问题:

希望实现用户在进入系统以后(整个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 >插入指定位置。

时间: 2024-10-30 23:45:14

使用AJAX技术实现网页无闪自动局部刷新的相关文章

浅谈Ajax技术实现页面无刷新_AJAX相关

ajax (ajax开发) AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新

基于Ajax技术实现考试倒计时并自动提交试卷_AJAX相关

1.概述 在开发网络考试系统时,考试计时并自动提交试卷是必不可少的功能.由于在答卷过程中,试卷不能刷新,所以需要使用Ajax实现无刷新操作.运行本实例,访问准备考试页面index.jsp,在该页面中,单击"开始考试"按钮,将打开新窗口显示开始考试的页面,如图10.1所示,页面会自动计时,当考试时间结束时,将自动提价试卷. 2.技术要点 主要是利用Ajax异步提交技术和Servlet技术实现的.显示在考试页面中的计时时间是在Servlet中设置的,需要通过Ajax的异步提交不断的请求Se

AJAX的原理—如何做到异步和局部刷新【实现代码】_AJAX相关

Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新.那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则是通过客户端对服务的状态询问(定期轮询)所实现的. 详解: 1.  XMLHttpRequest 负责与服务器端的通讯,其内部有很多重要的属性:readyStatus=4,status=200等等.当XMLHttpRequest

AJAX的原理—如何做到异步和局部刷新【实现代码】

Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新.那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则是通过客户端对服务的状态询问(定期轮询)所实现的. 详解: 1.  XMLHttpRequest 负责与服务器端的通讯,其内部有很多重要的属性:readyStatus=4,status=200等等.当XMLHttpRequest

传统的ASP.NET网页与AJAX技术

ASP.NET AJAX本身被设计用来延伸既有的ASP.NET网页功能,开发人员透过这些延伸工具,不需要修改现有的程式码,就可以为网页加入AJAX的功能,对于ASP.NT网页的开发人员来说,ASP.NET AJAX代表的是一种进化而非革命. AJAX技术并不会推翻现有的ASP.NET,就如同它的名称,ASP.NET AJAX与ASP.NET是并存的,我们来看看传统的ASP.NET网页与运用了AJAX技术的网页它们之间的差异,底下是传统的ASP.NET网页: ASP.NET网页的每一个要求,会伴随

J2EE开发技术点4:ajax技术

前言 AJAX 是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术.需要知道的是,Ajax技术并不是一项新的技术,而是使用现有技术解决问题的新方法.Ajax(Asynchronous JavaScript and XML)也叫异步JavaScript和XML,该技术最早应用于Google maps上,也是Google把这项技术带到千家万户,可以发现目前主流的Web开发框架都集成了Ajax的功能,这点也说明了这项技术的优越性.Ajax技术的工作原理很简单:通过在后台与服务器进行少

关于ASP.NET中实现AJAX局部刷新

问题描述 在asp.net里面不用微软的Ajax控件用javascript,Ajax实现服务器有新数据,在网页上就能局部刷新出来这种效果吗?新手学javascript,其实一直想学javascript,用什么调试工具呢?vs2010可以不?大家有什么建议给指导下吧? 解决方案 解决方案二:不用微软的scriptmanager当然可以.那就自己手写ajax,基本上在实际开发中,都是使用js的ajax.可以使用visualstudio调试,但是前提你必须写测试程序.现在的浏览器都支持js调试,具体方

使用ajax技术无刷新动态调用新浪股票实时数据_AJAX相关

新浪的财金频道一直感觉做得很好.但由于最近网速慢的缘故,查看股票信息时网页老是打不开.这几天一直在研究ajax,于是用jquery自己做了一个自动读取新浪股票实时数据的页面. <html> <head> <title>ajax test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <scri

Ajax技术(WEB无刷新提交数据)

ajax|web|数据|刷新|无刷新 Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的. 二.引用 Ajax这个概念的最早提出者Jesse James Garrett认为: Ajax是Asynchronous JavaScript and XML的缩写. Ajax并不是一门新的语言或技术,它实际上是几项技