一分鐘學會實現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.="

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