运用AJAX实现右下角弹出提示框

1. //定义XMLHttp实例   
2. var xmlHttp;   
3. createXMLHttpRequest(){   
4. //开始初始化XMLHttpRequest对象   
5.   if(ActiveXObject){   
6. //IE浏览器   
7.     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

•   }else if(XMLHttpRequest){   
• //Mozilla浏览器   
•     xmlHttp = new XMLHttpRequest();   
•   }   
• if(xmlHttp){   
•     //设置请求地址   
•     xmlHttp.open("GET","message.do?cmd=get",true);   
•     xmlHttp.onreadystatechange=setState;//设置回调函数   
•     xmlHttp.send(null);   
•   }   
• }   
• //回调函数   
• setState(){   
•   if(xmlHttp.readyState == 4){   
•     if(xmlHttp.status == 200){   
•         parseResults(xmlHttp.responseXML)   
•     }   
•   }   
• }    
• /*处理XML*/   
• parseResults(xmlDOM) {   
• try{   
• var root = xmlDOM.documentElement;    
• var info = root.getElementsByTagName('message');   
• var out  = "";   
• var message = null;   
• var current = null;   
•        for(var i=0;i<info.length;i++){   
•             message = info[i];   
•                         id    = message.getElementsByTagName("id")[0].firstChild.data;   
•                         title = message.getElementsByTagName("title")[0].firstChild.data;   
•               outout=out+(i+1)+"."+"<a style=\"font-size:12px; color: #6D93C8; face: Tahoma\" title='内容提要：\n"   
•               +title   
•               +"\n时间："   
•               +title   
•               +"'"+" href=# >"   
•               +title   
•               +"</a><BR>";   
•            }    
•       popmsg("<BR>"+out);   
•   }catch(exception){   
• //     alert("出错了！");   
•     }    
• }   
•   
• /*右下角提示框*/   
• var oPopup = window.createPopup();   
• var popTop=50;   
• popshow(){   
• oPopup.show(screen.width-250,screen.height-popTop,241,172);   
• }   
• pophide(){   
• oPopup.hide();   
• }   
• popmsg(msgstr){   
•   
•     var winstr="<table  valign=\"top\" style=\"border: 1 solid #6D93C8\" width=\"241\" height=\"172\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" >";   
•     winstr+="<tr><td bgcolor=\"#BCCCDF\" =\"parent.pophide();\" valign=\"top\" align=\"center\"  height=\"20\" style=\"font-size:14px; color: #6D93C8; face: Tahoma;filter:Blur(add=1,direction=45,strength=8) \">你有新短消息：</td></tr><tr><td valign=\"top\" align=\"center\"><table valign=\"top\" width=\"90%\" height=\"110\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";   
•     winstr+="<tr><td valign=\"top\" style=\"font-size:12px; color: #6D93C8; face: Tahoma\">"+msgstr+"</td></tr></table></td></tr></table>";   
•        
•     oPopup.body.innerHTML = winstr;   
•     popshow();   
•     setInterval('focus()',0); //让IE重获取焦点    
•        
• }   
•   
• /*提示间隔时间*/   
• var secs=5;//第一次提示时间秒   
•      checkServer(secs){   
•     for(i=1;i<=secs;i++) {   
•      setTimeout("update(" + i + ")", i * 1000);   
•     }   
•     }   
•      update(num) {   
•      if(num == secs) {   
•       createXMLHttpRequest();   
•       secs=1*60;//提示时间秒   
•       for(i=1;i<=secs;i++) {   
•      setTimeout("update(" + i + ")", i * 1000);   
•     }   
•      }   
•     else {   
•      printnr = secs-num;   
•      }   
•     }   
• checkServer(secs);  

<>render_code();

 

请求的XML内容

代码

 

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <messages>  
3.     <message>  
4.         <id>001</id>  
5.         <title>通知你今天来开会</title>  
6.     </message>  
7. </messages> 

<>render_code();
如果XML要动态生成则用下面代码

代码

 

1. <%@ page import="java.util.List,com.sunflower.model.Message" contentType="text/xml;charset=utf-8"%>  
2. <%   
3.     response.setContentType("text/xml");   
4.     response.setHeader("Cache-Control", "no-cache");   
5.     List list = (List)request.getAttribute("messages");   
6.        
7.     out.println("<messages>");   
8.     if(list!=null)   
9.     for(int i=0;i<list.size();i++){   
10.         Message objM = (Message)list.get(i);   
11.         out.println("<message>");   
12.         out.println("<id>"+objM.getId()+"</id>");   
13.         out.println("<title>"+objM.getTitle()+"</title>");   
14.         out.println("</message>");   
15.     }   
16.     out.println("</messages>");   
17. %> 

<>render_code();

 

HTML文件内容

代码

 

1. <html>  
2. <head>  
3. < http-equiv="Content-Type" content="text/html; charset=gb2312" />  
4. <title>右下角弹出提示</title>  
5. </head>  
6. < type="text/java" src="ajax.js"></>  
7. <body>  
8. <input type="button" ="createXMLHttpRequest()" ="测试请求" />  
9. <div id="contain"></div>  
10. </body>  
11. </html>