天缘博客

Ajax是比较有意思的一种适时技术，现在很多论坛网站都在使用Ajax进行帐号检测，注册验证等，尤其是国内的大型门户，都喜欢把首页设计成牛长模式，恨不得把所有内容都放到首页去，这么多内容，考虑到用户体验问题就只能使用Ajax延迟载入，比如163网易首页翻页新闻资讯。再者在多分页上采用的鼠标点击或移动延迟响应也是非常有用的，那样不会让分页翻页太快影响用户的操作体验，本文就来模仿一下163的翻页及延迟载入部分，供大家参考，如果您是搜索鼠标点击延迟javascript或者Ajax无刷新载入进来的客人，那么可以肯定的告诉您，您找对地方啦。

Ajax无刷新设计包含两个部分：一是客户端脚本部分，二是服务器接收处理部分，是典型的Client-Server模式。

一、客户端基础HTML部分

首先是基础模块标签部分，总得给Ajax操作设置个对象，另外CSS代码就不说了，大家随便自己设置就好了：
 <div id="inavbar">
 <div id="inavlst">
         <ul>
                   <li id="nav1" status="active"><a hidefocus="hideFocus" onclick="return false;" href="#" urn="#default1" rel="iFa">AAA</a></li>
                   <li id="nav2" status="normal"><a hidefocus="hideFocus" onclick="return false;" href="#" urn="is.php?sid=4" rel="iFb">BBB</a></li>
         </ul>
 </div> 
 <div id="inavsearch"> 
        快搜：<input id="iSearEdt" value="输入名称" onfocus="searInit();searKey()" onblur="searInit()" onkeyup="searKey()"/>
</div>
 </div>

<div id="navbox">
        <div id="ina">http://www.metsky.com</div>
        <div id="inb" style="display:none;">http://www.metsky.com</div>
         <div id="inc" style="display:none;"></div>
 </div>

程序说明：
inavlst是导航条部分，比如网易的新闻、图片、热点等，就那么个横条；
inavsearch是搜索部分，是使用Ajax无刷新适时响应处理的触发源；
navbox部分一看就明白，是上面导航的切换对象容器，第一个ina默认是打开的其余隐藏；

二、Ajax脚本部分

以下为JS代码部分，主要包括两个部分，一是鼠标延迟响应切换ina和 inb两个分页，另一个是Ajax响应搜索分页部分：

<script language="javascript">
var waitInterval;
var MouseDelayTime=150;
var curDispId = "iFamous";//默认显示项
var ajccache=new Object();
function getem(aID)
{
   return (document.getElementById) ? document.getElementById(aID): document.all[aID];
}
function changeDsp(iId)//iId为更新后显示项
{
 getem(curDispId).style.display="none";//关闭当前显示项
 getem(iId).style.display="";
 curDispId = iId;
}
var NavlstObj;//导航条对象
function startajaxtabs(nlstid)
{
 NavlstObj=document.getElementById(nlstid);
 ulist=NavlstObj.getElementsByTagName("li");
 
 for(var j=0;j<ulist.length;j++)
 {
  var thelist=ulist[j];
  var ulistlink=thelist.getElementsByTagName("a")[0];
  var ulistlinkurl=ulistlink.getAttribute("urn");
  var ulistlinktarget=ulistlink.getAttribute("rel");//显示目标
  
  thelist.setActive=function(bactive){
   if(bactive){
    this.status="active";
    this.className="active";
   }
   else{
    this.status="normal";
    this.className="normal";
   }
  }
  thelist.LoadTab=function(){
   this.parentNode.parentNode.activetab.setActive(false);//关闭原来激活项
   
   this.parentNode.parentNode.activetab=this;//保存激活项标记
   this.setActive(true);//激活当前项
   var ulistlink=this.getElementsByTagName("a")[0];
   
   if(ulistlink.getAttribute("urn").indexOf("#default")==-1){
    loadAJAXTab(ulistlink.getAttribute("urn"),ulistlink.getAttribute("rel"));//只需要执行一次
   }
   changeDsp(ulistlink.getAttribute("rel"));//改变显示项
  }
  thelist.onmouseover=function(aEvent){  
   if(this.status=="active") return;
   tempref=this;
   clearTimeout(waitInterval);
   waitInterval=window.setTimeout("tempref.LoadTab();",MouseDelayTime);
  }
  thelist.onmouseout=function(aEvent){
   if(this.status=="active") return;
   clearTimeout(waitInterval);
  }
  if(ulistlinkurl.indexOf("#default1")!=-1){//激活第一项
   thelist.setActive(true);
   NavlstObj.activetab=thelist;
  }else{
   thelist.setActive(false);
  }
 }
 if(NavlstObj.activetab==null) NavlstObj.activetab=ulist[0];
}
function getXmlhttp()
{
 var http_request;
 
 if(window.XMLHttpRequest) {
  http_request = new XMLHttpRequest();
  if (http_request.overrideMimeType) {
   http_request.overrideMimeType("text/xml");
  }
 }
 else if (window.ActiveXObject) {
  try {
   http_request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (e) {}
  }
 }
 if (!http_request) {
  window.alert("can't create XMLHttpRequest object.");
  return null;
 } 
 return http_request;
}
function loadAJAXTab(url,contentid){
 var ocontent=getem(contentid);
 if(ajccache[url]==null){
  var xhttp=getXmlhttp();  
  xhttp.onreadystatechange=function(){
   if(xhttp.readyState == 4 && (xhttp.status==200 || window.location.href.indexOf("http")==-1)){
    if(xhttp.responseText)//假如不空则替换
     ocontent.innerHTML=xhttp.responseText;    
    ajccache[url]=ocontent.innerHTML;
    
   }
  }
  var caId = fnGetCookie("uid");
  xhttp.open("GET",url+"&uid="+caId,true);
  xhttp.setRequestHeader("If-Modified-Since","0");//不缓存
  xhttp.send(null);
 }
}
startajaxtabs("inavlst");//这里初始化Ajax
<!--快速搜索-->
var v=getem('iSearEdt');
var s_value=getem('iSearEdt').value;//保存初值
function searInit()
{
 v.style.color="#000000";
 if(v.value==s_value)//无效查询字
  v.value='';
 else if(v.value==''){//恢复默认提示信息
  v.value=s_value;
  v.style.color="";
 }
}
function searKey()
{
 str=subs(v.value.replace(/[\s\n\t\!@$\^\(\)#%&*?>\+=_<\";]*/g, "").toUpperCase(),18)
 if(!str){
  return 0;
 }
 var xhttp=getXmlhttp();  
 xhttp.onreadystatechange=function(){
  if(xhttp.readyState == 4 && (xhttp.status==200 || window.location.href.indexOf("http")==-1)){
   document.getElementById("iMySear").innerHTML=xhttp.responseText;
   
   NavlstObj.activetab.setActive(false);//关闭原来显示项
   changeDsp("iMySear");
  }
 }
 var url = "is.php?wskw="+ encodeURI(str);//需要进行Ajax的URL地址　
 xhttp.open("GET",url,true);
 xhttp.setRequestHeader("If-Modified-Since","0");//不缓存
 xhttp.send(null);
}
function subs(str,len)
{
 var l=0,s=""
 for(var i=0;i < str.length;i++){
  (str.charCodeAt(i) > 128) ? l+= 2:l++
  s += str.charAt(i)
  if(l>=len) return s
 }
 return s
}
</script>

三、服务器端部分

由于上述脚本调用的是is.php，所以在is.php中加上这么一个接收处理脚本，当然你可以根据实际需要进行添加，比如查询数据库等操作，然后修改输出结果即可。

<?php

$k = $_GET['wskw'];

echo 'Your Keyword is '. $k;

?>