一分鐘學會實現Suggest功能的AJAX範例

來源:互聯網
上載者:User

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

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。