Aplikace AJAXChat
Jako ukázkovou aplikaci sem zvolil velmi primitivní chat. Je složen z jedné stránky na které se nachází historie chatu a dále dvou input boxů nick a message. Jejich význam je zřejmý z anglického pojmenování. Input box nick se v průběhu práce s chatem nemění, a jeho hodnota je odesílaná na server společně se zprávou. Zato input box message je vymazán při každém odeslání zprávy.
Zprávu je možné odeslat jak tlačítkem Odeslat, tak klávesou Enter v input boxu zprávy. Každých 10 vteřin je obnovena historie chatu, ta se zobrazí nad input box. I když přiložený ukázkový kód obsahuje všechny části aplikace, tedy i tzv. backend, nebudu ho v tomto článku dále nijak zmiňovat a vrátím se k němu v jednom z dalších článků.
Celý javascriptovský kód je zapsán v hlavní a jediné stránce aplikace index.html. HTML kód prvků vypadá takto:
<div id="history"></div>
<label>Přezdívka: <input id="nick” type="text” name="nick” value="guest"/></label>
<label>Zpráva: <input id="message” type="text” name="message” value="” size=”68„/></label>
<input id="submit” type="button” value="Odeslat"/>
Samozřejmostí funkcionality je vložení javascriptovské knihovny jak.js (jak_compressed.js) a pro naší ukázku i xml.js. Význam druhé knihovny vysvětlím níže v článku a její použití je čistě ilustrativní.
Vytvoření asynchronního dotazu na server
Pokud víte jak objekt XMLHttpRequest použít, případně znáte známou fintu FŇ jak vytvořit tento objekt v IE verze 6, vezte, že zde je to stejné až na tu fintu, tu má již JAK v sobě. Dále však umí JAK velmi snadno nabindovat funkce na různé stavy requestu, umí ho zrušit, umí vytvořit několik typů takových requestů a to jak metodou GET tak POST. Do dalších podrobností nebudu zacházet a rovnou ukážu kód:
function send(e, elm){
var m_input = JAK.gel('message');
var req = new JAK.Request(JAK.Request.XML,
{asyc: true, method: "post"});
req.setCallback(window, check_send);
req.send("post", {nick: JAK.gel('nick').value,
message: m_input.value});
m_input.value = '';
}
function message_key(e, elm){
if (e.keyCode == 13)
send();
}
JAK.Events.addListener(
JAK.gel('submit'),
'click',
window,
'send');
JAK.Events.addListener(
JAK.gel('message'),
'keydown',
window,
'message_key');
Funkce send je volána při stisku klávesy Enter v input boxu zprávy, nebo po stisknutí tlačítka Odeslat. Vlastní AJAXová funkcionalita je obsažena v prostředních řádcích funkce. Jde o vytvoření objektu JAK.Request, nastavení callbacku a odeslání requestu na server metodou POST. O propojení (nabindování) funkce send se starají nám již známé metody addListener objektu JAK.Events.
Zpracování odpovědi serveru
Mechanismus zpracování odpovědi serveru je závislý na typu požadavku. Ty, které JAK umí jsou JAK.Request.TEXT (v našem příkladu ve funkci read_history), JAK.Request.XML (funkce send), JAK.Request.JSONP a JAK.Request.BINARY. S použitím dvou posledním odkážu laskavého čtenáře na dokumentaci k objektu
JAK.Request. Zpracování typu TEXT a XML si ukážeme nyní:
function check_send(data, status){
if (status != 200){
console.log(data);
JAK.gel('message').style.backgroundColor = '#f88';
return;
}
var result = data.documentElement;
var code = result.getAttribute('code');
if (code != 200){
console.log(JAK.XML.textContent(result));
JAK.gel('message').style.backgroundColor = '#f88';
return;
}
JAK.gel('message').style.backgroundColor = '#fff';
}
Callback funkce dostane při volání dva parametry, status (HTTP status kód), tedy ve většině případů 200 a data, což je vlastně tělo odpovědi. Callback check_send zpracovává XML request, proto používá documentElement a metody getAttribute. Zpráva posílána v odpovědi je pro ilustraci uvedená jako textový obsah xml elementu request, proto k jejímu čtení potřebujeme metodu textContent objektu JAK.XML definovaného v souboru xml.js. Odpověď na request post vypadá například takto:
<?xml version="1.0" encoding="utf-8"?>
<result code="200">Ok</result>
Zpracování textového requestu je o to jednoduší, prostě stačí použít data:
function set_history(data, status){
var history = JAK.gel('history');
if (status != 200){
console.log(data);
history.style.backgroundColor = '#f88';
return;
}
history.style.backgroundColor = '#eee';
history.innerHTML = data;
}
function read_history(){
var req = new JAK.Request(JAK.Request.TEXT,
{asyc: true, method: "get"});
req.setCallback(window, set_history);
req.send("history");
}
read_history();
setInterval(window.read_history, 10000);
Ukázali jsme si tedy jak snadno implementovat AJAX pomocí knihovny JAK. Doufám že z uvedeného příkladu je vše jasné a snadno pochopitelné. V posledním díle tohoto seriálu se podíváme na mapové API, které je na knihovně JAK postaveno. K našemu chatu se ale určitě brzo vrátím.