Primii pasi cu Ajax
Modificarea dinamica a continutului unei pagini web
de Ionut Ursachi
Introducere
AJAX (Asynchronous JavaScript and XML) este o tehnica de programare web folosita pentru a crea pagini web interactive, care isi modifica dinamic continutul, fara a fi necesara reincarcarea paginii.
Acest lucru este posibil datorita unui mecanism intern de schimb de informatie cu serverul atunci cand utilizatorul face o cerere. Astfel nu mai este necesara reincarcarea intregii pagini la fiecare click. Rezultatul este o pagina web mai interactiva, mai dinamica, mai rapida, intr-un cuvant mai buna.
Transferul de date despre care am vorbit mai sus este asincron. Din momentul in care se face click-ul pana cand noul continut va aparea pe site pagina nu se modifica. Cererea se transmite prin JavaScript si noul continut al paginii este adus dinamic prin obiectul XMLHttpRequest suportat de toate browserele actuale de navigare pe internet.
O aplicatie simpla Ajax
In continuare voi prezenta un framework simplu de Ajax cu modificare dinamica a continutului unei pagini usor de inteles si de dezvoltat ulterior.
Avem nevoie de trei fisiere pentru o structura de baza Ajax:
- index.html
- script.js
- raspuns.php
Fisierul index.html va contine pagina web cu un un link care va duce la afisarea unui text nou in pagina la apasarea lui.
<html>
<head>
</head>
<body>
<script type="text/javascript" src="script.js"> </script>
Inceput
<a href="javascript:sndReq('continut')">Continut Nou</a>
Urmeaza Continut
<div id="apasare"></div>
Sfarsit Continut
</body>
</html>
Fisierul script.js va contine trei functii JavaScript:
- pentru creare obiect XMLHttpRequest
- de trimitere cerere la server pentru continut nou
- pentru procesarea datelor primite
//functia intoarce un nou obiect XMLHttpRequest
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
//pentru compatibilitate cu browserele vechi
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
//aici cream obiectul
ro = new XMLHttpRequest();
}
return ro;
}
//cream noul XMLHttpRequest
var http = createRequestObject();
//cand trimitem o actiune
function sndReq(action) {
//scriptul raspuns.php primeste actiunea
http.open('get', 'raspuns.php?action='+action);
http.onreadystatechange = handleResponse;
http.send(null);
}
//functia care primeste rezultatul de la raspuns.php
function handleResponse() {
if(http.readyState == 4){
//citim outputul scriptului
var response = http.responseText;
var update = new Array();
//si il spargem in doua, folosin delimitatorul "|"
if(response.indexOf('|' != -1)) {
update = response.split('|');
//modificam continutul div-ului din index.html cu noul text
document.getElementById(update[0]).innerHTML = update[1];
}
}
}
Scriptul raspuns.php primeste ca parametru cererea de la script.js si trimite prin echo inapoi noua informatie.
<?
switch($_REQUEST['action']) {
case 'continut':
echo "apasare|Ai apasat!";
break;
}
?>
Cand apasam link-ul "Continut nou", apelam functia sndReq din script.js care apeleaza scriptul raspuns.php
trimitandu-i ca parametru textul "continut". Switch-ul de acolo intra in case "continut" si face
echo "apasare|Ai apasat!" text care e preluat de functia handleResponse din script.js prin
XMLHttpRequest: var response = http.responseText;
Observati in index.html linia <div id="apasare" ></div> Am creat practic
un tag pentru o zona de text vida initial. In scriptul handleResponse linia de cod
document.getElementById(update[0]).innerHTML = update[1]; cauta div-ul cu numele din
update[0] si-i inlocuieste continutul cu textul din update[1]. Raspunsul primit de la raspuns.php
este "apasare|Ai apasat!".
Dupa cum vedem in functia handleResponse, raspunsul e spart in doua folosind "|". Astfel update[0] este "apasare" si "Ai apasat!" este update[1]. Deci in div-ul "apasare" va aparea scris "Ai apasat!" dupa ce apasam pe link-ul "Continut Nou".
Felicitari! Tocmai ai creat o aplicatie Ajax!
Puteti descarca cele trei fisiere de aici.
Pentru a testa programul click aici.
Referinte: