`
ye_jinghua
  • 浏览: 31791 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

阅读更多
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>



分享到:
评论
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,表面看来又不难学,就是第一测试就不能通过,郁闷

相关推荐

    Jquery 右下角弹出信息框

    标题“Jquery 右下角弹出信息框”指的是利用jQuery来实现一种常见且实用的用户界面功能:在网页的右下角动态显示信息提示框。这种功能广泛应用于通知用户、展示消息或提供交互反馈。 首先,要实现这个功能,我们...

    jquery右下角弹出框

    标题中的“jQuery右下角弹出框”是指在网页中使用jQuery库实现一个在页面右下角弹出的通知或提示框的功能。这种功能通常用于显示系统消息、更新通知或者用户交互反馈。jQuery是一个广泛使用的JavaScript库,它简化了...

    网页定时刷新(Ajax)并在右下角弹出提示窗口

    接下来,我们讨论如何在右下角弹出提示窗口。这通常通过JavaScript或者CSS来实现,可以结合AjaxPro的数据返回来决定何时显示提示。例如,当服务器返回特定的状态或信息时,我们可以使用以下代码创建一个弹出框: ``...

    jquery插件(网页右下角弹出窗口)

    在网页设计中,有时我们需要实现一些交互功能,如向用户展示重要通知、提示信息或者广告,这时网页右下角弹出窗口的功能就显得尤为重要。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果...

    页面右下角弹出窗口

    在网页设计中,有时我们需要在用户浏览页面时,在右下角弹出一些提示信息或交互窗口,这可以增强用户体验,提供必要的反馈或者引导。在这个场景中,我们可以利用JavaScript库jQuery来实现这一功能,特别是对于支持...

    jQuery插件之-右下角弹出提示窗体popMessage

    本文将深入探讨jQuery插件“右下角弹出提示窗体popMessage”,该插件允许开发者在网页的右下角创建动态、吸引用户的提示窗口,常用于通知、警告或用户反馈。 首先,我们来理解一下jQuery插件的基本概念。jQuery插件...

    JS右下角弹出浮动提示框特效.zip

    "JS右下角弹出浮动提示框特效.zip" 提供了一种实用的方法,能够帮助开发者在页面上实现这种功能。这个特效代码利用了JavaScript(JS)的动态特性,结合jQuery库,以及CSS样式来创建一个位于屏幕右下角的浮动提示框。...

    页面右下角弹出消息提示框类似QQ或者MSN+ASP.NET

    在ASP.NET开发中,创建一个类似QQ或MSN的页面右下角弹出消息提示框功能,可以提升用户体验,使得信息传递更加直观和即时。要实现这样的功能,我们需要掌握以下几个核心知识点: 1. **AJAX技术**:由于弹出提示框...

    可关闭的jQuery右下角浮动提示框窗口代码

    "可关闭的jQuery右下角浮动提示框窗口代码"是一个实现这一目标的有效工具。这个代码库提供了一种方式,可以在用户界面的右下角创建一个可浮动、可关闭的提示窗口,用于显示通知、更新或重要信息。这种设计模式在现代...

    类似QQ右下角弹出消息效果

    在IT行业中,创建类似QQ右下角弹出消息的效果是一项常见的任务,特别是在开发桌面应用程序时。这个效果通常被称为“消息提示框”或“通知气泡”,它能够在不影响用户当前操作的情况下,快速向用户传递信息。以下是...

    jquery仿照qq右下角提示框

    【jQuery仿照QQ右下角提示框】是一种常见的前端交互设计,它利用JavaScript库jQuery实现类似QQ客户端那种在页面右下角弹出的通知或提示效果。这种提示框通常用于显示系统消息、用户通知或者简单的反馈信息,具有较高...

    jquery js 效果,弹出提示框

    本教程将详细讲解如何利用jQuery实现一个类似Discuz论坛系统的右下角弹出提示框效果。 首先,让我们理解jQuery的核心概念。jQuery库通过一个简洁的语法,使得DOM操作变得简单易行。例如,`$(selector).action()`...

    as.net页面右下角消息提示.

    以下将详细介绍如何在ASP.NET页面中实现右下角消息提示功能。 1. **JavaScript库与CSS框架** 在实现此功能时,可以利用JavaScript库(如jQuery)和CSS框架(如Bootstrap)来创建动态效果。Bootstrap提供了便捷的`...

    Web弹出框实例

    本实例将深入探讨如何使用JavaScript实现Web弹出框,并提供相关代码示例。 一、JavaScript弹出框基本类型 1. `alert()`:显示警告对话框,通常包含一条消息和一个“确定”按钮。例如: ```javascript alert("这是...

    asp.net 右下角弹出消息对话框

    在ASP.NET开发中,有时我们需要实现一种用户交互功能,即在网页右下角弹出消息对话框,这种效果类似于常见的热点提示或者通知。这通常是为了向用户传达一些关键信息,如操作成功、警告或者错误提示,而不打断用户的...

    ajax实现弹出窗口代码大全

    本文将详细解析如何利用AJAX技术实现各种弹出窗口效果,帮助开发者更好地理解和应用这些技巧。 #### 基本原理:`window.open`方法 在HTML和JavaScript中,`window.open()`方法是最常用的创建新窗口或弹出窗口的...

    javascript实现简单的页面右下角提示信息框

    通过以上这些知识点的学习和理解,我们可以更好地掌握如何使用JavaScript来实现页面右下角的提示信息框,并能够根据实际需要进行相应的调整和扩展。在实际开发中,还需要考虑到不同浏览器的兼容性问题,确保提示框在...

    jQuery右下角弹出提示框特效代码

    本文将详细解析"jQuery右下角弹出提示框特效代码"的相关知识点,帮助你理解和实现此类功能。 首先,让我们理解标题中的核心概念——"jQuery右下角弹出提示框"。这是一种常见的用户界面设计,用于向用户显示通知或...

    Csdn网站右下角的滑出弹出提示(带关闭功能)

    内容索引:脚本资源,Ajax/JavaScript,右下角,弹出窗口 搞技术的人经常会去Csdn网站,一个开发者集中营,里面高手如云,因此CSdn的网站本身当然也不差劲,这个右下角弹出提示框就是来自CSdn网站,很漂亮的提示框,右...

    asp.net类似QQ,MSN,邮箱右下角消息提示,定时访问数据库。

    在ASP.NET中实现类似QQ、MSN或邮箱右下角的消息提示功能,主要是通过实时更新用户界面来提供即时反馈,这通常涉及到AJAX技术、Web Socket、SignalR等实时通信技术。 首先,我们要理解这个功能的核心需求:当有新...

Global site tag (gtag.js) - Google Analytics