Vyhledávání v JavaScriptu
Školení, která pořádám 
- 7.6.2010 Návrh a používání MySQL databáze
- 8.6.2010 Programování v PHP 5
- 9.6.2010 Výkonnost webových aplikací
- 10.6.2010 Knihovna jQuery a AJAX prakticky
- 11.6.2010 Bezpečnost PHP aplikací
- Úvod do PHP
- JavaScript a AJAX
- Konfigurace a výkonnost MySQL
Pokud nemáme na vyhledávání moc vysoké nároky, není moc složité ho na serveru implementovat. Třeba na tomto serveru se používá prosté:
<?php mysql_query("SELECT * FROM clanky WHERE clanek LIKE '%" . mysql_real_escape_string($_GET["search"]) . "%'"); ?>
Využívá se faktu, že všechna data jsou uložena v databázi, kam podle mě jedině patří. Pokud je dat v databázi větší množství, je možné využít např. fulltextové indexy. Pokud jsou texty i v souborech, můžeme je procházet třeba funkcí glob a text hledat např. funkcí strpos.
Co ale v případě, kdy služby serveru nelze použít? Texty z tohoto serveru je možné stáhnout a pracovat s nimi bez připojení k Internetu. Vyhledávat v nich jde potom samozřejmě třeba příkazem grep nebo jiným obecným vyhledáváním souborů, z prostředí webového prohlížeče by to ale jistě bylo pohodlnější.
V moderních prohlížečích lze toto vyhledávání zajistit díky technologii AJAX:
<table cellpadding="3" cellspacing="0">
<tbody id="vysledky"></tbody>
</table>
<script type="text/javascript">
function obsluha(xmlhttp) {
if (xmlhttp.readyState == 4) {
var match = xmlhttp.responseText.match(/<h1><a href="(.*)">(.*)<\/a><\/h1>([^˙]*)<!-- konec textu -->/);
if (match && (match[2] + match[3]).search(search) > -1) {
nalezeno++;
var tr = document.getElementById('vysledky').appendChild(document.createElement("TR"));
tr.appendChild(document.createElement("TD")).innerHTML = '<a href="' + match[1] + '">' + match[2] + '</a>';
}
zbyva--;
if (!zbyva && !nalezeno) {
alert('Zadaný řetězec nebyl nalezen.');
}
}
}
var search = new RegExp(location.search.replace('?search=', ''), 'i');
var nalezeno = 0;
var zbyva = 1; // celkový počet prohledávaných souborů
send_xmlhttprequest(obsluha, 'GET', 'ajax.html');
// další soubory k prohledání
</script>
Prohlížeč začne při zavolání funkcí send_xmlhttprequest paralelně prohledávat všechny soubory a do tabulky vypisovat odkazy na ty, kde byl hledaný text nalezen. Při vytváření tohoto kódu jsem narazil na několik nástrah:
- Nelze použít objekt responseXML, protože prohlížeč při načítání souboru z disku nepošle správné hlavičky.
- Pro výpis dat se pochopitelně nedá volat metoda document.write. Funkce
obsluhase totiž nevolá z konkrétního místa dokumentu, ale volá ji sám prohlížeč při stažení dat. - V IE mi nefungoval ani kód
document.getElementById('vysledky').innerHTML += '…', bylo nutné použít DOM. - Pokud výsledky chceme vypisovat do tabulky, měla by tato tabulka obsahovat značku tbody. IE si ji totiž jinak domyslí a pracuje s ní i na úrovni DOMu, Firefox ne.
- Znak
.v regulárním výrazu strefí jakýkoliv znak kromě konce řádku. Na rozdíl od PHP ale neexistuje modifikátors, který by toto chování změnil. Pokud se jako náhrada použije regulární výraz(.|\n), je kód v IE příšerně pomalý. Vyřešit je to možné tak, že se\npřed hledáním nahradí jiným znakem nebo se použije výčet všech možných znaků včetně znaku konce řádku (nebo negace nepoužitého znaku).
Přijde mi, že k řešení je potřeba se spíše prokličkovat přes řadu nástrah, z nichž největší je rozdílné chování prohlížečů.
Přijďte si o tomto tématu popovídat na školení JavaScript a AJAX.
Diskuse
Martin:
lol! Tenhle blog mě nikdy nezklame, sranda je tu větší než na thedailywtf.com! Autorovy nápady stojí za to. Vyhledávání offline pomocí AJAX přímo v kódu stránek..... cha cha cha chaProgramátor opravdu není ten, kdo umí řadit příkazy za sebe a rozchodit kdejakou nesmyslnou myšlenku...
Garçon:
Taky jsem se musel smát a říkal jsem si, že je to legrační blbost, ale pak jsem si řek, že třeba pro hledání v dokumentaci na disku to může být řešení.
Jakub Vrána:
Nevím, co ti na myšlence připadá nesmyslného. Uživatelé jsou zvyklí na hledání přímo na stránkách a když ho nejde realizovat pohodlně na straně serveru (ať už u zmiňované verze pro stažení nebo třeba u HTML nápovědy), tak popisuji, jak se dá realizovat v JavaScriptu.Co převratného jsi nám vlastně mudrováním o "řazení příkazů za sebe" chtěl sdělit?
Spud:
Me to pripada jako velice elegantni reseni napriklad u CD prezentaci, supr!ATom:
Hezké. Jen aby někdo nezapomněl na předchozí články o SQL injection a fakt nedal do SQL příkazu jen $_GET[search] ;-) Jakub Vrána:
V patičce stránky je uvedeno, že skripty předpokládají nastavení magic_quotes_gpc=On. S tímto nastavením je kód zcela v pořádku, více to rozebírám právě ve zmiňovaném článku: http://php.vrana.cz/obrana-proti-sql-injection.php.
Jakub Vrána:
Kód jsem předělal na magic_quotes_gpc = Off a zmínil jsem to v patičce.
JKa:
Možná by stálo za to zmínit i možnost jednoduchého vyhledávání na stránkách pomocí Google a modifikátoru site:www.example.com. U stránek, kde nejsou časté změny to může stačit. Jakub Vrána:
Toto vyhledávání ale pochopitelně nejde použít v případě, kdy stránky nejsou veřejně dostupné a třeba se ani nezobrazují přes webový server. Právě na tento případ je totiž článek zaměřen.
Jiný Martin:
Martinovi z prvního postu: Vrátil jsem se k tomuto článku, jen abych napsal, že právě pomocí regexpů v JS má řešeno vyhledávání třeba nápověda k Adobe Photoshop.Zkus příště trochu přemýšlet, než začneš zaklínat thedailywtf.
