|
锁定老帖子 主题：运用AJAX实现右下角弹出提示框 示例
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-08-20
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> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2007-08-22
message.getElementsByTagName("id")[0].firstChild.data
为什么取不了值啊 |
| 返回顶楼 | |
|
发表时间：2007-08-22
message.getElementsByTagName("id")[0].firstChild.data
为什么取不了值啊 |
| 返回顶楼 | |
|
发表时间：2007-08-23
这个程序有问题吗?
|
| 返回顶楼 | |
|
发表时间：2007-08-23
程序是可以正常运行的
xmlHttp.open("GET","message.do?cmd=get",true);
把 message.do?cmd=get 换成一个可以通可ＵＲＬ访问XML的路径如http://127.0.0.1:8080/messages.xml 即可看到效果 |
| 返回顶楼 | |
|
发表时间：2007-08-23
我用xmlHttp.open("GET","message.xml",true);
用alert(xmlHttp.responseText)可以得到XML内容,但是xmlHttp.responseXML就得不到内容 而且alert(xmlHttp.responseXML.documentElement)值为null,如果再取标签的具体内容的话就有错误(对象为空或不支持该方法),为什么啊.... |
| 返回顶楼 | |
|
发表时间：2007-08-24
还不错，我不喜欢用xml，用json更好一些。
|
| 返回顶楼 | |
|
发表时间：2007-08-24
xmlHttp.responseText是以文本方式获取反回的内容
xmlHttp.responseXML 是以XML对象的方式获取 对象用alert(xmlHttp.responseXML);只能显示为[Object]
//从XML对象中获取根元素
var root = xmlDOM.documentElement;
//取XML对象中的所有message节点
var info = root.getElementsByTagName('message');
|
| 返回顶楼 | |
|
发表时间：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啊! |
| 返回顶楼 | |
|
发表时间：2007-08-24
第一次用ajax,表面看来又不难学,就是第一测试就不能通过,郁闷
|
| 返回顶楼 | |
