Do módy proniká tzv. "web 2.0" a s ním i rošíření technologie AJAX. Podíváme se jak s ním pracovat.
Tvoříme chat
Nejdříve si projdeme seznam věcí které budete potřebovat. Zapisovat budeme do těchto tří souborů: index.html (formulář pro odeslání, zobrazení všech příspěvků), ajax.js (veškeré kódy v JS), uloz_prispevek.php (odeslání nového příspěvku do databáze).
Pak je tu samozřejmě už zmíněná databáze. Potřebovat budete tabulku se třemi sloupci: ID, prispevek, nick. Můžete si samozřejmě přidat další sloupce, jako např. datum, ale toto pro pochopení stačí.
Index.html
Jako první musíte načíst soubor s javaskriptem:
<script type="text/javascript" src="ajax.js"></script>
Pak přidejte funkci do tagu BODY:
<body onload="zobraz()">
Co funkce dělá vysvětlím až se k ní dopracujeme.
Pak už stačí přidat formulář pro odeslání nového příspěvku a prázdný span:
<div>
<form action="javascript:get(document.getElementById('chat'));" name="chat" id="chat"> Váš nick: <input type="text" id="nick"/><br />
Vaše zpráva: <input type="text" id="text"/>
<input type="submit" value="Odeslat" />
</form>
<span name="prispecky" id="prispevky">
</span>
</div>
Tím jsme se souborem indes skončili.
Uloz_prispevek.phpTento soubor obsahuje akorát uložení příspěvku do databáze a výpis všech příspěvků.
<?php
# Pripojeni k databazi
$link = mysql_pconnect('server', 'user', 'password');
$db = mysql_select_db('ajaxchat');
mysql_query("SET NAMES utf8");
# Pokud uzivatel odeslat nejaky text ulozi se prispevek do databaze
if($text != ''){
$uloz = "insert into prispevky
values('', '$text', '$nick')";
$uloz_result = mysql_query($uloz, $link);
}
# Nacteni 10 nejnovejsich zprav
$zobraz_query = "select * from prispevky order by ID desc limit 10";
$zobraz_result = mysql_query($zobraz_query, $link);
# Zobrazeni
while ($zobraz = mysql_fetch_array($zobraz_result)) {
echo
"<p><b>".$zobraz[nick]."</b>
- ".$zobraz[prispevek]."</p>";
}
?>
Ajax.jsTeď se dostáváme k tomu nejdůležitějšímu, k použití AJAXu. Rozebereme si ho po jednodtlivých funkcích.
ms=0;
stav=0;
function zobraz() {
setTimeout("zobraz();",10);
if (stav==0) {
stav=1;
then=new
Date();
then.setTime(then.getTime()-ms);
}else{
stav=0;
now=new
Date();
ms=now.getTime()-then.getTime();
}
// Po kolika sekundach se obnovi vypis prispevku
max_s = 0.5;
s = Math.round(ms / 1000);
if(s > max_s) {
var poststr =
"";
// Obnoveni prispevku
makePOSTRequest('uloz_prispevek.php', poststr);
ms = 0;
}
}
Jednoduchá funkce, která zařídí aby se příspěvky znovunačetli po určitém časovém intervale.
var http_request = false;
function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new
ActiveXObject("Msxml2.XMLHTTP");
} catch
(e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Nepovedlo se navazat spojeni');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
result = http_request.responseText;
document.getElementById('prispevky').innerHTML = result;
} else {
alert('Pri odeslani zpravy vznikl problem');
}
}
}
Všechny funkce budou použity pro navázání spojení s námi vybraném souboru. To zajišťuje tato funkce:
function get(obj) {
var poststr = "text=" +
encodeURI( document.getElementById("text").value ) +
"&nick=" + encodeURI( document.getElementById("nick").value );
makePOSTRequest('uloz_prispevek.php', poststr);
document.chat.text.value="";
}
Všechny soubory můžete stahovat
zde.
Webové stránky Křesťanského společenství Nýrsko.
Stránky nízkoprahového klubu Alfa. Hodně fotek, vzkazy, akce...
CSMSave je web pro hru Czech Soccer Manager (zkratka CSM), z které můžete stahovat různé uložené hry, nebo tam svojí hru také nahrát.
Webovky naší nýrské mládeže. Tzv. velká mládež o třech lidech. Ještě tam nejsou úplně dodělaný texty, ale už je tam jedna scénka a postupně se bude vše přidávat.