AJAX Shoutboard v1.0
Na téma AJAX bylo napsáno již desítky článků. Proto se o této, poměrně ještě mladé technologii, nebude moc bavit. My si, ale pomocí něj naprogramuje AJAX Shoutboard.
Warning: Parameter 2 to TexyPhraseModule::processPhrase() expected to be a reference, value given in /data/www/www_napskaut_cz/ondra/texy.php on line 1043 Warning: Parameter 2 to TexyHtmlModule::processTag() expected to be a reference, value given in /data/www/www_napskaut_cz/ondra/texy.php on line 1043 Warning: Parameter 2 to TexyHtmlModule::processTag() expected to be a reference, value given in /data/www/www_napskaut_cz/ondra/texy.php on line 1043 Warning: Parameter 2 to TexyHtmlModule::processTag() expected to be a reference, value given in /data/www/www_napskaut_cz/ondra/texy.php on line 1043 Warning: Parameter 2 to TexyHtmlModule::processTag() expected to be a reference, value given in /data/www/www_napskaut_cz/ondra/texy.php on line 1043 Warning: Parameter 2 to TexyPhraseModule::processPhrase() expected to be a reference, value given in /data/www/www_napskaut_cz/ondra/texy.php on line 1043 Warning: Parameter 2 to TexyPhraseModule::processPhrase() expected to be a reference, value given in /data/www/www_napskaut_cz/ondra/texy.php on line 1043 Warning: Parameter 2 to TexyPhraseModule::processPhrase() expected to be a reference, value given in /data/www/www_napskaut_cz/ondra/texy.php on line 1043 Warning: Parameter 2 to TexyPhraseModule::processPhrase() expected to be a reference, value given in /data/www/www_napskaut_cz/ondra/texy.php on line 1043 Warning: Parameter 2 to TexyPhraseModule::processPhrase() expected to be a reference, value given in /data/www/www_napskaut_cz/ondra/texy.php on line 1043 Warning: Parameter 2 to TexyPhraseModule::processPhrase() expected to be a reference, value given in /data/www/www_napskaut_cz/ondra/texy.php on line 1043 Warning: Parameter 2 to TexyPhraseModule::processPhrase() expected to be a reference, value given in /data/www/www_napskaut_cz/ondra/texy.php on line 1043Zkratka AJAX znamená v plném názvu .
Celý tento programovací jazyk slouží k získávání dat ze serveru bez nutnosti jejich znovunačítání.
Praktický příklad si ukážeme na již zmiňovaném Ajax Shoutboard.
Výsledek bude vypadat takto.
- Celý balíček se skládá z těchto částí:
- shoutboard.js, javascriptová část zpracovávající zobrazování shoutboardu, komunikaci se serverem, zobrazování/skrývání formu
- nastaveni.php, v tomto souboru je třeba, aby jste nastavili spojení s db, počet zobrazovaných zpráv a zalomení řádku
- pridat.php, tento soubor nám přidá zprávu do db
- vypis.php, skript tahá údaje z db
- style.css, pomocí tohoto souboru můžete velmi jednoduše a efektně nastylovat Váš Ajax Shoutboard
- instalace.php no a nakonec nesmí chybět instalace celé aplikace
Stahovat Ajax Shoutboard můžete zde.
shoutboard.js
Pouze jen velmi zlehka a okrajově si povíme základní princip AJAXových aplikací.
Funkce nám vytváří požadavky přes http protokol. Za jistých okolností by stačilo pouze:
httpp = new XMLHttpRequest();ale jelikož vytváří tento objekt přes prvky, tak musíme použít následující konstrukci:
function zaslat(url, prvek, uspech, chyba) {
document.getElementById(prvek).innerHTML = uspech;
try {
httpp = new XMLHttpRequest();
}
catch(e){
try {
httpp = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e){
try {
httpp = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e){
httpp = false;
}
}
}
httpp.onreadystatechange = function() { vraceno(prvek, chyba); };
httpp.open('POST','pridat.php',true);
httpp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
httpp.send(url);
document.getElementById('zprava').value='';
}onreadystatechange – nadefinujeme f-ci, která
nám vrací odpověď serveru, v našem případě jde o funkci .
– otevře soubor, který vstupní data bude zpracovávat, mimo to se
udává jakou metodou (POST nebo GET) a pro
nás důležitý i třetí parametr, který řekne, zda má být přesnos
asynchronní (true) anebo synchronní (false)
setRequestHeader – nastavení hlavičky stránky
send – předávání parametrů
Výpis
jedinou neduhou této aplikace je, že do musíte zavolat :
<body onload="return zpracuj('ok', 0);">Takže pokud by někdo věděl, jak to rozchodit i bez toho, budu moc vděčný.
Doufám, že se to někomu bude líbit a rád to využije.
Novější: Děkuji 7 statečným >>>
Starší: <<< Valentýn
Komentáře:
| Ovec - mail - 29.06.2009 - 12:31:14 | |
Zprávy vkládané se znakem Ampersand jsou za tímto znakem ustřihle. |
|
| m6i6ch6al - web - 26.11.2009 - 12:49:36 | |
|
|
| aa - web - 23.08.2010 - 16:08:43 | |
|
|
|
Aktuální články
- Pozvánky na Google Wave - 04.11.2009
- Novinky v Google Reader - 13.08.2009
- Google Wave: přizvání dalších 100 000 testerů - 22.07.2009
- Google Drive namísto Google Docs? - 22.07.2009
- Snadné přidání tabulky do Google Prezentace - 21.07.2009