1. ajax 之实现基本JS
<script type="text/javascript">
<!--
function createAjax() { //该函数将返回XMLHTTP对象实例
var _xmlhttp;
try {
_xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE的创建方式
}
catch (e) {
try {
_xmlhttp=new XMLHttpRequest(); //FF等浏览器的创建方式
}
catch (e) {
_xmlhttp=false; //如果创建失败,将返回false
}
}
return _xmlhttp; //返回xmlhttp对象实例
}
function show() { //该函数用来获取分页数据
var xmlhttp=createAjax(); //创建变量xmlhttp,并将createAjax()函数创建的对象实例赋于它
if (xmlhttp) { //如果xmlhttp对象创建成功,则执行条件语句中的程序
var content=document.getElementById('content'); //获取页面中id为content的对象
xmlhttp.open('get','server.asp?n='+Math.random(),true); //打开与服务器的连接,其中get为连接方式,server.asp为要连接的页面,有两个参数,其中第一个参数page为需要返回数据的页数,第二个参数n为一个随机数,这样每次发送的URL都会不一样,相当于都向服务器发出一个新的请求,避免浏览器缓存数据。
xmlhttp.onreadystatechange=function() { //为xmlhttp对象的readyState属性指定事件,改属性值改变时,则会执行其中的程序
if (xmlhttp.readyState==4 && xmlhttp.status==200) { //如果xmlhttp.readyState==4并且xmlhttp.status==200时,执行条件中的程序,其中readyState有五个值,4为请求完成,是客户端向服务器提交的数据成功到达,status有N多值-_-!!,其中200为OK,是指服务器向客户端完成发送数据。
content.innerHTML=unescape(xmlhttp.responseText); //将服务器返回的数据解码并写入指定的ID中。
}
else {
content.innerHTML='<span style="color:red">正在从服务器提取数据......</span>'; //如果服务器没有完成传送,则向用户提示正在传输。
}
}
xmlhttp.send(null); //向服务器发送请求,因为是get请求,会直接附在URL后面,所以这里括号中的数据为null,IE中也可以不写,但FF就必须加上null,否则会发送失败。
}
}
//-->
</script>
2. 首页面的设计
body { text-align:center;font:12px Verdana,sans-serif; }
a:link,a:visited { color:#00f;text-decoration:none; }
a:hover { color:#000;text-decoration:underline; }
h4 { margin:0; padding:0;}
h5 { margin:0; padding:0; font-weight:normal;}
#main { width:400px;background:#fff;border:1px #999 solid;padding:10px;text-align:left;line-height:150px;margin:0 auto; }
#title { width:100%;line-height:30px;border-bottom:1px #999 solid;display:table; }
#left { float:left;width:80%;text-align:left;font-size:14px;font-weight:bold; }
#right { float:left;width:20%;text-align:right; }
#content { width:100%;margin:0;clear:both; }
#ct { margin:0; padding:0;}
input { width:60px; height:50px;}
<div id="main">
<div id="title">
<div id="left">
<h4>听说弦子有GF了哇</h4>
<h5> 对的,你真聪明.点击骷髅查看那个 .妞. 的PP . . .</h5>
</div>
<div id="right"><input src="images/jay.jpg" name="show" type="image" value="show" οnclick="show();" /> <a href="#" οnclick="show();">SHOW</a></div>
</div>
<div id="content">this is the . . . 妞 . . .</div>
</div>
3. server.asp
sql="select top 1 * from [test] order by id asc"
rs.open sql,conn,1,1
If rs.eof Then
Response.Write("wangdingjun be careful")
Else
dim str,xx
do while not rs.eof
str = "<p style='margin-top:10px;line-height:20px;text-align:left;border-top:1px #999 solid'>"&"<span style='font-weight:bold;color:red;font-size:13px;'>"&rs("webname")&"</span>"&"</p>"
response.Write(str)
rs.movenext
loop
xx = "<div width:150px; style='background: url(images/xx.jpg) no-repeat'> </p> </p> </p> </p> </p> </p></div>"
response.Write(xx)
End If
rs.Close
Set rs=Nothing
conn.Close
Set conn=Nothing
主要实现的方法 : 一个显示页面 , 一个处理页面 , 一个AJAX核心处理代码JS . . .
简单的 AJAX 实现已经实现 . . . 待续 . . .