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

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

AjaxXMLIEFirefox浏览器 
阅读更多
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>



分享到：
| 用Java实现PDF报表
评论
8 楼 keyboard2000 2007-08-24  
ye_jinghua 写道
xmlHttp.responseText是以文本方式获取反回的内容
xmlHttp.responseXML 是以XML对象的方式获取
对象用alert(xmlHttp.responseXML);只能显示为[Object]

这个我知道啊,但是我的意思是var root = xmlDOM.documentElement;
root的值都为null了,下面的式子var info = root.getElementsByTagName('message');
就提示出错啦,因为root对象为null啊!
7 楼 ye_jinghua 2007-08-24  
xmlHttp.responseText是以文本方式获取反回的内容
xmlHttp.responseXML 是以XML对象的方式获取
对象用alert(xmlHttp.responseXML);只能显示为[Object] 
//从XML对象中获取根元素
var root = xmlDOM.documentElement; 
//取XML对象中的所有message节点
var info = root.getElementsByTagName('message');
6 楼 zyp731 2007-08-24  
还不错，我不喜欢用xml，用json更好一些。
5 楼 keyboard2000 2007-08-23  
我用xmlHttp.open("GET","message.xml",true);
用alert(xmlHttp.responseText)可以得到XML内容,但是xmlHttp.responseXML就得不到内容
而且alert(xmlHttp.responseXML.documentElement)值为null,如果再取标签的具体内容的话就有错误(对象为空或不支持该方法),为什么啊....
4 楼 ye_jinghua 2007-08-23  
程序是可以正常运行的 
xmlHttp.open("GET","message.do?cmd=get",true);

把 message.do?cmd=get 换成一个可以通可ＵＲＬ访问XML的路径如http://127.0.0.1:8080/messages.xml 即可看到效果
3 楼 giianhui 2007-08-23  
这个程序有问题吗?
2 楼 keyboard2000 2007-08-22  
message.getElementsByTagName("id")[0].firstChild.data
为什么取不了值啊
1 楼 keyboard2000 2007-08-22  
message.getElementsByTagName("id")[0].firstChild.data
为什么取不了值啊
发表评论

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

相关推荐

    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("这是...

    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等实时通信技术。 首先，我们要理解这个功能的核心需求：当有新...

    jquery右下角自动弹出可关闭的广告层

    2. 右下角自动弹出的广告层实现：在页面的右下角显示一个弹出层是一种常见的页面元素展示方式，常用于展示广告、通知或者其他提示信息。该弹出层是通过HTML、CSS和jQuery结合使用来实现的。HTML定义了页面结构，CSS...

Magicbox
Global site tag (gtag.js) - Google Analytics