java suggest_一分钟学会实现Suggest功能的AJAX样例 | 学步园

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

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

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

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

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

." οnclick=/"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的样例。