AJAX


Dacă sunteţi un dezvoltator de aplicaţii web, imposibil să nu vă fi întâlnit în ultima perioadă cu termenul AJAX, şi probabil vă întrebaţi de ce aşa mare tevatură pe seama lui. Deasemenea puteţi crede că AJAX este încă unul din limbajele super-complexe care nu prea contează şi dacă îl ignoraţi îndeajuns de mult, va fi depăşit …

Nu suntem siguri de longevitatea AJAX, dar suntem siguri de un singur lucru – de fiecare dată cand includem funcţionalitatea AJAX, vizitatorii respectivului site sunt mai mult decât multumiţi. Secretul? AJAX aproprie aplicaţiile web de cele standard desktop: timpul imediat de răspuns, datele sunt schimbate fără ca întrega pagină să fie reîncarcată.

Deci, ce este AJAX?

Ajax este un acronim creat de Jesse James Garett (Adaptive Path) – reprezentând „Asynchronous JavaScript and XML”. Să le luam pe bucăţi: Asynchronous, deoarece codul nu va mai fi executat în mod liniar aşa cum sunteţi obişnuiţi. În modul clasic, aveţi un formular care trimite datele către o pagină procesoare (php, asp, sau orice alt limbaj) care execută acţiunea şi întoarce un rezultat. Însă nu acelaşi lucru se întamplă şi cu AJAX. Cheia întregului proces AJAX este activitatea asincronă.

Cum sunt efectuate aceste acţiuni? JavaScript. Ok, ştim că nu sunteţi înnebunit după el şi că vă preocupă mai mult partea cu PHP, dar tot ceea ce trebuie să ştiţi despre JavaScript este foarte simplu. De fapt, mare parte din cunoştinţe sunt legate de Document Object Model (DOM) deoarece în mare parte ceea ce facem se leagă de citirea datelor dintr-un form, şi apoi scrierea rezultatelor într-un DIV identificat în mod unic (<div>).

map.gif

Ce este cu XML din AJAX? Tehnic nu este chiar XML, ci o cerere XML HTTP (XMLHTTPRequest – că să fim mai exacţi). Ideea este folosirea datelor structurate (în modul familiar XML) pentru comunicarea cu procesul de bază.

În cele ce urmează prezentăm un exemplu simplu AJAX, o pagina HTML care comunică dinamic cu un script PHP.

Pagina HTML:

<html>
<head>
<title>Exemplu AJAX</title>
<script language=”Javascript”>
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject(„Microsoft.XMLHTTP”);
}
self.xmlHttpReq.open(‘POST’, strURL, true);
self.xmlHttpReq.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}

function getquerystring() {
var form = document.forms[‘f1’];
var word = form.word.value;
qstr = ‘w=’ + escape(word); // NOTA: nici un ‘?’ inainte de querystring
return qstr;
}

function updatepage(str){
document.getElementById(„result”).innerHTML = str;
}
</script>
</head>

<form name=”f1″>
<p>word: <input name=”word” type=”text”>
<input value=”Go” type=”button” onclick=’JavaScript:xmlhttpPost(„procesor.php”)’></p>
<div id=”result”></div>
</form>
</body>
</html>

Scriptul PHP:

<?php
if (isset($_POST[„w”])) $var_ajax = $_POST[„w”];

echo „Ati specificat: „.$var_ajax.”<br>”
echo „IP d-voastra: „.$_SERVER[‘REMOTE_ADDR’];
?>

Vom reveni în articolele viitoare cu exemplificări ceva mai utile …


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

2 comentarii

  1. radu.capan spune:

    Uau, uau, uau! Abia aştept continuările la acest nou serial! :)

  2. Ionut spune:

    Ok, la inceput nu aveam habar ca se Ajax. Vroiam doar sa schimb doar cateva date pe o pagina insa frame-ul nu era deloc ceea ce imi trebuia asa ca am inceput sa caut pe toate motoarele de cautare pe le cunosc solutia si am dat de cateva exemple cool. Oops, trebuie sa plec :( revin :)


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *