AJAX
- AJAX je krtica za
"Asynchronous JavaScript And XML", - je tehnika za izdelavo boljših, hitrejših in bolj interaktivnih spletnih aplikacij,
- uporaba JavaScript-a za pošiljanje in sprejemanje podatkov med brskalnikom in strežnikom,
- dosežemo dinamično osveževanje posameznega dela spletne strani, kar pomeni:
-
- osveži se samo del spletne strani in ne celotna,
- samo prenos podatkov o spremembi na strani
-
AJAX – delovanje
- uporaba asinhronega prenosa podatkov preko HTTP zahtevkov med brskalnikom in strežnikom,
- je tehnologija, neodvisna od programske opreme strežnika,
- več dela pri odjemalcu (v JavaScript-u),
- format prenosa podatkov:
-
- XML,
- JSON,
- (X)HTML (fragment),
- običajno besedilo.
-
AJAX primer –
HMTL obrazec
<html>
<head>
<script src="AJAX_namig.js"></script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="pokaziNamig(this.value)">
<div id="namig" style="margin: 0px; width: 194px"></div>
</form>
</body>
</html>
AJAX primer –JS pokaziNamig()
var xmlHttp;
function pokaziNamig(niz) {
if (niz.length == 0) {
document.getElementById('namig') . innerHTML = '';
return;
}
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert ('Brskalnik ne podpira HTTP zahtevkov');
return;
}
var url = 'primerAjax.php?niz=' + niz;
xmlHttp.onreadystatechange = stanjeSpremenjeno;
xmlHttp.open('GET', url, true);
xmlHttp.send(null);
}
AJAX primer – JS stanjeSpremenjeno()
function stanjeSpremenjeno() {
if (xmlHttp.readyState == 4 ||
xmlHttp.readyState == 'complete') {
el = document.getElementById('namig');
el.innerHTML = xmlHttp.responseText;
}
}
AJAX primer - JS GetXmlHttpObject()
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;
}
AJAX primer – PHP odziv
<?php // datoteka AJAX_namig.php
$niz = (isset($_GET['niz'])) ? $_GET['niz'] : '';
$rez = '';
if(strlen($niz) > 0) {
$imena = array('Janez','Janko','Jože','Jan','Joco'
,'Jožica','Judita','Marko','Milan','Maja','Maks','Maksimiljan'
,'Marcel','Marjan');
foreach($imena as $ime) {
if(stripos($ime,$niz) === 0)
$rez.= $ime. '<br />';
}
}
echo $rez;
?>
AJAX primer – PHP odziv
<?php // datoteka primerAjax.php
$xmlDoc = new DOMDocument(); $xmlDoc->load('xml_datoteka_primer.xml');
$x = $xmlDoc->getElementsByTagName('obvestilo');
$iskano = $_GET['iskano']; //iz URL preberi 'iskano’
//preveri ce je iskani niz daljsi od 0 znakov
if (strlen($iskano) > 0) {
$namig = '';
for($i=0; $i < ($x->length); $i++) {
$y = $x->item($i)->getElementsByTagName('za');
$z = $x->item($i)->getElementsByTagName('od');
if ($y->item(0)->nodeType == 1) {
//najdi podatek, ki ustreza iskanemu
if (stristr($y->item(0)->childNodes->item(0)->nodeValue, $iskano)) {
$namig = 'Obvestilo od <b>' . $y->item(0)->childNodes->item(0)->nodeValue . '</b> je naslovljeno osebi <b>' . $z->item(0)->childNodes->item(0)->nodeValue . '</b>';
}
}
}
}
// Nastavi odziv (izhod) na 'Ni tega posiljatelja' ce ni zadetka
if ($namig == '') $odziv = "<i>Ni tega pošiljatelja</i>";
else $odziv = $namig;
echo $odziv; //izpisi odziv
?>
AJAX – rezultat
- Rezultat prejšnje kode je obrazec, ki izpisuje rezultat sproti, glede na
vpisano besedilo.
AJAX primer – jQuery
// to nadomesti ves prej omenjen JavaScript; HTML in PHP sta ostaneta enaka
// potrebno je dodati jQuery knjižnico!
function pokaziNamig(niz) {
if(niz.length > 0) {
$.ajax({
type: 'GET',
url: 'primerAjax.php',
data: 'niz=' + niz,
success: function(data) { $('#namig').html(data); },
error: function() { $('#namig').html('Napaka!'); }
});
}
else
$("#namig").html('');
}