× Aktuálně z oboru

SHIELD Experience Upgrade 7 – méně hledání a více zábavy [ clanek/2018052902-shield-experience-upgrade-7-mene-hledani-a-vice-zabavy/ ]
Celá zprávička [ clanek/2018052902-shield-experience-upgrade-7-mene-hledani-a-vice-zabavy/ ]

Ajax v praxi - Jednoduché vyhledávání

[ http://programujte.com/profil/1100-tomas-bobek/ ]Google [ ?rel=author ]       [ http://programujte.com/profil/118-zdenek-lehocky/ ]Google [ ?rel=author ]       12. 2. 2009       20 394×

V této části si ukážeme, jak na realtime vyhledávání v poli prvků vytvořeném v PHP.

Jako základ tohoto vyhledávání budeme potřebovat input typu text s aplikovanou událostí onKeyUp, z čehož plyne, že vyhledávání se bude obnovovat při každém úderu do klávesnice, a to voláním funkce ajax() s parametrem this.value, což značí hodnotu vepsanou do textového pole. Jak už jsem řekl, vyhledávání bude probíhat okamžitě, proto není potřeba žádného odesílacího tlačítka. Nakonec si připravíme div s identifikátorem vysledek, do kterého necháme zobrazovat výsledky vyhledávání.

<input type="text" onKeyUp="ajax(this.value);"><br /> 
<div id="vysledek"></div>

Klíček ke každé Ajax aplikaci je XMLHttpRequest objekt. Nyní bych se odkázal na náš kurz Ajaxu [ http://programujte.com/index.php?rubrika=296-webdesign&sekce=362-ajax&kategorie=363-kurz-ajax ], kde zjistíte zásady vytváření tohoto objektu pro různé prohlížeče. Já vám zde ukážu již hotový kód.

var xmlhttp; 
try { 
  xmlhttp = new XMLHttpRequest(); 
} 
catch (e) { 
  try { 
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
  } 
  catch (e) { 
    try { 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    catch (e) { 
      alert("Váš prohlížeč nepodporuje AJAX!"); 
      return false; 
    } 
  } 
}

Nyní, když už máme vytvořený XMLHttpRequest objekt, potřebujeme načíst data ze serveru. K tomu nám poslouží bohatě 2 metody – open() a send(). Metoda open() bude obsahovat 3 parametry. První parametr určí, jakou metodou budeme odesílat dotaz (na výběr máme POST a GET), druhý parametr nastaví url server-side scriptu a třetí parametr nastaví možnost manipulování s metodou (možnosti jsou 2 – true/false). Metoda send() je přesná cesta k odeslání dotazu na server.

Po odeslání dotazu na server potřebujeme získat data, která jsme pomocí server-side scriptu obdrželi. K tomu nám pomůže funkce onreadystatechange, která může vrátit 5 různých hodnot:

  • 0 – dotaz nebyl inicializován
  • 1 – dotaz byl vystaven
  • 2 – dotaz byl odeslán
  • 3 – dotaz se zpracovává
  • 4 – dotaz byl zpracován

Náš script bude kontrolovat hodnoty a jakmile dostaneme hodnotu 4, zobrazíme výsledek uživateli.

<html>
  <head> 
    <script type="application/javascript;version=1.7">
      function ajax(text) { 
        var xmlhttp; 
        try { 
          xmlhttp = new XMLHttpRequest(); 
        } 
        catch (e) { 
          try { 
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
          } 
          catch (e) { 
            try { 
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e) { 
              alert("Váš prohlížeč nepodporuje AJAX!"); 
              return false; 
            } 
          } 
        } 
        var url = 'ajax.php?data=' + text; 
        xmlhttp.onreadystatechange = function() { 
          if(xmlhttp.readyState == 4) { 
            document.getElementById('vysledek').innerHTML = xmlhttp.responseText;
          } 
        } 
        xmlhttp.open("GET", url, true); 
        xmlhttp.send(null); 
      } 
    </script>
  </head> 
  <body> 
    <input type="text" onKeyUp="ajax(this.value);"><br /> 
    <div id="vysledek"></div> 
  </body> 
</html>

A nakonec si připravíme serverový script (ajax.php), ve kterém budeme vyhledávat. Já jsem zvolil pro příklad nejjednodušší řešení – vyhledávání v předem připraveném poli, ale je možné s aplikací dále experimentovat. Použijeme cyklus for, abychom vypsali všechny položky obsahující řetězec zadaný v textovém poli. Na to nám poslouží funkce stristr(), do které budeme vkládat aktuální položku z pole a hledaný řetězec jako $GET['data'], kde data je řetězec vložený do textového pole. Položky obsahující zadaný řetězec budeme ukládat do proměnné $vysledek a na závěr je vypíšeme.

<?php 
  $polozky = array(John,Will,Kelly,Diana,Robert,Nina,George,Michael,Clint,Debora,Nick,Jeff,Kevin,Samuel,David,Peter,Patrick,Quest,Silvia,Umbro,William,Zita,Yantra,Xena,Albert,Ulrich); 
  for ($i = 0; $i < count($polozky); $i++) { 
    if (stristr($polozky[$i], $_GET[data])) { 
      $vysledek .= $polozky[$i] . "n"; 
    } 
  } 
  echo nl2br($vysledek); 
?>

To je vše k jednoduchému vyhledávání v Ajaxu. Příště se těšte na upload souborů pomocí Ajaxu.

Zdroj: http://onlinehowto.net/Tutorials/AJAX/

Článek stažen z webu Programujte.com [ http://programujte.com/clanek/2008122303-ajax-v-praxi-jednoduche-vyhledavani/ ].