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

ye_jinghua

浏览: 31590 次
性别:
来自: 北京

最近访客更多访客>>

liu6182169

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web开发积累

Ajax XML IE Firefox 浏览器

JS文件内容

//定义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>");
 %>

HTML文件内容

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

Ajax弹出提示070820.rar (2.2 KB)
描述: 完整代码
下载次数: 1926

分享到：

简单封装Ajax | 用Java实现PDF报表

2007-08-20 12:40
浏览 11379
评论(28)
论坛回复 / 浏览 (25 / 23417)
查看更多

28 楼 crabboy 2008-07-18

lz的代码运行不了

27 楼 cliseallen 2008-06-06

我都怀疑你会不会啊，连web.xml都没有还有中间用到的Message类呢，还有jsp页面引入的包都没有个说明，哎不说了，心寒啊......

26 楼 cliseallen 2008-06-06

你是不是在哪里 copy的啊

25 楼 kkikk 2007-10-19

bbiao 写道

呵呵，为什么不用一些框架来简化操作呢？

24 楼 BBZ.DD.A 2007-09-08

Ajax 努力中..

23 楼 chunpeng 2007-09-08

22 楼 bbiao 2007-09-05

呵呵，为什么不用一些框架来简化操作呢？

21 楼 chenhuiwu 2007-09-04

一起学习中

20 楼 kirin 2007-09-03

对了，还有js文件的编码，我遇到过这样的情况js文件的编码不是utf-8的，在ff中可以通过，而ie中不行

kirin 写道

我感觉是因为xml文件的编码,试试统一用"UTF-8",然后.xml文件也要存成UTF-8的格式

keyboard2000 写道

唉,是浏览器的问题了,在FireFox中测试得很顺利,但IE不知道为什么不行,不知道代码有什么不同呢...

19 楼 kirin 2007-09-03

我感觉是因为xml文件的编码,试试统一用"UTF-8",然后.xml文件也要存成UTF-8的格式

keyboard2000 写道

唉,是浏览器的问题了,在FireFox中测试得很顺利,但IE不知道为什么不行,不知道代码有什么不同呢...

18 楼 tvjody 2007-08-29

keyboard2000 写道

唉,是浏览器的问题了,在firefox中测试得很顺利....

你的游览器是什么版本的

17 楼 liuyifan.com 2007-08-28

楼上的，FF下有createPopup么？？

16 楼 keyboard2000 2007-08-26

唉,是浏览器的问题了,在FireFox中测试得很顺利,但IE不知道为什么不行,不知道代码有什么不同呢...

15 楼 keyboard2000 2007-08-26

唉,是浏览器的问题了,在firefox中测试得很顺利....

14 楼 keyboard2000 2007-08-24

		try{
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e){
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

有可能是浏览器问题吧,我试过,我的浏览器是执行xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");的,xmlHttp.status == 200里面的代码没有执行,改成(xmlHttp.status == 0 ||xmlHttp.status == 200)就可以,就是说它的状态从来没有是200...但是这样alert(xmlHttp.responseText)也可以获得xml的内容,就是xmlHttp.responseXML.documentElement的值依旧为空...

PS:你的代码我没有修改的情况下,只修改url为message.xml也不能正确运行,错误为:
行:16
字符:5
代码:0
错误:系统未找到指定的资源。

13 楼 ye_jinghua 2007-08-24

用你的XML也可以正常运行
你先不要改下载的文件[只改那请求地址就行了]

12 楼 keyboard2000 2007-08-24

  
<?xml version="1.0" encoding="gb2312" ?> 
- <NewDateSet>
- <Table>
  <user_id>1</user_id> 
  <user_name>myName</user_name> 
  </Table>
  </NewDateSet>

这是我的xml,用IE打开正常,alert(xmlHttp.responseText)也正常
但alert(xmlHttp.responseXML.documentElement)值为null....
alert(xmlHttp.responseXML.getElementsByTagName("Table").length)值为0

11 楼 keyboard2000 2007-08-24

ye_jinghua 写道

xmlHttp.responseXML 获取到的XML格式不对就是null

嗯,我有注意了,我是用你给的这个xml啊....我都觉得奇怪,我都怀疑xml格式不对,但是又没发现有什么问题....

10 楼 ye_jinghua 2007-08-24

注意XML格式

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

xmlHttp.responseXML 获取到的XML格式不对就是null

9 楼 keyboard2000 2007-08-24

第一次用ajax,表面看来又不难学,就是第一测试就不能通过,郁闷

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论