相忘于江湖

不抛弃,不放弃... 请给我勇敢，改变可以改变的；请给我坚强，接受不可以改变的；请给我智慧，分辨这两者。
  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
运用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);  


请求的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要动态生成则用下面代码
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.  %>  


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

posted on 2010-07-16 16:27  playman0211  阅读(598)  评论(0)  编辑  收藏  举报