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

<iframe align="top" marginwidth="0" marginheight="0" src="http://www.zealware.com/csdnblog01.html" frameborder="0" width="728" scrolling="no" height="90"></iframe>

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">

<?php <br/>include_once("server1.server.php"); #servidor para XAJAX
$xajax->printJavascript(); //这个地方是关键，所以的函数在这里会自动生成
?>

接着，我们在html里面建立

这里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.="

." onclick=\"javascript:document.getElementById('cfdd').value='$cfdd';gsc_hide(document.getElementById('search-results'));\" "
.">$cfdd

";
}
$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的样例。

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=508265