|
luyzette
EliteHackers Diamond
Inregistrat: acum 16 ani
Postari: 117
|
|
De cand s-a nascut Perl-ul sau alte prafuite limbaje de scripting server-side, oare s-a intrebat cineva de cate ori am scris linii de redirectare? Sau de cate ori a reincarcat pagina un vizitator sau un content admin? Sunt sigur ca nimeni, dar refresh-ul e o introducere buna la problema noastra de astazi. Aceea este: cum sa scapam de refresh?
Ma gandesc ca ati auzit de AJAX. Tehnica prin care Flickr sau Gmail s-au inzorzonat cu titluri ca „super-accesibil” si au devenit foarte faimoase este insa pentru multi cam greu de pus in practica; mai ales cand deja se discuta despre unobtrusive JavaScript, adica separarea codului JS de structura HTML a documentului, iar componenta de baza a implementarii AJAX este tocmai JavaScript. In mare, AJAX presupune schimbarea continutului unui div. Da, suna floare la ureche. Dar AJAX executa query-uri catre baza de date ori de cate ori userul o cere, fara sa fie necesar refresh-ul intregii pagini. Incearca asta prin JS simplu si ai sa vezi ca nu prea e posibil.
Fara sa ne abatem prea mult de la tema, sa vedem cum functioneaza teoretic AJAX. Prin JavaScript se preia cererea de la user si se transfera unui mic engine XML, care va executa un request HTTP si va inapoia ca rezultat un fisier. Acel fisier va fi executat pe server si deci poate contine scripting. De exemplu, un query catre SQL. Rezumand, AJAX vine de la Asynchronous JavaScript And XML, insemnand afisarea continutului in mod asincron (fara refresh) folosind JS si XML.
Micul AJAX
Acum, n-am studiat prea mult AJAX si s-ar putea sa nu simt nevoia acestui lucru, pentru doua motive. Unul ar fi ca mie chiar imi place refresh-ul si n-as vrea sa incurc oamenii prezentandu-le o pagina care se face din ce in ce mai mare. Alt motiv este existenta functiilor AHAH. Micul AHAH vine ca o solutie eleganta la problemele ridicate de AJAX. Sau cel putin mie asa mi se pare.
Sunt pus in fata unei probleme de accesibilitate. Doresc sa implementez in CMS-ul meu posibilitatea de a sterge un articol. Userii lui sunt content admini sau chiar manageri de firma, din cei care dau click-uri aiurea si ies din birou urland ca cine a sters din „sait”. As vrea ca atunci cand apasa pe butonul de sters, sa il fac sa se gandeasca de doua ori. Asa ca voi afisa o casuta de tip „Esti sigur?”. Nu ar fi prea greu, tot ce am de facut este sa scriu cateva randuri de JavaScript. Insa exista doua probleme. Prima e legata de design, pentru ca pana astazi nu am auzit pe nimeni ca ar putea modifica in vreun fel casuta de dialog pe care o arati din JS. A doua problema este cu redirectarea. Nu as vrea sa o folosesc. Totul as vrea sa decurga rapid, pentru ca deja maresc timpul de actiune prin introducerea casetei de dialog.
Wordpress rezolva elegant aceasta problema, desi nu la fel de elegant precum o vom face noi. Si daca ne gandim la platformele de blogging, deducem si un aspect legat de server, pe care o intuiti deja: daca respectiva stergere s-ar desfasura pe un sistem cu mii de utilizatori, cum ar fi blogger.com, un redirect ar insemna recalcularea intregii pagini, ceea ce ar incarca inca putin serverul. Sa vedem cum am rezolva mica noastra problema folosind AHAH.
Asynchronous HTTP And HTML
Pe scurt, AHAH. Sa trecem in sfarsit la fapte si sa analizam functiile de baza ale acestei tehnici. Vom folosi putin PHP, o baza MySQL si desigur JavaScript.
function ahah(url, target, delay) {
document.getElementById(target).innerHTML = '<span style="border:5px solid black;background-color:purple;color:white;">loading</span>';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP" ;
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target, delay);};
req.open("GET", url, true);
req.send("";
}
}
Aceasta este prima functie. Am spus ca AHAH se va ocupa cu inlocuirea contentului unui block HTML cu un alt content, obtinut dintr-un fisier extern, care este in prealabil rulat de server. Parametri:
<ul>
<li><i>url</i> - calea catre fisierul care va fi incarcat </li>
<li><i>target</i> - id-ul blockului unde se va afisa continutul fisierului de la <i>url</i></li>
<li><i>delay</i> - intervalul pentru retrimiterea aceluiasi continut â?? util de exemplu pentru un chat HTML</li>
</ul>
Incepem cu identificarea block-ului tinta si inlocuirea lui cu o secventa de „loading”, pe timpul incarcarii noului content. Putem sa sarim acest pas:
document.getElementById(target).innerHTML = '<span style="border:5px solid black;background-color:purple;color:white;">loading</span>';
Urmatoarea secventa de cod initiaza un request HTTP fie prin DOM, fie prin ActiveX. Apoi, daca am reusit initierea cererii, urmeaza chemarea celei de a doua functii, care va schimba continutul blockului <i>target</i> cu noul continut:
function ahahDone(url, target, delay) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML="ahah error:n"+req.statusText;
}
if (delay != undefined) {
setTimeout("ahah(url,target,delay)", delay); // resubmit after delay
//server should ALSO delay before responding
}
}
}
Sa vedem cum folosim aceste functii pentru a ne rezolva mica problema legata de bloguit.
AHAH la lucru
Inainte de a incepe, iata sql-ul pentru baza de date pe care o vom folosi:
CREATE TABLE `employees` (
`id` int(11) NOT NULL auto_increment,
`name` text NOT NULL,
`salary` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM;
HTML-ul de care avem nevoie in index.php se rezuma la doua div-uri:
<div id="target">
<?php include "table.php"; ?>
</div>
<div id="dialog">
</div>
_______________________________________
|
|
