创建面向对象的Javascript实现Ajax访问QQ留言板

　　题不恰当说明一个问题，功力不深。希望对大家有所帮助，以下代码未采用Jquery，完全JS代码实现用贯了Jquery你还会用手写的Ajax吗?实现效果：[ 关注实现，效果轻描淡写]

　　刚刚补上的，发布到网上的,http://qq.rsion.com/msg/959398298你的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　=　"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>

　　实现大概就如同上面了，但还有问题就是不能跨域进行异步操作(不确定是否可以，希望高人指点)

　　我采用的是利用webrequest来获取数据在本地生成xml文件，这样就不存在跨域的问题了!

评论总数：0 条 [ 查看全部 ] 网友评论