myPage based on Ajax
1
// JavaScript Document2
function echo(obj1,html)3
{4
$(obj1).innerHTML=html;5
}6
function $(id)7
{8
return document.getElementById(id); 9
}10
var xmlHttp;11
function createXMLHttpRequest() {12
if (window.ActiveXObject) {13
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");14
} 15
else if (window.XMLHttpRequest) {16
xmlHttp = new XMLHttpRequest();17
}18
}19
function parseResults(obj1) {20
var results = xmlHttp.responseXML;21
var item = null;22
var title;23
var items = results.getElementsByTagName("item");24
for(var i = 0; i < items.length; i++) {25
item = items[i];26
title = item.getElementsByTagName("title")[0].firstChild.nodeValue;27
//clearPreviousResults();28
link2=item.getElementsByTagName("link")[0].firstChild.nodeValue;29
title=str(title);30
addListRow(title,link2,obj1);31
}32
}33
34
function readrss(url,obj)35
{ 36
37
createXMLHttpRequest()38
xmlHttp.onreadystatechange = handleStateChange;39
xmlHttp.open("GET", url, true);40
xmlHttp.send(null);41
//xmlHttp.abort();42
function handleStateChange()43
{44
if(xmlHttp.readyState==2)45
{46
echo(obj,"正在提交数据，请稍等");47
48
}49
else if(xmlHttp.readyState==4)50
{51
if(xmlHttp.status==200)52
{53
//echo(obj,"正在提交数据，请稍等");54
clearPreviousResults(obj);55
parseResults(obj);56
57
}58
}59
}60
}61
62
function addListRow(test,link1,obj2)63
{64
//clearPreviousResults(obj2);65
$(obj2).innerHTML+='<a href="'+link1+'" target="_blank" >'+test+'</a><br>';66
67
}68
function str(stri)69
{70
var strb;71
if(stri.length>30)72
{73
strb=stri.substring(0,30)+'..';74
}75
else76
{77
strb=stri;78
}79
return strb;80
}81
function clearPreviousResults(obj3) {82
83
while($(obj3).childNodes.length > 0) {84
$(obj3).removeChild($(obj3).childNodes[0]);85
}86
}1
<html>2
<head>3
<title>DRAG the DIV</title>4
<style>5
*{font-size:12px}6
.dragTable{7
font-size:12px;8
border-top:1px solid #3366cc;9
margin-bottom: 10px;10
width:100%;11
background-color:#FFFFFF;12
}13
.dragTR{14
cursor:move;15
color:#7787cc;16
background-color:#e5eef9;17
}18
td{vertical-align:top;}19
#parentTable{20
border-collapse:collapse;21
letter-spacing:25px;22
}23
</style>24
<script src="xmlhttp.js" language="javascript" type="text/javascript"></script>25
<script defer>26
var draged=false;27
tdiv=null;28
function dragStart(){29
ao=event.srcElement;30
if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;31
else return;32
draged=true;33
tdiv=document.createElement("div");34
tdiv.innerHTML=ao.outerHTML;35
tdiv.style.display="block";36
tdiv.style.position="absolute";37
tdiv.style.filter="alpha(opacity=70)";38
tdiv.style.cursor="move";39
tdiv.style.width=ao.offsetWidth;40
tdiv.style.height=ao.offsetHeight;41
tdiv.style.top=getInfo(ao).top;42
tdiv.style.left=getInfo(ao).left;43
document.body.appendChild(tdiv);44
lastX=event.clientX;45
lastY=event.clientY;46
lastLeft=tdiv.style.left;47
lastTop=tdiv.style.top;48
try{49
ao.dragDrop(); 50
}catch(e){}51
}52
function draging(){//重要:判断MOUSE的位置53
if(!draged)return;54
var tX=event.clientX;55
var tY=event.clientY;56
tdiv.style.left=parseInt(lastLeft)+tX-lastX;57
tdiv.style.top=parseInt(lastTop)+tY-lastY;58
for(var i=0;i<parentTable.cells.length;i++){59
var parentCell=getInfo(parentTable.cells[i]);60
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){61
var subTables=parentTable.cells[i].getElementsByTagName("table");62
if(subTables.length==0){63
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){64
parentTable.cells[i].appendChild(ao);65
}66
break;67
}68
for(var j=0;j<subTables.length;j++){69
var subTable=getInfo(subTables[j]);70
if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){71
parentTable.cells[i].insertBefore(ao,subTables[j]);72
break;73
}else{74
parentTable.cells[i].appendChild(ao);75
} 76
}77
}78
}79
}80
81
function dragEnd(){82
if(!draged)return;83
draged=false;84
mm=ff(150,15);85
}86
function getInfo(o){//取得坐标87
var to=new Object();88
to.left=to.right=to.top=to.bottom=0;89
var twidth=o.offsetWidth;90
var theight=o.offsetHeight;91
while(o!=document.body){92
to.left+=o.offsetLeft;93
to.top+=o.offsetTop;94
o=o.offsetParent;95
}96
to.right=to.left+twidth;97
to.bottom=to.top+theight;98
return to;99
}100
function ff(aa,ab){//从GOOGLE网站来,用于恢复位置101
var ac=parseInt(getInfo(tdiv).left);102
var ad=parseInt(getInfo(tdiv).top);103
var ae=(ac-getInfo(ao).left)/ab;104
var af=(ad-getInfo(ao).top)/ab;105
return setInterval(function(){if(ab<1){106
clearInterval(mm);107
tdiv.removeNode(true);108
ao=null;109
return110
}111
ab--;112
ac-=ae;113
ad-=af;114
tdiv.style.left=parseInt(ac)+"px";115
tdiv.style.top=parseInt(ad)+"px"116
}117
,aa/ab)118
}119
function inint(){//初始化120
for(var i=0;i<parentTable.cells.length;i++){121
var subTables=parentTable.cells[i].getElementsByTagName("table");122
for(var j=0;j<subTables.length;j++){123
if(subTables[j].className!="dragTable")break;124
subTables[j].rows[0].className="dragTR";125
subTables[j].rows[0].attachEvent("onmousedown",dragStart);126
subTables[j].attachEvent("ondrag",draging);127
subTables[j].attachEvent("ondragend",dragEnd);128
}129
}130
}131
inint();132
133
</script>134
<script language="javascript" >135
function init()136
137
{138
139
readrss('http://singlepine.cnblogs.com/category/37642.html/rss','div10');140
readrss('http://singlepine.cnblogs.com/category/37639.html/rss','div2');141
readrss('http://singlepine.cnblogs.com/category/41822.html/rss','div5');142
readrss('http://singlepine.cnblogs.com/category/37474.html/rss','div3');143
readrss('http://singlepine.cnblogs.com/category/37630.html/rss','div4');144
setTimeout("init()","1000");145
}146
</script>147
</head>148
<body onLoad="init()">149
<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">150
<tr >151
<td width="25%" valgin="top">152
<table border=0 class="dragTable" cellspacing="0">153
<tr>154
<td>AJAX</td>155
</tr>156
<tr>157
<td id="div4"></td>158
<tr>159
</table>160
<table border=0 class="dragTable" cellspacing="0">161
<tr>162
<td>datagrid</td>163
</tr>164
<tr>165
<td id="div5"></td>166
<tr>167
</table>168
<table border=0 class="dragTable" cellspacing="0">169
<tr>170
<td>asp.net</td>171
</tr>172
<tr>173
<td id="div3"></td>174
<tr>175
</table></td>176
<td width="25%">177
<table border=0 class="dragTable" cellspacing="0">178
<tr>179
<td>C#.net</td>180
</tr>181
<tr>182
<td id="div2" > </td>183
<tr>184
</table></td>185
<td width="25%">186
<table border=0 class="dragTable" cellspacing="0" id="td3">187
<tr>188
<td >javascrip<a href="#" onClick="document.all.td3.style.display='none'" onMouseDown="document.all.imag1.src='Icon2.gif'" onMouseUp="document.all.imag1.src='Icon.gif'" onFocus="this.blur()" ><img src="Icon.gif" width="16" height="14" id="imag1" border="0"></a></td>189
</tr>190
<tr>191
<td id="dv" ><div id="div10" onClick="readrss('http://singlepine.cnblogs.com/category/37642.html/rss','dv');"></div></td>192
<tr>193
</table>194
</td>195
</tr>196
</table>197
<a href="#" onClick="div10.style.display='none'">隐藏</a>198
199
200
201
202
<p> </p>203
<p><hr></p>204
<p>本程序由<font color="e666666"><b>Ajax中国</b></font>收集整理 <a href="http://www.okajax.com/" target="_blank">http://www.okajax.com</a></p>205
<p><a href="http://www.okajax.com/bbs/board.aspx?boardid=9" target="_blank"> <img name="yanshi" src="http://www.okajax.com/images/1024.gif" border=0 alt="Ajax中国 在线演示"></a></p>206
<p>本程序作者：Ajax技术联盟(qq群)成员╰☆明仔★～(155318676)</p>207
<p></p>208
</body>209
</html>210
211
