====== Ajax a PHP ====== ====1.==== - Budeme kontrolovat, jestli zadané jméno není na wordlistu. - Po události "blur" na poli pro jméno stáhneme požadavkem [[http://course-zwa.felk.cvut.cz/passwords.txt|soupis jmen]] a ověříme, že to zadané na něm není. Prohlédněte si [[http://jsfiddle.net/ondras/ach6g/|zadání]]. ====2.==== Cílem cvičení je vytvořit funkční demo našeptávače: při psaní do textového políčka se zobrazují návrhy doplnění, které (na základě zadaného textu) vybírá serverová strana. ===== Architektura řešení ===== Aplikace sestává ze dvou komponent: * serverová komponenta filtruje slovník dle zadaného výrazu a vrací našeptávaná slova, * klientská komponenta při interakci se vstupním polem posílá dotazy na server a zobrazuje odpovědi. ===== Úkoly ===== - doplnit chybějící kód v ''client/script.js'' - naimplementovat serverovou stranu ===== Poznámky ===== - třetí parametr pro ''XMLHttpRequest::open'' určuje asynchronnost požadavku - parametr pro ''XMLHttpRequest::send'' obsahuje POST data - onreadystatechange callback se vykonává v kontextu požadavku (''this instanceof XMLHttpRequest'') - data přenášejte v triviálním textovém formátu - položky odděleny znakem nové řádky ===== Další možnosti vylepšení ===== * Posílat dotaz až po timeoutu (tj. ne po každém stisku klávesy) * Data nenačítat ze souboru, ale z databáze * Reagovat na vložení textu myší * Našeptávané termíny nejen zobrazovat, ale umožnit též jejich výběr (myší, klávesnicí) * Vylepšit transportní formát o např. zvýrazňování ===== Příprava ===== {{http://course-wa1.felk.cvut.cz/~vlachzd1/09/start.html | html stránka}} ===== Řešení ===== /**{{:courses:b6b39zwa:tutorials:09:ajax_reseni.zip|Řešení}}**/ ===== Odkazy ===== * [[https://developer.mozilla.org/en-US/docs/Web/JavaScript | MDN Javascript rozcestník]] * [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide | MDN Javascript Quick Giude]] * [[https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest | MDN XMLHTTPRequest]] * [[http://www.w3schools.com/js/|W3 Schools - hezký tutoriál s interaktivním psaním javascriptu]]