AJAX Uputstvo

ajaxslikaAJAX se zasniva na korišćenju JavaScript i HTTP requests. AJAX nije neki novi jezik već kombinacija već postojećih standarda. Dakle ono što je potrebno da znate jeste HTML i JavaScript. AJAX je postao pupularan 2005 godine sa Google Suggest. Najveća osobina AJAX-a je to što ne morate da ponovo učitavate stranicu kada komunicirate sa serverom već možete samo dio stranice. To se postiže sa XMLHttpRequest objektom.

Za demostraciju konekcije AJAX-a i PHP-a koristićemo formu sa dva tekst polja. U prvom tekst polju kucaćemo neki tekst a u drugom će se taj isti tekst konvertovati u velika slova.

[c]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />

<title>Ajax – PHP primjer</title>

</head>

<body>

<form name="testForm">

Prvi tekst: <input type="text" onkeyup="pozovi();" name="prvi" id="prvi" />

Drugi tekst: <input type="text" name="drugi" id="drugi" />

</form>

</body>

</html>
[/c]

Kao što možemo vidjeti poziva se fukcija pozovi na događaj onkeyup. Prije nego što napravimo funkciju pozovi moramo da napravimo fukciju za kreiranje objekta XMLHttpRequest, i ta funkcija se zove getHTTPObject.

[c]function getHTTPObject(){

if (window.ActiveXObject)

return new ActiveXObject("Microsoft.XMLHTTP");//za IE7+, Firefox, Chrome, Opera, Safari

else if (window.XMLHttpRequest)

return new XMLHttpRequest(); // za IE6, IE5

else {

alert("Browser ne podržava AJAX.");

return null;

}

}[/c]

Posle ove kreiramo funkciju pozovi i setDrugi koja se poziva na početku fukcije pozovi.

[c]function setDrugi(){

if(httpObject.readyState == 4){

document.getElementById(’drugi’).value = httpObject.responseText;

}

}

function pozovi(){

httpObject = getHTTPObject();

if (httpObject != null) {

httpObject.open("GET", “ajax.php?text=" +document.getElementById(’prvi’).value, true);

httpObject.send(null);

httpObject.onreadystatechange = setDrugi;

}

}[/c]

Da pošaljemo zahtjev koriste se dvije metode open() i send(). Open() metoda ima tri argumenta. Prvi argument je onaj koji definiše način komunikacije sa serverom Post ili Get. Drugi je adresa skripte na serveru, dok je treći informacija da li je će se zahtjev izvršiti asihrono. Posle poslatog zahtjeva moramo provjeriti stanje zahtjeva koje može biti u pet stanja. Pet stanja:

* 0 zahtjev nije inicijalizovan
* 1 zahtjev se učitava
* 2 zahtjev je učitan
* 3 zahtjev je u procesuiranju
* 4 zahtjev je završen

Naravno nama treba 4. stanje i provjeramo da li je httpObject u tom stanju. Upišemo u polje drugi sa onim što nam je server poslao sa funkcijom setDrugi.

Još treba da napravimo na serveru ajax.php:

[c]

<?php

if (isset($_GET[‘text’]))

echo strtoupper($_GET[‘text’]);

?>

[/c]

ajx.html i ajax.php

I to je to. 🙂

Leave a Reply