注册 登录
编程论坛 jQuery论坛

[转载]运用AJAX实现右下角弹出提示框 示例

野蛮女人 发布于 2007-09-05 18:38, 3758 次点击


//定义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内容


<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<messages>
    <message>
        <id>001</id>
        <title>通知你今天来开会</title>
    </message>
</messages>

如果XML要动态生成则用下面代码

<%@ 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>\");
%>

5 回复
#2
野蛮女人2007-09-05 18:38

<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<title>右下角弹出提示</title>
</head>
<script type=\"text/javascript\" src=\"ajax.js\"></script>
<body>
<input type=\"button\" onclick=\"createXMLHttpRequest()\" value=\"测试请求\" />
<div id=\"contain\"></div>
</body>
</html>

#3
哭泣的狼2007-09-24 13:38
版主,不行呀!!试了一下,不能使用!!!这是我的QQ:460089216 ,我们用QQ聊
#4
哭泣的狼2007-09-24 14:27
版主,你那个【"message.do?cmd=get"】,是不是处理数据的页面,还是什么呀,在应该怎么去理解和写呀,求救!!!!
#5
qqqqqqq3332007-12-20 20:49
我调试试下,谢谢版主
#6
beniao2008-03-18 01:35
这个太复杂了吧
  有直接的控件可以使用的
详细可以看我的博客里有写文章和示例代码
http://
1