创建面向对象的Javascript实现Ajax访问QQ留言板
题不恰当说明一个问题，功力不深。希望对大家有所帮助，以下代码未采用Jquery，完全JS代码实现用贯了Jquery你还会用手写的Ajax吗?实现效果：[ 关注实现，效果轻描淡写]
刚刚补上的，发布到网上的,你的QQ号码
以下为QQ空间留言板数据文件(xml格式的)
文件名:x.xml
<?xml version="1.0" encoding="gb2312"?>
<rss version="2.0">
<channel totalNum="23" activeNum="23" archive="0" nextArchive="0"><title><![CDATA[959398298的留言板 ]]></title>
<description><![CDATA[ ]]></description>
<authorsign><![CDATA[ ]]></authorsign>
<item answerid="25" archive="0" uin="137569787" effect="32" >
<author><![CDATA[潋滟…嘉欣 ]]></author>
<pubDate>2009-09-24 11:58:10</pubDate>
<title><![CDATA[漂亮的。。。。。全都是我留下的脚印，，，[em]e151[/em] ]]></title>
<description><![CDATA[ ]]></description>
<capacity>1533</capacity>
<comment uin="959398298" time="0"><![CDATA[你娃娃快成名了 ]]></comment>
<category>msgboard</category>
</item>
<item answerid="24" archive="0" uin="137569787" effect="32" >
<author><![CDATA[潋滟…嘉欣 ]]></author>
<pubDate>2009-09-23 18:41:39</pubDate>
<title><![CDATA[臭娃娃、。。。。我踩到你的肩上，我就成了巨人咯[em]e120[/em] 你就是我的垫脚石[em]e120[/em] ]]></title>
<description><![CDATA[ ]]></description>
<capacity>1479</capacity>
<comment uin="959398298" time="0"><![CDATA[不怕绊个扑趴满，摔的鼻青脸肿的。 ]]></comment>
<category>msgboard</category>
</item>
<item answerid="23" archive="0" uin="137569787" effect="32" >
<author><![CDATA[潋滟…嘉欣 ]]></author>
<pubDate>2009-09-22 19:39:59</pubDate>
<title><![CDATA[ 问问好耍不?
还是把你踩到我脚下比较好耍[em]e113[/em] ]]></title>
<description><![CDATA[ ]]></description>
<capacity>1498</capacity>
<comment uin="959398298" time="0"><![CDATA[你玩我[em]e135[/em] ]]></comment>
<category>msgboard</category>
</item>
<item answerid="22" archive="0" uin="137569787" effect="0" >
<author><![CDATA[潋滟…嘉欣 ]]></author>
<pubDate>2009-09-22 10:33:24</pubDate>
<title><![CDATA[把你踩在脚下的感觉还真爽[em]e113[/em] ]]></title>
<description><![CDATA[ ]]></description>
<capacity>1582</capacity>
<category>msgboard</category>
</item>
<item answerid="21" archive="0" uin="137569787" effect="32" >
<author><![CDATA[潋滟…嘉欣 ]]></author>
<pubDate>2009-09-18 11:44:47</pubDate>
<title><![CDATA[ ..?我用世界上最狠的一脚,把你踩死,要你永不能翻身[em]e144[/em] ]]></title>
<description><![CDATA[ ]]></description>
<capacity>1496</capacity>
<comment uin="959398298" time="0"><![CDATA[用大象踩蚂蚁比较像，那么粗鲁小心嫁不出去哦 ]]></comment>
<category>msgboard</category>
</item>
<item answerid="20" archive="0" uin="137569787" effect="32" >
<author><![CDATA[潋滟…嘉欣 ]]></author>
<pubDate>2009-09-16 19:36:08</pubDate>
<title><![CDATA[[em]e144[/em] 我的目的就要达到了哈。，，，哈哈[ffg,#FF0000,#FFFFFF]^_^[/ft] ]]></title>
<description><![CDATA[ ]]></description>
<capacity>1483</capacity>
<comment uin="959398298" time="0"><![CDATA[为了啥子那。目的好相不单纯，有啥子企图?? ]]></comment>
<category>msgboard</category>
</item>
<item answerid="19" archive="0" uin="137569787" effect="32" >
<author><![CDATA[潋滟…嘉欣 ]]></author>
<pubDate>2009-09-16 16:32:48</pubDate>
<title><![CDATA[嘿嘿嘿。。。这哈才晓得。。。烦死你又不偿命。。[em]e144[/em] ]]></title>
<description><![CDATA[ ]]></description>
<capacity>1503</capacity>
<comment uin="959398298" time="0"><![CDATA[遇到你了，真没见到你这种人，认识你之前 ]]></comment>
<category>msgboard</category>
</item>
<item answerid="18" archive="0" uin="137569787" effect="32" >
<author><![CDATA[潋滟…嘉欣 ]]></author>
<pubDate>2009-09-16 16:02:32</pubDate>
<title><![CDATA[ 我[em]e192[/em][em]e120[/em] ]]></title>
<description><![CDATA[ ]]></description>
<capacity>1519</capacity>
<comment uin="959398298" time="0"><![CDATA[烦的很啦。。。。。。。。············· ]]></comment>
<category>msgboard</category>
</item>
<item answerid="17" archive="0" uin="137569787" effect="32" >
<author><![CDATA[潋滟…嘉欣 ]]></author>
<pubDate>2009-09-16 12:07:52</pubDate>
<title><![CDATA[ 我争取你的下一篇留言全部是我的 ]]></title>
<description><![CDATA[ ]]></description>
<capacity>1468</capacity>
<comment uin="959398298" time="1253074147"><![CDATA[谢谢了哇。。不过你应该做不到的吧 ]]></comment>
<comment uin="137569787" time="1253085136"><![CDATA[ 呵呵,是吗,不试试怎么知道[em]e138[/em] ]]></comment>
<category>msgboard</category>
</item>
<item answerid="15" archive="0" uin="137569787" effect="32" >
<author><![CDATA[/!:_…嘉 ]]></author>
<pubDate>2009-09-14 19:53:52</pubDate>
<title><![CDATA[ 臭娃娃。。。都没人来看你，，哦。。。哎，万一那一天悄悄的挂了，，都没人知道[em]e120[/em] ]]></title>
<description><![CDATA[ ]]></description>
<capacity>1462</capacity>
<comment uin="959398298" time="0"><![CDATA[我还以为是关心呢，原来是别有用心啊，[em]e127[/em] ]]></comment>
<category>msgboard</category>
</item>
</channel>
</rss>
然后开始创建XMLHttpRequestObject对象，其代码为
common.js
/************************
* Name : Common通用JS类库
* Author : Sonven
* Create : 2009-09-27
* Modify : 2009-09-27
*************************/
//获取Uri参数
function $getUriPararm(param,uri) {
var _uri = (uri == null ? location.href : uri).toString(); //获取Uri地址
if (_uri.lastIndexOf(param+"=") == -1) {
alert('找不到参数:' + param);return false;
}
var temp1 = _uri.substring(_uri.lastIndexOf(param) + param.toString().length + 1);
return temp1.indexOf("&") == -1 ? temp1 : temp1.substring(0, temp1.indexOf("&"));
}
//获取指定ID的对象
function $get(id) {
return document.getElementById(id);
}
//XMLHttpRequestObject
function XMLHttpRequestObject(method,returnType,uri, param) {
//创建xmlHttp对象
this.xmlHttp=null;
if (window.XMLHttpRequest) this.xmlHttp = new XMLHttpRequest();
else if (window.ActiveXObject) this.xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
else { alert('您的浏览器不支持XMLHttp请求!'); return false; }
this.uri = uri;
this.method = method.toString().toLowerCase() == "post" ? "POST" : "GET"; //请求方式
this.param = param; //Post请求的参数
this.returnType = returnType.toString().toLowerCase() == "xml" ? "XML" : "TEXT"; //返回数据的格式
this.returnValue=""; //返回的数据
}
XMLHttpRequestObject.prototype.request = function(callback) {
this.xmlHttp.open(this.method, this.uri, true);
var tempReturnType = this.returnType;
var tempHttp = this.xmlHttp;
this.xmlHttp.onreadystatechange = function() {
if (tempHttp.readyState == 4) {
if (tempHttp.status == 200) {
callback(tempReturnType == "XML" ? tempHttp.responseXML : tempHttp.responseText);
}
}
}
//如果为Post请求
if (this.method == "POST") {
this.xmlHttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
this.httpHttp.send(this.param);
} else {
this.xmlHttp.send(null);
}
}
然后创建具体的获取分析QQ空间留言板信息的模块
qq.modules.LeaveMessage.js
/*************************
* 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 = "?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" "">
<html xmlns="" >
<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>
实现大概就如同上面了，但还有问题就是不能跨域进行异步操作(不确定是否可以，希望高人指点)
我采用的是利用webrequest来获取数据在本地生成xml文件，这样就不存在跨域的问题了!