一分钟学会实现Suggest功能的AJAX样例

Ajax不是什么新鲜的技术，微软98年出的MSDN里面，就介绍了msxml,xmlhttpreuqest的远程读取xml文档的功能。只不过那个时候B/S技术远没有今天这么热，所以ajax被翻出来换了个好听的名字重新炒作。

ajax的实现技术有很多。当然我指的是封装方式，这里我是用一种我认为最合理的封装的ajax框架：xajax

下面我们就看看如何通过简单的代码完成一个google suggest一样的应用的。

1 首先，我们建立一个HTML，在里面拷贝。当然这个代码不需要你写，只要拷贝就行

<link href="styles/estilos.css" rel="stylesheet" type="text/css"/>
<script language="JavaScript" src="javascripts/ejemplo2.js"></script>
<?php
 include_once("server1.server.php"); #servidor para XAJAX
 $xajax->printJavascript(); //这个地方是关键，所以的函数在这里会自动生成
?>

接着，我们在html里面建立

<input  type="text" name="cfdd" size="40" maxlength="100"  onkeydown="buscar();" value="<?php echo stripslashes($cfdd) ?>" >
 <br><div id="search-results"></div>

这里onkeydown的时候，我们根据用户的输入取得相应的suggest

2 ejemplo2.js里面

var inter = null;
 //这里调用php中的函数
function buscar(){
  if (inter) clearInterval(inter);
  inter= setInterval("xajax_busc(document.getElementById('cfdd').value);clearInterval(inter);",300);
  gsc_show(document.getElementById('search-results'));
}

function gsc_show(elt)
{
    if (elt) elt.style.display = 'block';
}

function gsc_hide(elt)
{
    if (elt) elt.style.display = 'none';
}

3 server1.server.php里面

//这个函数就是查询suggest的函数，这里我们用了一个数组，实际使用时，这个数组是根据DB查询得到的

function busc($bu){
if (($bu!="") || ($bu==" ")){
 $objResponse = new xajaxResponse();
 $cfdds = array("主机房","网络办公室","小机房","研20栋");
 $sa="";

 foreach ($cfdds as $cfdd) {
  $sa.="<div class=\"sr\"><span class=\"srt\" "
      ." onclick=\"javascript:document.getElementById('cfdd').value='$cfdd';gsc_hide(document.getElementById('search-results'));\" "    
      .">$cfdd</span>
      </div>";
 }
 $objResponse->addAssign("search-results","innerHTML",$sa);
 return $objResponse->getXML();
 }
 else{
 $objResponse = new xajaxResponse();
 $objResponse->addAssign("search-results","innerHTML","");
 return $objResponse->getXML();
 }
}

//最后注册这个函数

$xajax = new xajax("server1.server.php","xajax_",false);
$xajax->registerFunction("busc");

这样，suggest功能就可以实现了。你一定觉得很奇怪，既然是操作ajax，怎么既没有调用xmlhttprequest也没有解析xml，因为这些操作都被xajax封装了。

其实我么操作ajax的目的就是 html->javascript->xmlhttprequest->php->xml->javascript->html

那现在我们只要html->javascript.......->php->......->......->html 其中三个地方被隐藏起来了。对用户来说就非常简单了。

后面我还会演示如何扩展xajax实现，自动读取级联的Select的样例。