19 Teknologjia AJAX

Rrjedha e procesit te paraqitur ne diagramen me siper mund te pershkruhet permes hapave me poshte:

1. Pedoruesi gjeneron nje ngjarje, shembull, klikimi i nje butoni ose modifikimi i vleres se tekstit ne nje textbox etj. Kjo e fundit therret nje funksion JavaScript i cili inicializon nje objekt XMLHttpRequest.

2. Objekti XMLHttpRequest konfigurohet duke percaktuar nje parameter request qe perfshin ID e komponentes qe gjeneroi ngjarjen, dhe vleren qe dha perdoruesi. Me tej objekti XMLHttpRequest ben nje kerkese asinkrone ne web server.

3. Ne web server, objekte si servletet apo degjues ngjarjesh kapin kerkesen. Te dhenat merren nga baza e te dhenave, dhe pergjigja pergatitet ne formen e nje dokumenti XML.

4. Se fundi, objekti XMLHttpRequest merr te dhenat XML duke perdorur funksionin callback, e proceson dhe perditeson DOM dhe shfaq ne permbajtjen HTML te dhenat e reja.

Ushtrim 1:

Ndertoni nje forme kerkimi duke perdorur komunikimin asinkron per procesimin e kerkeses se perdoruesit.

search.html

<html>

<head>

function searchText(){

var word = document.getElementById("name").value;

var xmlhttp;

if(window.XMLHttpRequest)

{xmlhttp= new XMLHttpRequest();}

else

if(window.ActiveXObject)

{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

else

{alert("Your browser does not support XMLHTTP!");}

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4){

var div=document.getElementById("results");

div.innerHTML = xmlhttp.responseText;

}

url='results.php?name='+word;

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

</script>

</head>

<body>

<table>

<tr>

<td>

Jepni emrin:

</td>

<td>

</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

results.php

<?php

$name=$_GET["name"];

$conn = mysql_connect("localhost","root","") or die("Could not establish connection");

mysql_select_db("northwind") or die("Database not found");

$query="SELECT * FROM employees where firstname like '%".$name ."%' ";

$result = mysql_query($query);

echo"<table border='1' align='center'>";

echo "<tr align='center'>

<td><b>Mbiemri</b></td>

<td><b>Ditelindja</b></td>

</tr>";

$i=0;

while($row= mysql_fetch_array($result)){

echo "<tr align='center'>

<td><i> ".$row["FirstName"]." </i></td>

<td><i> ".$row["LastName"]." </i></td>

<td><i> ".$row["BirthDate"]." </i></td>

</tr>";

}

echo"</table>";

mysql_close($conn);

?>

Ushtrim 2:

Ndertoni nje faqe me php dhe ajax qe shfaq oren aktuale ne klikim te nje butoni duke mos ringarkuar faqen ne cdo klikim.

clock.php

<html>

<head>

function afishoOren(){

var xmlhttp;

if(window.XMLHttpRequest)

{xmlhttp= new XMLHttpRequest();}

else

if(window.ActiveXObject)

{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

else

{alert("Your browser does not support XMLHTTP!");}

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4){

var div=document.getElementById("ora");

div.innerHTML = xmlhttp.responseText;

}

url='getClock.php';

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

}

</script>

</head>

<body>

</body>

</html>

getClock.php

<?php

$clock = getdate();

echo $clock['hours']." : ".$clock['minutes']." : ".$clock['seconds'];

?>

Rezultati:

Ushtrim 3:

Duke perdorur teknologjite HTML, JS/Ajax, PHP shkruani kodin qe shfaq nje liste me kodet e klienteve. Per cdo zgjedhje te bere te afishohen te dhenat e klientit ne kete faqe, brenda div-it me id 'results'.

selectCustomer.html

<!DOCTYPE html>

<html>

<head>

function showCustomer(str)

{

var xmlhttp;

if (str=="")

{

document.getElementById("result").innerHTML="";

return;

}

if (window.XMLHttpRequest)

{// browsers: IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// browsers: 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","getcustomer.php?q="+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

<option value="">Select a customer:</option>

<option value="ALFKI">Alfreds Futterkiste</option>

<option value="NORTS ">North/South</option>

<option value="WOLZA">Wolski Zajazd</option>

</select>

</form>

<br>

<div id="result">Detajet e klientit do te shfaqen ketu...</div>

</body>

</html>

getCustomer.php

<?php

$cid= $_GET['q'];

$query = 'select * from customers where CustomerID=\''.$cid.'\'';

$conn = mysql_connect('localhost','root','');

mysql_select_db('northwind');

$res = mysql_query($query);

echo '<table>';

$row = mysql_fetch_array($res);

echo'<tr><td>CustomerID</td><td>'.$row['CustomerID'].'</td></tr>';

echo'<tr><td>CustomerName</td><td>'.$row['CompanyName'].'</td></tr>';

echo'<tr><td>ContactName</td><td>'.$row['ContactName'].'</td></tr>';

echo'<tr><td>Address</td><td>'.$row['Address'].'</td></tr>';

echo'<tr><td>City</td><td>'.$row['City'].'</td></tr>';

echo'<tr><td>PostalCode</td><td>'.$row['PostalCode'].'</td></tr>';

echo'<tr><td>Country</td><td>'.$row['Country'].'</td></tr>';

echo'</table>';

?>