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.