Header

JavaScript Ajax

Pošalji komentar

Ocenite članak

 

Ajax predstavlja jednostavnu, ali efikasnu tehniku razmene informacija između web stranice i web servera, pri čemu korisnik ostaje na istoj web stranici. Ajax nije poseban programski jezik, već samo kombinacija JavaScript-a i po potrebi XML-a.

Ova tehnika se može koristiti za delimičnu izmenu sadržaja stranice (npr. praćenje rezultata u realnom vremenu), kao deo sistema kontrole unosa podataka itd.

Primer



Princip rada je najlakše pokazati primenom iframe tehnike. Napravimo web stranicu sa sledećim elementima:

  • Naslov (<h1>)
  • Kontejner za prikaz vesti (<div id="vest">)
  • Web obrazac <form> koji sadrži samo dugme "Klikni me!"
  • Embedovanu stranicu (<iframe>)


index.php
1
<?php
2
3
if ($_POST) {
4
print "Ovde sam!";
5
exit;
6
}
7
8
?>


index.html
1
<style type="text/css">
2
iframe { width: 100%; height: 200px; margin-top: 50px; border: 1px solid blue }
3
#vest { margin: 20px 0px }
4
</style>
5
6
<h1>Ovo je neka vest</h1>
7
<div id="vest"></div>
8
9
<form method="post" target="ajaks">
10
<input type="submit" name="submit" value="Klikni me!">
11
</form>
12
13
<iframe name="ajaks"></iframe>


Kako radi ovaj kod? Obratite pažnju na tri stvari:

  • <div> kontejneru je dodeljen id="vest". Trenutno je prazan.
  • U obrascu <form>, parametru target je dodeljena vrednost "ajaks".
  • Primetite da je "ajaks" ime embedovane stranice (<iframe name="ajax">).


To znači da kada se klikne na dugme, izvršavanje programa će se nastaviti u iframe-u gde će biti ispisana poruka.