Ajax实现网页无闪自动局部刷新(邮件接收提示)

原创 2015年07月07日 23:16:47


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=" ";
checkresult=1;
}
else{//判断为真
test1.innerHTML="<img alt='新邮件' src='img/tp024.gif'><EMBED src='music/nudge.wma' hidden=true autostart=true loop=false>";
checkresult=0;
}
}
}

3、check_mail.jsp用于处理科幻段发送上来的请求,并返回对数据库查询得到的结果,有加过返回0,无结果返回1.
<%@ 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.prepareStatement("select * from message
where r_name= '"+user+"' and status=0");
//查询SQL语句
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>插入指定位置。


5、数据库部分,数据库连接部分:略

得到效果如图5-6所示。

 

5-6  图片自动刷新





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=" ";
checkresult=1;
}
else{//判断为真
test1.innerHTML="<img alt='新邮件' src='img/tp024.gif'><EMBED src='music/nudge.wma' hidden=true autostart=true loop=false>";
checkresult=0;
}
}
}

3、check_mail.jsp用于处理科幻段发送上来的请求,并返回对数据库查询得到的结果,有加过返回0,无结果返回1.
<%@ 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.prepareStatement("select * from message
where r_name= '"+user+"' and status=0");
//查询SQL语句
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>插入指定位置。


5、数据库部分,数据库连接部分:略

得到效果如图5-6所示。

 

5-6  图片自动刷新


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=" ";
checkresult=1;
}
else{//判断为真
test1.innerHTML="<img alt='新邮件' src='img/tp024.gif'><EMBED src='music/nudge.wma' hidden=true autostart=true loop=false>";
checkresult=0;
}
}
}

3、check_mail.jsp用于处理科幻段发送上来的请求,并返回对数据库查询得到的结果,有加过返回0,无结果返回1.
<%@ 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.prepareStatement("select * from message
where r_name= '"+user+"' and status=0");
//查询SQL语句
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>插入指定位置。


5、数据库部分,数据库连接部分:略

得到效果如图5-6所示。

 

5-6  图片自动刷新

版权声明:本文为博主原创文章,未经博主允许不得转载。

goahead 利用ajax实现局部刷新

From: http://blog.csdn.net/seuge/article/details/8209685 ajax “Asynchronous JavaScript and X...
  • ccwwff
  • ccwwff
  • 2013年05月20日 10:46
  • 3969

两种定时刷新局部页面的方法--采用异步流程

一、采用jQuery的ajax方法 function reloadView(){ $.ajax({ url:'${oneway}/...
  • u010688587
  • u010688587
  • 2016年11月14日 11:17
  • 2583

AJAX实现局部刷新

AJAX大家耳濡目染,它是个非常强大的东西。今天我就在这里写一些比较实在的东西,希望能够帮助到一些人~~~   虽然AJAX是very strong的,但是呢,它也是有使用范围的,我这里交...
  • WB1224678
  • WB1224678
  • 2017年01月12日 21:23
  • 1707

Ajax实现页面局部刷新

直接看代码吧!!!!!!!!! 页面中的js代码 //ajax局部加载页面 function sortInfo(id,type){ $.get('${base}/artGallery/ar...
  • u013126379
  • u013126379
  • 2016年09月19日 18:56
  • 2821

AJAX的原理-如何做到异步和局部刷新

Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新。那么XMLHttpRequest的onReadyStateChang...
  • fyxxq
  • fyxxq
  • 2014年03月26日 23:19
  • 33804

JS AJAX实现页面局部刷新~~~~

http://apps.hi.baidu.com/share/detail/34363149 AJAX大家耳濡目染,它是个非常强大的东西。今天我就在这里写一些比较实在的东西,希望能够帮助到一些人...
  • IT_LOSER
  • IT_LOSER
  • 2016年11月10日 09:56
  • 4412

struts-ajax实现局部刷新分页

struts-ajax实现局部刷新分页
  • Javacghv
  • Javacghv
  • 2015年07月29日 23:06
  • 621

利用ajax和JSP技术实现网页中表单的局部刷新(只刷新表单数据,而不刷新整个页面)

在web开发中有时有局部刷新的需求,这样做的好处是克服了页面整体刷新对网络速度受限的情况。 1.MySQL数据表如下(简单举例): 表名:stu_info stuId               ...
  • Hadas_Wang
  • Hadas_Wang
  • 2015年08月12日 14:48
  • 5502

分页处理,使用ajax局部刷新列表

第一个jsp页面加载初始资源 第二个jsp页面处理分页 分页展示简历列表 第一个jsp页面加载初始资源,并且页面一加载请求服务端加载第一页数据 ...
  • qq_35661734
  • qq_35661734
  • 2016年09月19日 16:48
  • 3096

在SSH框架下实现jsp页面的局部刷新(ajax)

在SSH框架下实现jsp页面的局部刷新(ajax)第一种方法:jsp中代码为 对应的js: var xmlhttp; function loadXMLDoc(url) { xmlhtt...
  • SXT_fighting
  • SXT_fighting
  • 2017年07月21日 11:40
  • 620
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax实现网页无闪自动局部刷新(邮件接收提示)
举报原因:
原因补充:

(最多只允许输入30个字)