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

最新推荐文章于 2021-08-05 13:49:01 发布

iteye_1300

最新推荐文章于 2021-08-05 13:49:01 发布

阅读量305

点赞数

分类专栏： web开发积累文章标签： Ajax XML IE Firefox 浏览器

web开发积累专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS文件内容
[code]
//定义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);
[/code]

请求的XML内容
[code]
<?xml version="1.0" encoding="UTF-8"?>
<messages>
<message>
<id>001</id>
<title>通知你今天来开会</title>
</message>
</messages>
[/code]
如果XML要动态生成则用下面代码
[code]
<%@ 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>");
%>
[/code]

HTML文件内容
[code]
<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" οnclick="createXMLHttpRequest()" value="测试请求" />
<div id="contain"></div>
</body>
</html>
[/code]