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

翻译|其它|编辑:郝浩|2007-08-28 10:55:25.000|阅读 1667 次

概述:

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

JS  文件内容

代码

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.                outout=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  内容

代码

1.      <?xml version="1.0" encoding="UTF-8"?>  

2.      <messages>  

3.          <message>  

4.              <id>001</id>  

5.              <title>通知你今天来开会</title>  

6.          </message>  

7.      </messages>  


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

HTML  文件内容

代码

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>  

 


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:JavaEye

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP