Embed Size (px)
Citation preview
Ajax
Neophodno je za razumevanje narednog teksta da se poznaju neke stvari iz PHP-a
$_SERVER['PHP_SELF'] Prikazuje ime tekućeg fajla
Gdesam.php
<!DOCTYPE html>
<html>
<body>
<?php
echo $_SERVER['PHP_SELF'];
?>
</body>
</html>
PHP $_REQUEST
PHP $_REQUEST se koristi za prikupljanje podataka nakon sabmitovanja neke HTML forme.
Neophodno.php
<html>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
Unesi ime: <input type="text" name="ime">
<input type="submit" value="OK">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// prikuplja podatke iz input polja
$ime = $_REQUEST['ime'];
if (empty($ime)) {
echo "Ime je prazno";
} else {
echo 'Uneli ste ime:'.$ime;
}
}
?>
</body>
</html>
U ovom primeru imamo formu sa sabmit dugmetom. Kada korisnik klikne na Submit I time
potvrdi unete podatke forma forma podatke šalje na obradu kako je navedeno u formi. Međutim
u ovom primeru ne ide se nigde, već se ostaje na istoj strani i nastavlje sa izvršavanjem PHP
skripta. Dakle, kako stoji u daljem programu, nakon unetih i potvrđenih podataka prikazuje se na
ekranu zadato ime.
Dobardan.php
<!DOCTYPE html>
<html>
<body>
<?php
echo stristr("Dobar dan!","dan");
?>
</body>
</html>
AJAX Uvod
AJAX je nešto kao apdejtovanje dela web stranice bez riloadovanja cele stranice.
Šta je AJAX?
AJAX = Asinhroni JavaScript i XML.
AJAX je tehnika za kreiranje dinamičkih web stranica.
AJAX omogućava da se web stranica apdejtuje asinhrono razmenom male količine podataka sa
serverom iza scene. To znači da je moguće da se apdejtuju delovi web stranice, bez riloadovanja
cele stranice.
Klasična web stranica, (koja ne koristi AJAX) mora cela da se riloaduje ukoliko treba da se bilo
šta izmeni na njoj.
Primeri za korišćenje AJAX: Google Mape, Gmail, Youtube, i Facebook tabovi.
Kako AJAX RADI
AJAX je baziran na Internet Standardima
AJAX je baziran na internet standardima, ikoristi kombinaciju:
XMLHttpRequest objekta (za asinhronu razmenu podataka sa serverom)
JavaScript/DOM (za prikaz/interakciju sa informacijama)
CSS (za stilizovanje podataka)
XML (često korišćeno kao format za razmenu podataka)
AJAX aplikacije su što se tiče brauzera I platform nezavisni!
Google Sugestije
AJAX je postao popularan 2005 zbog Google, I Google Suggest.
Google Suggest koristi AJAX za kreiranje vrlo dinamičkih web interfejsova: Kada počnete da
kucate u Googlov search box, JavaScript šalje slova server I server vraća listu predloga.
U ovom PHP tutorijalu, pokazaćemo kako AJAX može da apdejtuje deo web stranice, bez
riloadovanja čitave stranice. Serverski script biće napisan u PHP-u.
PHP - AJAX i PHP
AJAX se koristi u mnogim interaktivnim aplikacijama.
AJAX PHP primer
Sledeći primer će pokazati kako web stranica može komunicirati sa web serverom dok korisnik
kuca znakove u nekom input polju.
Spisakucenika.php
<!DOCTYPE html>
<html>
<head>
<script>
function dajPredlog(str) {
if (str.length == 0) {
document.getElementById("sviucenici").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("sviucenici").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "predlozi.php?q="+str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Počni da kucaš neko ime u polju za unos teksta ispod:</b></p>
<form>
Ime: <input type="text" onkeyup="dajPredlog(this.value)">
</form>
<p>Predlozi: <span id="sviucenici"></span></p>
</body>
</html>
Objašnjenje primera
U primeru kada korisnik kuca u ulaznom polju funkcija dajPredlog se izvršava.
Funkcija se startuje na događaj kucanje na tastaturi.
Objašnjenje:
Prvo, proverava da li ulaz prazan (str.length == 0). Ako je tako, briše sadržaj predloga sviucenici
I izlazi iz funkcije sve dok ne počne novo kucanje.
Ukoliko, polje za unos nije prazno, radi sledeće:
Pravi XMLHttpRequest objekt
Pravi funkciju koja će biti izvršena kada odgovor sa server bude spreman.
Šalje zahtev PHP filu (predlozi.php) na server
Zapazite da q parametar je dodat uz predlozi.php?q="+str
Gde str promenljiva nosi sadržaj koji je unet u ulazno polje
PHP File - "predlozi.php"
Php proverava niz imena I vraća odgovarajuće ime/imena u brauzer:
PHP stristr() Funkcija
Funkcija stristr() function traži prvo pojavljivanje u stringu zadate reči.
substr(string,start,length) Definition and Usage
Funkcija substr() vraća deo stringa.
<?php
// Niz imena
$a[] = "Jovana";
$a[] = "Milica";
$a[] = "Nikola";
$a[] = "Vuk";
$a[] = "Djordje";
$a[] = "Bogdana";
$a[] = "Marko";
$a[] = "Jovan";
$a[] = "Katarina";
$a[] = "Luka";
$a[] = "Marija";
$a[] = "Rajko";
$a[] = "Zeljko";
$a[] = "Milan";
$a[] = "Milos";
$a[] = "Petar";
$a[] = "Vladana";
$a[] = "Emilija";
$a[] = "Andreja";
$a[] = "Veljko";
$a[] = "Aleksa";
$a[] = "Predrag";
$a[] = "Aleksandar";
// uzmi parameter q iz URL
$q = $_REQUEST["q"];
$predlog = "";
// pretrazi sve predloge iz niza ako je $q razlicito od praznog ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $ime) {
if (stristr($q, substr($ime, 0, $len))) {
if ($predlog === "") {
$predlog = $ime;
} else {
$predlog .= ", $ime";
}
}
}
}
// Prikaži "bez predloga" ako nije nađeno ništa slično
echo $predlog === "" ? "bez predloga" : $predlog;
?>
AJAX - Pravljenje XMLHttpRequest
Objekta
Ključna reč u AJAX-u je XMLHttpRequest objekat.
XMLHttpRequest Objekt
Svi moderni brauzeri podržavaju XMLHttpRequest objekte.
XMLHttpRequest objekat se koristi za razmenu podataka sa serverom iza scene. A to znači da je
moguće da se apdejtuje deo web stranice a da se ne riloaduje čitava stranica.
Svi moderni brauzeri (Chrome, IE7+, Firefox, Safari, i Opera) imaju ugrađene
XMLHttpRequest objekte.
Sintaksa za pravljenje XMLHttpRequest objekata:
promenljiva = new XMLHttpRequest();
AJAX – Slanje zahteva serveru
XMLHttpRequest objekat is used to exchange data with a server.
Slanje zahteva
Za slanje zahteva server služe metode open() i send() za XMLHttpRequest objekt:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Metod Opis
open(method, url, async)
Specifies the type of request
metod: tip zahteva: GET ili POST
url: server (file) lokacija
async: true (asynchronous) ili false (synchronous)
send() Šalje zahtev serveru (koristedi GET)
send(string) Šalje zahtev serveru (koristedi POST)
GET ili POST?
GET je brži I jednostavniji od POST, I može biti korišćen u mnogim slučajevima.
Bilo kako, uvek se koristi POST kada se zahteva:
Neki keširan fajl koji nije opcionalni (update nekog fajla ili baze podataka na serve). Slanje velike količine podataka na server (POST nema ograničenje). Slanje unosa korisnika (koji može da sadrži nepoznate karaktere), POST je robusniji I sigurniji od
GET.
url – Fajl na server
Parametar url u open() metodu, je adresa fajla na serveru:
Taj fajl može biti bilo koji fajl.
Async=true
Kada se koristi async=true, specificira se funkcija koja će biti izvršena kada je odgovor spreman
u događaju onreadystatechange :
dodajime.php
<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2>Neka se ovo polje promeni</h2></div>
<button type="button" onclick="loadDoc()">Promeni ovo</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "promena.txt", true);
xhttp.send();
}
</script>
</body>
</html>
AJAX – Odgovor servera
Da bi dobili odgovor od server koristi s responseText u XMLHttpRequest objektu.
promena.txt
Ovo je lekcija o AJAX-u u II delu PHP kursa
AJAX - Događaj onreadystatechange
Događaj onreadystatechange
Kada je zahtev poslat na server, mi hoćemo da izvršimo neke akcije na osnovu odgovora.
Događaj onreadystatechange se okida svaki put kada se readyState menja.
readyState karakteristika zadržava status zahteva XMLHttpRequest.
Evo tri osobine XMLHttpRequest objekta:
Osobina Opis
onreadystatechange Čuva funkciju (ili ime neke funkcije) koja se poziva svaki put automatski kada se
readyState osobina promeni
readyState Drži status XMLHttpRequest. Menja se od 0 do 4:
0: zahtev nije otpočeo
1: server conekcija uspostavljena
2: primljen zahtev
3: procesuiranje zahteva
4: zahtev završen I odgovor spreman
status 200: "OK"
404: Nema stranice
U događaju onreadystatechange, mi specificiramo šta će se dogoditi kada je odgovor server
spreman da bude procesuiran.
Kada je readyState 4 i status 200,odgovor je spreman:
AJAX PHP primer odozgo
Spisakucenika.php
AJAX Database Primer
AJAX može da se koristi za interaktivnu komunikaciju sa bazom podataka.
AJAX povezan sa bazom podataka- primer
The following example will demonstrate how a web page can fetch information from a database
with AJAX:
Example
Example Explained - The showCustomer() Function
Kada selektuje, funkcija prikazKorisnika() se izvršava. Okidač je događaj "onchange":
prikazKorisnika.php
<html>
<head>
<script>
function prikazKorisnika(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","uzmikorisnika.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="prikazKorisnika(this.value)">
<option value="">Izaberi osobu:</option>
<option value="1">Zorica</option>
<option value="2">Bojan</option>
<option value="3">Bane</option>
<option value="4">Zarko</option>
</select>
</form>
<br>
<div id="txtHint"><b>Informacije o osobi će biti ovde prikazane...</b></div>
</body>
</html>
Funkcija prikazKorisnika() radi sledeće:
Čekira da li je neki korisnik selektovan Pravi XMLHttpRequest objekt Pravi funkciju koja de biti izvršena kada server bude bio spreman da odgovori Šalje zahtev na server Primetite da se parameter (q) dodaje na URL
AJAX Server stranica
Stranica na serveru koju poziva JavaScript se zove "uzmikorisnika.php"- misli se uzmi korisnika
iz baze.
uzmikorisnika.php
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
include('C:\xampp\htdocs\berger\conBerger.php');/*konekcija sa bazom*/
$upit9='SELECT *FROM `korisnici` WHERE `redni` ="'.$q.'"';
$upit_pokretanje9=mysql_query($upit9);
if($upit_pokretanje9=mysql_query($upit9)){echo 'upit dobar';
while ($upit_vrsta=mysql_fetch_assoc($upit_pokretanje9))
{$id5=$upit_vrsta['sifra'];$id6=$upit_vrsta['redni'];$id7=$upit_vrsta['korisnicko'];$id8=$
upit_vrsta['nesto'];
}
}
echo "<table>
<tr>
<th>Redni</th>
<th>Korisnicko</th>
<th>Sifra</th>
<th>nesto</th>
</tr>";
echo "<tr>";
echo "<td>" . $id6. "</td>";
echo "<td>" .$id7. "</td>";
echo "<td>" . $id5 . "</td>";
echo "<td>" .$id8 . "</td>";
echo "</tr>";
echo "</table>";
mysql_close($con);
?>
</body>
</html>
intval — Uzima celobrojnu vrednost promenljive -Bojan
