万事无忧之一网打尽博客园RSS频道

【摘要】不再东奔西跑，Ajax一网打尽你关心的博客园RSS频道。便于浏览，轻松学习。

       1、Ajax源代码, Ajax核心技术XMLHttpRequest, XMLDocument
       2、拖拽使你随意排列各个频道
       3、cookie中保存排列的效果，记住你的个性
       4、把JS代码粘贴到你的博客园中。实现步骤：管理->选项->configure->页脚Html代码
       5、详细的注释说明，你一定看的懂

【Ajax源代码】

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Draging,what do you see!</title>

<style>

*{font-size:12px}

/*样式class*/

.dragTable{

font-size:12px;

border-top:1px solid #3366cc;

margin-bottom: 10px;

width:100%;

background-color:#FFFFFF;

}

.dragTR{

cursor:move;/*控制当鼠标移动到该行上时显示的样式*/

color:#7787cc;

background-color:#e5eef9;

font-size:16px;

font-family:"宋体";

font-weight:bold;

letter-spacing:1px;

}

/*利用tagName定义样式*/

td{vertical-align:top;}

/*#表示对id=parentTable元素的样式定义*/

#parentTable{

border-collapse:collapse;

letter-spacing:25px;

}

</style>

<!--

/*AJAX*/

// JavaScript Document

function echo(obj1,html)

{

$(obj1).innerHTML=html;

}

function $(id)

{

return document.getElementById(id);

}

function createXMLHttpRequest() {

var xmlHttpObj;

if (window.ActiveXObject) {

xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");

}else if (window.XMLHttpRequest) {

xmlHttpObj = new XMLHttpRequest();

}

return xmlHttpObj;

}

function parseResults(obj1,xmlHttp) {

var results = xmlHttp.responseXML;

var item = null;

var title;

var items = results.getElementsByTagName("item");

for(var i = 0; i < items.length; i++) {

item = items[i];

title = item.getElementsByTagName("title")[0].firstChild.nodeValue;

//clearPreviousResults();

link2=item.getElementsByTagName("link")[0].firstChild.nodeValue;

title=str(title);

addListRow(title,link2,obj1);

}

function readrss(url,obj)

{

var xmlHttp=createXMLHttpRequest();

xmlHttp.onreadystatechange = handleStateChange;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

//xmlHttp.abort();

function handleStateChange()//FN2

{

if(xmlHttp.readyState==2)

{

echo(obj,"正在提交数据，请稍等

");

}

else if(xmlHttp.readyState==4)

{

if(xmlHttp.status==200)

{

//echo(obj,"正在提交数据，请稍等

");

clearPreviousResults(obj);

parseResults(obj,xmlHttp);

}

}//End FN2

}

function addListRow(title,link1,obj2)

{

//clearPreviousResults(obj2);

$(obj2).innerHTML+='<a href="'+link1+'" target="_blank" >'+title+'</a><br>';

}

function str(stri)

{

var strb;

if(stri.length>30)

{

strb=stri.substring(0,30)+'..';

}

else

{

strb=stri;

}

return strb;

}

function clearPreviousResults(obj3) {

while($(obj3).childNodes.length > 0) {

$(obj3).removeChild($(obj3).childNodes[0]);

}

//-->

</script>

//----设置Cookie------

function setCookie(name,value,domain)

{

var value = escape(value);

var nameString = "Drag_"+name + "=" + value; //给cookie变量增加前缀

var extime = new Date();

extime.setTime (extime.getTime () + 315360000);

var expiryString = ";expires=" + extime.toGMTString();

var domainString = "";

var pathString = ";path=/";

var setvalue = nameString + expiryString;

document.cookie = setvalue;

}

//----设置Cookie 结束------

//---读取Cookie-------

function getcookie (name)

{

var CookieFound = false;

var start = 0;

var end = 0;

var CookieString = document.cookie;

var i = 0;

name="Drag_"+name; //增加前缀

while (i <= CookieString.length)

{

start = i ;

end = start + name.length;

if (CookieString.substring(start, end) == name)

{

CookieFound = true;

break;

}

i++;

}

if (CookieFound)

{

start = end + 1;

end = CookieString.indexOf(";",start);

if (end < start)

end = CookieString.length;

var getvalue = CookieString.substring(start, end);

return unescape(getvalue);

}

return "";

}

//---读取Cookie 结束-------

//检测是否禁用了cookie

function isEnableCookie() {

try {

var cookie_helper = new CookieHelper("");

var test_cookie_name = "test_cookie_name";

var test_cookie_value = "test_cookie_value";

var test_cookie_value_ret = "";

cookie_helper.writeCookie(test_cookie_name,test_cookie_value);

test_cookie_value_ret = cookie_helper.getCookieValue(test_cookie_name);

if ( test_cookie_value_ret != null ) {

cookie_helper.removeCookie(test_cookie_name);

return true;

} else {

return false;

}

} catch (error) {

return false;

}

</script>

function init()

{

readrss('http://www.cnblogs.com/rss.aspx','div1');

readrss('http://www.cnblogs.com/beginner/rss.aspx','div2');

readrss('http://www.cnblogs.com/pick/rss.aspx','div3');

readrss('http://www.cnblogs.com/expert/rss.aspx','div4');

readrss('http://www.cnblogs.com/book/rss.aspx','div5');

setTimeout("init()","180000");

}

</script>

</head>

<tr >

</table>

<tr><td>.NET新手区 div2</td></tr>

</table>

</td>

</table>

</table>

</td>

<tr><td>读书心得区 div5</td></tr>

</table>

<tr><td>Google AdSense</td></tr>

<tr>

google_ad_client = "pub-3677762604679039";

google_ad_width = 120;

google_ad_height = 240;

google_ad_format = "120x240_as_rimg";

google_cpa_choice = "CAAQ1PT8hwIaCLQJm6CuvvAZKNzI6n4";

google_ad_channel = "6380057915";

//--></script>

</script> </td>

</tr>

</table>

</td></tr>

</table>

<tr><td>Google Adsense div7</td></tr>

<tr>

google_ad_client = "pub-3677762604679039";

google_ad_width = 120;

google_ad_height = 240;

google_ad_format = "120x240_as_rimg";

google_cpa_choice = "CAAQ8fOujAIaCOun9lVDwMlHKJPM93M";

google_ad_channel = "1950414295";

//--></script>

</script>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

<hr>

<!--

实现拖拽的代码

var draged=false;

tdiv=null;

function dragStart(){

ao=event.srcElement; //设置或获取触发事件的对象,这里是可以移动的table对象的TD对象

if((ao.tagName=="TD")||(ao.tagName=="TR"))

ao=ao.offsetParent;//获取定义对象offsetTop和offsetLeft属性的容器对象的引用,这里是获取的被移动的table对象。

else

return;

draged=true;

tdiv=document.createElement("div");

tdiv.innerHTML=ao.outerHTML;

tdiv.style.display="block";

tdiv.style.position="absolute";

tdiv.style.filter="alpha(opacity=70)";

tdiv.style.cursor="move";

tdiv.style.width=ao.offsetWidth;//被移动table对象的高度

tdiv.style.height=ao.offsetHeight;

tdiv.style.top=getInfo(ao).top;

tdiv.style.left=getInfo(ao).left;

document.body.appendChild(tdiv);

lastX=event.clientX;

lastY=event.clientY;

lastLeft=tdiv.style.left;

lastTop=tdiv.style.top;

try{

ao.dragDrop(); //初始化拖曳事件

}catch(e){}

}

function draging(){//重要:判断MOUSE的位置

if(!draged)return;

var tX=event.clientX;

var tY=event.clientY;

tdiv.style.left=parseInt(lastLeft)+tX-lastX;//

tdiv.style.top=parseInt(lastTop)+tY-lastY;

for(var i=0;i<parentTable.cells.length;i++){//for1

var parentCell=getInfo(parentTable.cells[i]);

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom)//判断鼠标的位置是否移动到父表的某个列中

{//if1

var subTables=parentTable.cells[i].getElementsByTagName("table");

if(subTables.length==0)//如果鼠标所在的列中没有没有子表，直接增加子对象（table）

{

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom)

{parentTable.cells[i].appendChild(ao);}

break;

}

for(var j=0;j<subTables.length;j++)//列中存在子表的处理

{

var subTable=getInfo(subTables[j]);

if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom)

{

parentTable.cells[i].insertBefore(ao,subTables[j]);

break;

}else{

parentTable.cells[i].appendChild(ao);

}

}//if1

}//for1

}

function dragEnd(){

if(!draged)return;

draged=false;

//---save sub table position---

var pttyle="";

for(var i=0;i<parentTable.cells.length;i++){//for1

var subTables=parentTable.cells[i].getElementsByTagName("table");

if(subTables.length==0)

{

pttyle+="|";

break;

}else{

for(var j=0;j<subTables.length;j++)//列中存在子表的处理

{

if(subTables[j].className!="dragTable") continue; //这里仅仅对className==dragTable的表处理，排除组织页面中使用的table

pttyle+=subTables[j].id+","+subTables[j].rows[0].cells[0].innerText+":";

}

pttyle+="|";

}

}//for1

setCookie("pttyle",pttyle,"");

//---save sub table position end---

mm=ff(150,15);//

}

function getInfo(o){//取得对象的绝对坐标

var to=new Object();

to.left=to.right=to.top=to.bottom=0;

var twidth=o.offsetWidth;

var theight=o.offsetHeight;

while(o!=document.body){

to.left+=o.offsetLeft;

to.top+=o.offsetTop;

o=o.offsetParent;

}

to.right=to.left+twidth;

to.bottom=to.top+theight;

return to;

}

function ff(aa,ab){//用于恢复位置，来自该死的GOOGLE网站；aa/ab其值越大恢复的速度越快

var ac=parseInt(getInfo(tdiv).left);

var ad=parseInt(getInfo(tdiv).top);

var ae=(ac-getInfo(ao).left)/ab;

var af=(ad-getInfo(ao).top)/ab;

return setInterval(function(){if(ab<1){

clearInterval(mm);

tdiv.removeNode(true);

ao=null;

return

}

ab--;

ac-=ae;

ad-=af;

tdiv.style.left=parseInt(ac)+"px";

tdiv.style.top=parseInt(ad)+"px"

}

,aa/ab)

}

function inint(){//初始化

/*根据cookie组织父表*/

var pttyle=getcookie("pttyle");

if (pttyle.length>0){

//*****获得父表中所有的子表对象***

var ctCount=0; //计数器

var stObjects=new Array();//保存子表对象

for(var i=0;i<parentTable.cells.length;i++){

var subTables=parentTable.cells[i].getElementsByTagName("table");//获得子表

for(var j=0;j<subTables.length;j++){

stObjects[ctCount]=subTables[j];

ctCount++;

parentTable.cells[i].removeChild(subTables[j]); //删除列中的子表对象

}

//读取cookie中子表对象id

var tempCells=pttyle.split("|");//因为格式为pttyle=stid,stt:stid,stt:|stid,stt:stid,stt:|

//begin for2

for(var i=0; i<tempCells.length-1;i++)//拆成数组时存在一个多余的元素，故循环减去1

{

var tempSTs=tempCells[i].split(":");

for (var j=0;j<tempSTs.length-1;j++)//遍历子表信息,

{

for(var n=0;n<stObjects.length;n++)//从子表对象数组中查询子表对象

{

if(tempSTs[j].indexOf(stObjects[n].id)!=-1)//id值存在

{

parentTable.cells[i].appendChild(stObjects[n]);break;

}

}//end for2

}//pttyle.length>0 End

/*根据cookie组织父表结束*/

/*设置拖拽的样式和事件*/

for(var i=0;i<parentTable.cells.length;i++){

var subTables=parentTable.cells[i].getElementsByTagName("table");//获得子表

for(var j=0;j<subTables.length;j++){

if(subTables[j].className!="dragTable") continue;

subTables[j].rows[0].className="dragTR";//给行添加表示可以移动的样式

subTables[j].rows[0].attachEvent("onmousedown",dragStart);//将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数

subTables[j].attachEvent("ondrag",draging);//将draging函数邦定到进行拖曳操作时，在源对象上持续触发的事件。

subTables[j].attachEvent("ondragend",dragEnd);//ondragend事件：当用户在拖曳操作结束后释放鼠标时在源对象上触发。

}

/*设置拖拽的样式和事件结束*/

}

inint();

</script>

</body>

</html>

【效果图】

【关键字】Ajax 初探,Ajax实现拖拽效果,Ajax实战,RSS聚合技术

【声明】源代码中含有Google Adsense 的代码，您可选择删除。了解Google Adsense ,请点击

posted on 2007-02-06 13:46 海纳百川阅读(2374) 评论(14) 编辑收藏举报

喜欢的博客

爱去的站点

设计佳作