创建面向对象的Javascript实现Ajax访问QQ留言板
2009-09-28 10:58
393 查看
标题不恰当说明一个问题，功力不深。希望对大家有所帮助，以下代码未采用Jquery，完全JS代码实现用贯了Jquery你还会用手写的Ajax吗？实现效果：[ 关注实现，效果轻描淡写]
刚刚补上的，发布到网上的,
(rsion.com,锐讯,巴中广州佛山成都网站建设,newmin,new.min,new.min@msn.com,newmin.net,巴中网站建设tel:18608275575锐讯)
http://qq.rsion.com/msg/959398298你的QQ号码
Code
/*************************
* Description : QQ空间留言板获取信息模块
* Author : Sonven
* Create : 2009-09-27
* Modify : 2009-09-27
***************************/
function QQLeaveMessage(qq, pageIndex,pageSize) {
this.qq = qq;
pageIndex = pageIndex == null || pageIndex < 1 ? 1 : pageIndex; //当前页数
pageSize = pageSize == null || pageSize < 0 ? 10 : pageSize; //每页大小
this.start = (pageIndex - 1) * pageSize; //获取开始条数
if (this.start == 0) this.start = 1;
this.num = pageSize; //获取每页数量
//MessageCountInfo
this.totalNum = 0;
this.currentDisplayNum = 0;
this.title = qq + "的留言板";
this.description = null;
this.authorsign = null;
this.messageContent = null;
}
QQLeaveMessage.prototype.receive = function(callback) {
var returnMsg = "查询不到你的留言信息!";
var requestUri = "http://m.qzone.qq.com/cgi-bin/new/msgb_page.cgi?uin=" + this.qq + "&archive=0&start=" + this.start + "&num=" + this.num;
requestUri = "x.xml"; //这里替换了数据地址为本地文件，实际操做应该删除此行
var s = new XMLHttpRequestObject("GET", "XML", requestUri, {});
s.request(function(x) {
//此时返回的对象与XMLHttpRequestObject的返回类型一致
var channel = x.getElementsByTagName("channel")[0];
this.totalNum = channel.getAttribute("totalNum"); //共有条数
this.title = channel.childNodes[0].text; //标题
this.description = channel.childNodes[1].text; //Description
this.authorsign = channel.childNodes[2].text; //Authorsign
var msgNodes = channel.getElementsByTagName("item");
this.currentDisplayNum = msgNodes.length; //Current Display Num
var msgHtml = ""; //Temp message html
var c = null; //Temp child node
var cs = null; //Temp child node's comment nodes
var scs = null; //one of temp child node's comment nodes
var authorID; //The id of leave message author
var authorName; //The name of leave message author
for (var i = 0; i < msgNodes.length; i++) {
c = msgNodes[i];
authorID = c.getAttribute("uin");
authorName = c.getElementsByTagName("author")[0].text;
msgHtml += "<li><div class='msgTop'>第" + (i + 1) + "条,留言编号:" + c.getAttribute("answerid") + "发表于:" +
c.getElementsByTagName("pubDate")[0].text + "</div><div class='msgTitle'>" +
authorName + "[" + authorID + "]<br/>" +
"<span class='title'>" + c.getElementsByTagName("title")[0].text + "</span></div>";
//分析回复信息
cs = c.getElementsByTagName("comment");
for (var j = 0; j < cs.length; j++) {
scs = cs[j];
msgHtml += "<div class='msgComment'>" +
(scs.getAttribute("uin") == authorID ? authorName : "空间主人回复:") +
scs.text+"</div>";
}
msgHtml += "</li>";
}
this.messageContent = "<ul>" + msgHtml + "</ul>"; //return message items html
callback(this); //调用回调函数
});
}
大功告成就差最后一部显示出来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ViewLevMsg</title>
<style type="text/css">
body{font-size:12px;}
#MessageContent{border:solid 1px silver;width:400px;}
#MessageContent ul{list-style:none;margin:0 5px;padding:0;}
#MessageContent ul li{border:solid 1px #f0f0f0;margin:5px 0;padding:2px 5px;}
.msgTop{background:#f0f0f0;line-height:20px;}
.msgTitle{background:gold;}
.msgComment{background:white;}
</style>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="qq.modules.LeaveMessage.js"></script>
</head>
<body>
<div>
<div id="title"></div>
<div>
<span id="totalNum"></span>
</div>
<div id="description"></div>
<div id="authorsign"></div>
<div id="MessageContent"></div>
<script>
$get("MessageContent").innerHTML = "<ul><li>正在获取数据!</li></ul>";
var r = new QQLeaveMessage("959398298", 1, 10);
r.receive(function(t) {
$get("title").innerHTML = "现在显示的是QQ:" + t.title;
$get("totalNum").innerText = "共有" + t.totalNum + "条,当前显示"+t.currentDisplayNum+"条";
$get("description").innerHTML = t.description;
$get("authorsign").innerHTML = t.authorsign;
$get("MessageContent").innerHTML = t.messageContent;
});
</script>
</div>
</body>
</html>
(rsion.com,锐讯,巴中广州佛山成都网站建设,newmin,new.min,new.min@msn.com,newmin.net,巴中网站建设tel:18608275575锐讯)
实现大概就如同上面了，但还有问题就是不能跨域进行异步操作
我采用的是利用webrequest来获取数据在本地生成xml文件，这样就不存在跨域的问题了!
准备把其他的功能都做上，放在这个地址http://www.rsion.com/ 上面！
刚刚补上的，发布到网上的,
(rsion.com,锐讯,巴中广州佛山成都网站建设,newmin,new.min,new.min@msn.com,newmin.net,巴中网站建设tel:18608275575锐讯)
http://qq.rsion.com/msg/959398298你的QQ号码
Code
/*************************
* Description : QQ空间留言板获取信息模块
* Author : Sonven
* Create : 2009-09-27
* Modify : 2009-09-27
***************************/
function QQLeaveMessage(qq, pageIndex,pageSize) {
this.qq = qq;
pageIndex = pageIndex == null || pageIndex < 1 ? 1 : pageIndex; //当前页数
pageSize = pageSize == null || pageSize < 0 ? 10 : pageSize; //每页大小
this.start = (pageIndex - 1) * pageSize; //获取开始条数
if (this.start == 0) this.start = 1;
this.num = pageSize; //获取每页数量
//MessageCountInfo
this.totalNum = 0;
this.currentDisplayNum = 0;
this.title = qq + "的留言板";
this.description = null;
this.authorsign = null;
this.messageContent = null;
}
QQLeaveMessage.prototype.receive = function(callback) {
var returnMsg = "查询不到你的留言信息!";
var requestUri = "http://m.qzone.qq.com/cgi-bin/new/msgb_page.cgi?uin=" + this.qq + "&archive=0&start=" + this.start + "&num=" + this.num;
requestUri = "x.xml"; //这里替换了数据地址为本地文件，实际操做应该删除此行
var s = new XMLHttpRequestObject("GET", "XML", requestUri, {});
s.request(function(x) {
//此时返回的对象与XMLHttpRequestObject的返回类型一致
var channel = x.getElementsByTagName("channel")[0];
this.totalNum = channel.getAttribute("totalNum"); //共有条数
this.title = channel.childNodes[0].text; //标题
this.description = channel.childNodes[1].text; //Description
this.authorsign = channel.childNodes[2].text; //Authorsign
var msgNodes = channel.getElementsByTagName("item");
this.currentDisplayNum = msgNodes.length; //Current Display Num
var msgHtml = ""; //Temp message html
var c = null; //Temp child node
var cs = null; //Temp child node's comment nodes
var scs = null; //one of temp child node's comment nodes
var authorID; //The id of leave message author
var authorName; //The name of leave message author
for (var i = 0; i < msgNodes.length; i++) {
c = msgNodes[i];
authorID = c.getAttribute("uin");
authorName = c.getElementsByTagName("author")[0].text;
msgHtml += "<li><div class='msgTop'>第" + (i + 1) + "条,留言编号:" + c.getAttribute("answerid") + "发表于:" +
c.getElementsByTagName("pubDate")[0].text + "</div><div class='msgTitle'>" +
authorName + "[" + authorID + "]<br/>" +
"<span class='title'>" + c.getElementsByTagName("title")[0].text + "</span></div>";
//分析回复信息
cs = c.getElementsByTagName("comment");
for (var j = 0; j < cs.length; j++) {
scs = cs[j];
msgHtml += "<div class='msgComment'>" +
(scs.getAttribute("uin") == authorID ? authorName : "空间主人回复:") +
scs.text+"</div>";
}
msgHtml += "</li>";
}
this.messageContent = "<ul>" + msgHtml + "</ul>"; //return message items html
callback(this); //调用回调函数
});
}
大功告成就差最后一部显示出来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ViewLevMsg</title>
<style type="text/css">
body{font-size:12px;}
#MessageContent{border:solid 1px silver;width:400px;}
#MessageContent ul{list-style:none;margin:0 5px;padding:0;}
#MessageContent ul li{border:solid 1px #f0f0f0;margin:5px 0;padding:2px 5px;}
.msgTop{background:#f0f0f0;line-height:20px;}
.msgTitle{background:gold;}
.msgComment{background:white;}
</style>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="qq.modules.LeaveMessage.js"></script>
</head>
<body>
<div>
<div id="title"></div>
<div>
<span id="totalNum"></span>
</div>
<div id="description"></div>
<div id="authorsign"></div>
<div id="MessageContent"></div>
<script>
$get("MessageContent").innerHTML = "<ul><li>正在获取数据!</li></ul>";
var r = new QQLeaveMessage("959398298", 1, 10);
r.receive(function(t) {
$get("title").innerHTML = "现在显示的是QQ:" + t.title;
$get("totalNum").innerText = "共有" + t.totalNum + "条,当前显示"+t.currentDisplayNum+"条";
$get("description").innerHTML = t.description;
$get("authorsign").innerHTML = t.authorsign;
$get("MessageContent").innerHTML = t.messageContent;
});
</script>
</div>
</body>
</html>
(rsion.com,锐讯,巴中广州佛山成都网站建设,newmin,new.min,new.min@msn.com,newmin.net,巴中网站建设tel:18608275575锐讯)
实现大概就如同上面了，但还有问题就是不能跨域进行异步操作
我采用的是利用webrequest来获取数据在本地生成xml文件，这样就不存在跨域的问题了!
准备把其他的功能都做上，放在这个地址http://www.rsion.com/ 上面！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用ASP.Net创建代理实现Javascript跨域访问
- ASP.NET(C#)AJAX+JAVASCRIPT实现类似QQ,MSN窗口之功能(续)
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- 在html里面用javascript实现ajax请求访问servlet
- 动态创建表格js文件,javascript，Ajax，DHTML动态实现表格的创建，动态读取XML中的文件，读取dom节点的例子。
- javascript面向对象中的对象创建、继承、封装等实现方式
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- 用 AJax 技术实现 JavaScript 访问服务器端方法
- javascript和ajax的跨域访问实现
- 用创建XMLHttpRequest对象与jQuery框架对文本为HTTP、JSON、XML的ajax实现比较
- javascript入门·Document对象入门讲解(访问表单，创建新页，获取页标题)
- AJAX之旅(2)：javascript中类的深入研究－实现和继承
- 搜索建议--AJAX （ASP.NET 异步完成）javascript 实现代码
- [转载MSDN]JavaScript使用面向对象的技术创建高级 Web 应用程序
- 如何实现ajax+asp.net 的留言板
- javascript和jQuery实现网页实时聊天的ajax长轮询
- JavaScript面向对象中的属性，对象创建，继承
- JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
- Javascript与asp.net 实现Ajax多文件无刷新上传【转】