使用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 >插入指定位置。