運用AJAX實現右下角彈出提示框樣本

關鍵字: 提示框 樣本 彈出框

JS檔案內容 Java代碼

1. //定義XMLHttp執行個體   
2. var xmlHttp;   
3. function createXMLHttpRequest(){   
4. //開始初始化XMLHttpRequest對象   
5.   if(window.ActiveXObject){   
6. //IE瀏覽器   
7.     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
8.   }else if(window.XMLHttpRequest){   
9. //Mozilla瀏覽器   
10.     xmlHttp = new XMLHttpRequest();   
11.   }   
12. if(xmlHttp){   
13.     //佈建要求地址   
14.     xmlHttp.open("GET","message.do?cmd=get",true);   
15.     xmlHttp.onreadystatechange=setState;//設定回呼函數   
16.     xmlHttp.send(null);   
17.   }   
18. }   
19. //回呼函數   
20. function setState(){   
21.   if(xmlHttp.readyState == 4){   
22.     if(xmlHttp.status == 200){   
23.         parseResults(xmlHttp.responseXML)   
24.     }   
25.   }   
26. }    
27. /*處理XML*/  
28. function parseResults(xmlDOM) {   
29. try{   
30. var root = xmlDOM.documentElement;    
31. var info = root.getElementsByTagName('message');   
32. var out  = "";   
33. var message = null;   
34. var current = null;   
35.        for(var i=0;i<info.length;i++){   
36.             message = info[i];   
37.                         id    = message.getElementsByTagName("id")[0].firstChild.data;   
38.                         title = message.getElementsByTagName("title")[0].firstChild.data;   
39.               out=out+(i+1)+"."+"<a style=\"font-size:12px; color: #6D93C8; face: Tahoma\" title='內容提要：\n"  
40.               +title   
41.               +"\n時間："  
42.               +title   
43.               +"'"+" href=# >"  
44.               +title   
45.               +"</a><BR>";   
46.            }    
47.       popmsg("<BR>"+out);   
48.   }catch(exception){   
49.  //     alert("出錯了！");   
50.     }    
51. }   
52.   
53. /*右下角提示框*/  
54. var oPopup = window.createPopup();   
55. var popTop=50;   
56. function popshow(){   
57. oPopup.show(screen.width-250,screen.height-popTop,241,172);   
58. }   
59. function pophide(){   
60. oPopup.hide();   
61. }   
62. function popmsg(msgstr){   
63.   
64.     var winstr="<table  valign=\"top\" style=\"border: 1 solid #6D93C8\" width=\"241\" height=\"172\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" >";   
65.     winstr+="<tr><td bgcolor=\"#BCCCDF\" onClick=\"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\">";   
66.     winstr+="<tr><td valign=\"top\" style=\"font-size:12px; color: #6D93C8; face: Tahoma\">"+msgstr+"</td></tr></table></td></tr></table>";   
67.        
68.     oPopup.document.body.innerHTML = winstr;   
69.     popshow();   
70.     setInterval('window.focus()',0); //讓IE重擷取焦點    
71.        
72. }   
73.   
74. /*提示間隔時間*/  
75. var secs=5;//第一次提示時間秒   
76.     function checkServer(secs){   
77.     for(i=1;i<=secs;i++) {   
78.      window.setTimeout("update(" + i + ")", i * 1000);   
79.     }   
80.     }   
81.     function update(num) {   
82.      if(num == secs) {   
83.       createXMLHttpRequest();   
84.       secs=1*60;//提示時間秒   
85.       for(i=1;i<=secs;i++) {   
86.      window.setTimeout("update(" + i + ")", i * 1000);   
87.     }   
88.      }   
89.     else {   
90.      printnr = secs-num;   
91.      }   
92.     }   
93. checkServer(secs);  

//定義XMLHttp執行個體var xmlHttp;function createXMLHttpRequest(){//開始初始化XMLHttpRequest對象  if(window.ActiveXObject){//IE瀏覽器    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  }else if(window.XMLHttpRequest){//Mozilla瀏覽器    xmlHttp = new XMLHttpRequest();  }if(xmlHttp){    //佈建要求地址    xmlHttp.open("GET","message.do?cmd=get",true);    xmlHttp.onreadystatechange=setState;//設定回呼函數    xmlHttp.send(null);  }}//回呼函數function setState(){  if(xmlHttp.readyState == 4){    if(xmlHttp.status == 200){    parseResults(xmlHttp.responseXML)    }  }} /*處理XML*/function 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;  out=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;function popshow(){oPopup.show(screen.width-250,screen.height-popTop,241,172);}function pophide(){oPopup.hide();}function 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\" onClick=\"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.document.body.innerHTML = winstr;popshow();setInterval('window.focus()',0); //讓IE重擷取焦點 }/*提示間隔時間*/var secs=5;//第一次提示時間秒function checkServer(secs){for(i=1;i<=secs;i++) { window.setTimeout("update(" + i + ")", i * 1000);}}function update(num) { if(num == secs) {  createXMLHttpRequest();  secs=1*60;//提示時間秒  for(i=1;i<=secs;i++) { window.setTimeout("update(" + i + ")", i * 1000);} }else { printnr = secs-num; }}checkServer(secs);

請求的XML內容 Java代碼

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

<?xml version="1.0" encoding="UTF-8"?><messages><message><id>001</id><title>通知你今天來開會</title></message></messages>

如果XML要動態產生則用下面代碼 Java代碼

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.  %>  

<%@ page import="java.util.List,com.sunflower.model.Message" contentType="text/xml;charset=utf-8"%><%response.setContentType("text/xml");response.setHeader("Cache-Control", "no-cache");List list = (List)request.getAttribute("messages");out.println("<messages>");if(list!=null)for(int i=0;i<list.size();i++){Message objM = (Message)list.get(i);out.println("<message>");out.println("<id>"+objM.getId()+"</id>");out.println("<title>"+objM.getTitle()+"</title>");out.println("</message>");}out.println("</messages>"); %>

HTML檔案內容 Java代碼

1. <html>   
2. <head>   
3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
4. <title>右下角彈出提示</title>   
5. </head>   
6. <script type="text/javascript" src="ajax.js"></script>   
7. <body>   
8. <input type="button" onclick="createXMLHttpRequest()" value="測試請求" />   
9. <div id="contain"></div>   
10. </body>   
11. </html>  

原帖地址：http://jinghua.javaeye.com/blog/114323