zoukankan      html  css  js  c++  java

  • 运用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
  • 相关阅读:
    Unity3d for beginners
    iOS 8 swift 键盘不出来 ios 8 uitextfield keyboard not appearing
    关于Cookie跨域的问题
    45种Javascript技巧大全
    新.Net架构必备工具列表
    .NET中的六个重要概念：栈、堆、值类型、引用类型、装箱和拆箱
    ASP.NET 大文件下载的实现思路及代码
    理解 .NET 2015
    转：我是否该放弃VB.Net?
    .net中的一般处理程序实例
  • 原文地址：https://www.cnblogs.com/Godblessyou/p/1779027.html
Copyright © 2011-2022 走看看