Primer AJAX Suggest aplikacije - prvi deo

Kao što najverovatnije već znate AJAX može da se upotrebi i za kreiranje interaktivnijih aplikacija.

U ovom članku mi ćemo demonstrirati kako web stranica može onlajn da komunicira sa serverom dok korisnik unosi podatke u standardnu HTML formu.

Objašnjenje - HTML Forma

Forma na gornjoj slici ima sledeći HTML kod:

<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>

<p>Suggestions id="txtHint"></span></p>

Kao što možete da vidite to je samo jednostavna HTML forma sa input poljem koje se zove "txt1".

Atribut događaja za input polje definiše funkciju koja će biti pokrenuta pomoću onkeyup događaja.

Pasus ispod forme sadrži span koji se zove "txtHint". Ovaj span se koristi kao okvir za držanje podataka preuzetih sa web servera.

Kada korisnik ubaci podatke, funkcija po imenu "showHint()" se izvršava. Izvršavanje funkcije je pokrenuto od strane "onkeyup" događaja. Drugim rečima: Svaki put kada korisnik podigne prste sa tastature unutar input polja, poziva se showHint funkcija.

Objašnjenje - showHint() funkcija

The showHint() funkcija je u suštini veoma jednostavna JavaScript funkcija postavljena u sekciju HTML stranice.

Funkcija sadrži sledeći kod:

function showHint(str)
{
if (str.length==0)
  {
   document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="gethint.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);

}

Funkcija se izvršava svaki put kada se karakter unese u input polje.

Ako postoji neki unos u tekstualnom polju (dužina niza > 0) funkcija izvršava sledeće akcije:

• Definiše url (ime fajla) koji se šalje serveru
• Dodaje parametar (q) url-u sa sadržajem input polja
• Dodaje nasumični broj kako bi sprečio sever da upotrebi keširani fajl
• Kreira XMLHTTP objekat, i kaže objektu da izvrši funkciju koja se zove stateChanged kada se odigra promena
• Otvara XMLHTTP objekat sa datim url-om.
• Šalje HTTP zahtev serveru

Ako je input polje prazno, funkcija jednostavno briše sadržaj txtHint okvira.

Objašnjenje - GetXmlHttpObject() funkcija

Gore opisani primer poziva funkciju koja se zove GetXmlHttpObject().

Namena ove funkcije je da reši problem kreiranja različitih XMLHTTP objekata za različite pretraživače. 

Funkcija je prikazana dole:

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;

}

Objašnjenje - stateChanged() funkcija

stateChanged() funkcija sadrži sledeći kod:

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

stateChanged() funkcija se izvršava svaki put kada se stanje XMLHTTP objekta promeni.

Kada se stanje promeni na 4 ("complete"), sadržaj txtHint okvira će biti ispunjen sa tekstom odgovora.