ajax 入门

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>&nbsp;&nbsp;&nbsp;&nbsp; 对的,你真聪明.点击骷髅查看那个 .妞. 的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'>&nbsp;</p>&nbsp;</p>&nbsp;</p>&nbsp;</p>&nbsp;</p>&nbsp;</p></div>"
  response.Write(xx)
 End If
 rs.Close
 Set rs=Nothing
 conn.Close
 Set conn=Nothing

主要实现的方法 : 一个显示页面 , 一个处理页面 , 一个AJAX核心处理代码JS . . .

简单的 AJAX 实现已经实现 . . . 待续 . . .