今天是:
首 页信息查询网站SEO查询工具CSS编辑器建站素材
网海拾贝,电脑资讯,电脑快报,it资讯,网站建设资讯,教程基地
软件新闻
操作系统
Vista Winxp Win2003 Linux Windows综合
工具软件
系统工具 媒体工具 网络工具 杀毒软件 聊天
软件开发
C教程 C++ Java C# ASP.NET JSP PHP
数据库
Oracle MySQL DB2 SQL Server Sybase
安全
网络 病毒
办公应用
Word Excel Powerpoint Outlook 其他
平面设计
Photoshop Fireworks Coreldraw Flash Illustrator 3dsmax
网站运营
网站运营 网站优化 网站策划 策划书下载 建站心得 站长故事 网站盈利 网页制作 网页特效 建站素材 免费资源 QQ频道
  当前位置:首 页 >> 网页制作 >> Javascript/Ajax >> 使用AJAX技术实现网页无闪自动局部刷新

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

  发布于2007-08-22 11:03 来源:网海拾贝

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

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

实例解决问题:

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

实现思路:

1.首页部分:< body onload="init('<%=ses_userBean.getUsername()%>');"> // 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技术实现网页无闪自动局部刷新”更多相关内容



上一篇:实例制作:右下角弹出类似QQ或MSN消息提示
下一篇:在页面中动态载入外部javascript
最近更新 赞助商
·javascript实现图片放大镜效果12-30
·图片代替提交和重置按钮12-11
·JavaScript教程:图片切割效果12-10
·JavaScript动态加载CSS的三种方法12-02
·JavaScript语言中的Literal Syntax特性12-02
·JavaScript模仿Apache的ObjectPool12-02
·关于JavaScript的执行域,标识符解析,闭包..12-02
·Javascript教程:拖拽效果研究12-01
·浏览器对Cookie的限制11-10
·JavaScript中的排序函数sort10-28
·初学Javascript的总结10-24

共有评论 0 条 网友评分 0分 查看所有评论


发表评论→ 学而不思则罔,思而不学则殆,请大胆发表你的见解。

输验证码:

您对此篇文章的评分:1分 2分 3分 4分 5分

  • 站内搜索
关键词

搜索方式

搜索范围

精确匹配
Baidu
网站首页 - 关于本站 - 网站地图 - 广告合作 - 站点声明 - RSS订阅 - 联系我们
Copyright © 2005 网海拾贝.[新ICP备05003216号]. All Rights Reserved .