• Përshëndetje Vizitor!

    Nëse ju shfaqet ky mesazh do të thotë se ju nuk jeni regjistruar akoma. Edhe pse nuk jeni regjistruar ju arrini të shihni pjesën me të madhe të seksioneve dhe diskutimeve të forumit, por akoma nuk gëzoni të drejten për të marrë pjesë në to dhe në avantazhet e të qënurit anëtar i këtij komuniteti. Ju lutem : REGJISTROHUNI që të dërgoni postime dhe mesazhe në Forum-Al.

    Regjistrohu !

Bëjini faqet me AJAX të “mbajnë mend”

Forum-Al

Aty ku shqiptarët mblidhen
Anëtar
Jan 5, 2010
Postime
561
Pikët
28
Vendndodhja
Forum

Titulli nuk është edhe aq i kuptueshëm, por nuk më vinte ndërmend ndonjë më interesant. Për t’a bërë historinë sa më të shkurtër, ajo që do ju tregoj në këtë guidë ka të bëjë me Javascript, thirrje AJAX dhe disa përpunime adresash për të kuptuar në cilën faqe ndodhet vizitori.

AJAX është ndër teknikat më interesante të viteve të fundit, duke qenë se na lejon të ndërtojmë funksionalitete që më parë i takonin eksluzivisht aplikacioneve për desktop (dmth software-ve jo për web). Tashmë të gjithë janë familiar me AJAX, qoftë nga ana teknike apo thjeshtë e dinë si funksionon. Megjithatë, AJAX ka dy probleme që në kohët e para ishin goxha demotivuese për koduesit:


  1. Të ndërtosh një thirrje AJAX me Javascript është tmerr. Objekti XMLHttpRequest në shfletuesit modern është në rregull, ndërsa në Internet Explorer 5 dhe 6 vjen në formën e një ActiveX. Gjithashtu dërgimi i thirrjeve pas nisjes së objektit dhe marrja e të dhënave nuk është shumë miqësore për ata që e shohin për herë të parë. Për fat të mirë, jQuery është një librari fantastike që krahas shumë gjërave, i bën thirrjet AJAX aq të lehta sa edhe një 5 vjeçar mund t’i shkruajë. Kuptohet që në këtë guidë do përdorim jQuery, që tashmë është libraria de-facto e Javascript.
  2. Thirrjet AJAX kryhen në mënyrë asinkrone dhe normalisht nuk e ruajnë gjendjen. Pra, nëse thërrasim një informacion me AJAX dhe më pas rifreskojmë faqen, informacioni do të humbasë dhe faqja do të kthehet në gjendjen fillestare. Ky është edhe qëllimi i guidës, t’i bëjmë thirrjet AJAX të “mbahen mend”.
Para se të filloj me përmbajtjen e vërtetë, më duhet t’ju them se guida mund të lexohet nga kushdo. Fillestarët mund të ndjekin shpjegimin e kodit për të kuptuar çdo rresht. Koduesit me eksperiencë mund të përftojnë teknikën dhe t’a implementojnë në mënyrën që e shohin më të mirë. Në përgjithësi kodi është i thjeshtë dhe s’duhet të jetë problem të kuptohet.

Pak më teknikisht

Në fjalë të thjeshta ju shpjegova më sipër që do bëjmë një faqe e cila përdor AJA, të mbajë mend. Pra të ketë gjendje. Si ide është në rregull, por po ju shpjegoj pak më teknikisht si do e realizojmë.

Lidhjeve HTML do i vendosim një shënjues në mënyrë që të njohim kujt faqe i referohet një lidhje. Këtë do e bejmë duke i vendosur në “href” një lidhje të brendshme të tipit: #krye, #rreth. Pjesa “#” shtohet në URL dhe nuk bën asgjë tjetër për vizitorin. Për ne është e rëndësishme sepse do i përdorim për të ngarkuar faqen e duhur, qoftë kur klikohet një lidhje apo kur hapet direkt një faqe në formën: faqja.com/#rreth. Në këtë mënyrë i ofrojmë vizitorëve mundësi të ruajnë një faqe dhe mos të humbasin informacionin që ndodhet në të, gjë që është tipike me AJAX.

Çfarë na duhet?

Asgjë më tepër se sa një kompjuter me tastjerë, një editor dhe një kopje e librarisë jQuery. Për të ndjekur guidën do ju duhet edhe një strukturë direktorish e ngjashme me atë që kam bërë unë. Shikoni foton më poshtë.

Struktura e Direktorive


Direktoria “faqet” është më e rëndësishmja për guidën, duke qenë se në të ruhen faqet e veçanta. Mund t’i vini çfarëdo emri të doni; thjeshtë do ju duhet ta ndërroni në kod.

Besoj e kuptuat vetë, por sidoqoftë po e them. Skedarët HTML brenda direktorisë “faqet” mbajnë kodin HTML të seksioneve të ndryshme të faqes që do të ndërtojmë. Emrat janë arbitrarë (krye, rreth, etj) dhe të njëjtat emra do i vendos elementëve të menusë.

Kodi HTML

Unë kam bërë një dizenjo të vogël me një menu të futur në listë të parenditur. Kodin e të gjithë faqes mund t’a shkarkoni në fillim të guidës, ndërsa më poshtë po ju tregoj pjesën që na intereson – atë të menusë.


Nëse e vini re, atributi “href” i lidhjeve është një lidhje e brendshme. Zakonisht përdoren për t’a drejtuar vizitorin në një pjesë të caktuar të faqes, por ne na duhet për tjetër qëllim. Me Javascript do lexojmë atributin “href” dhe në bazë të tij do përfshijmë faqen e duhur. Shikoni gjithashtu që emrat e lidhjeve i kam vendosur egzaktësisht si titujt e skedarëve HTML në direktorinë “faqet”.

Pjesa tjetër e kodit HTML që na intereson është vendi ku do ngarkohen faqet. Unë kam krijuar një “div” me “id=permbajtja”.


Ky është i gjithë kodi HTML që do të përdorim. Të kalojmë në atë Javascript.

Logjika Javascript

Me kodin HTML gati, mund të shkruajmë logjikën Javascript që vë gjithçka në punë. Përfshini librarinë jQuery në kodin tuaj dhe më ndiqni me kujdes më poshtë. Jam i sigurt që nuk do keni problem t’a kuptoni.

$(document).ready(function() { //ketu vjen kodi ne vijim } Ky kod bën që egzekutimi i kodit në vijim të nisë vetëm kur dokumenti të jetë ngarkuar me të gjithë elementët HTML të tij. Nëse do tentonim të aksesonim me Javascript elementë HTML të pa krijuar, kuptohet që nuk do funksiononte. Një alternativë tjetër për këtë “problem” – dhe që këshillohet për performancë më të mirë (Yahoo Best Practices for Speeding Up Your Web Site), por që mua personalisht s’më pëlqen – është që kodi Javascript të vendoset i gjithi në fund të faqes. Në këtë mënyrë egzekutohet pasi elementët HTML të jenë krijuar dhe nuk ka nevojë të pritet kur dokumenti të jetë ngarkuar. Zgjidhni mënyrën që ju pëlqen.

var faqja_baze = 'krye'; var faqet_lejuara = ['krye', 'rreth', 'guidat', 'kontakt']; var adresa = String(document.location); Kam deklaruar tre variabla më sipër. Variabla “faqja_baze” ruan faqen që do ngarkohet nëse nuk është përcaktuar një faqe apo nëse faqja e përcaktuar nuk ndodhet në listën e faqeve te lejuara. Variabla “faqet_lejuara” mban listen e faqeve të lejuara, një element sigurie për mos të lënë mundësi të tentohet ngarkimi i ndonjë faqeje tjetër. Ndërsa variabla “adresa” mban URL-në aktuale. Duke marrë URL-në dhe duke e përpunuar me Javascript do përftojmë pjesën “#faqja” dhe të realizojmë “mbajtjen mend”. Vini re që e kam kthyer në tekst (string) sepse “document.location” kthen objekt dhe s’mund t’a përpunojmë si ç’është. Me String() bëjmë String Casting, duke e kthyer objektin në ekuivalentin e tij tekst.

faqja = adresa.substring(adresa.lastIndexOf('#') + 1); Në kodin më sipër marr pjesën “faqja” që ndodhet në “faqja.com/#faqja”, pra bëj parse adresën për të përftuar faqen. Funksioni substring(fillimi, fundi) kthen porcionin e tekstit duke filluar nga karakteri “fillimi” (numër) dhe duke mbaruar në “fundi” (numër). Nëse fundi nuk përcaktohet, merret deri në fund të tekstit. Funksioni lastIndexOf(karakteri) kthen pozicionin e fundit (si numër) ku ndodhet karakteri. E përkthyer, marrim pozicionin e fundit të karakterit “#” dhe e presim adresën nga ai pozicion + 1 karakter (për të hequr #). Si përfundim marrim faqen.

if ($.inArray(faqja, faqet_lejuara) == -1) { faqja = faqja_baze; } hapFaqen(faqja); Në kodin më sipër kam bërë një if() dhe një thirrje funksioni. Se çfarë funksioni thirret do ja u tregoj pak më tutje, prandaj mos u bëni merak. Pjesa if() kontrollon nëse “faqja” ndodhet në vektorin “faqet_lejuara”, i cili kthen -1 nëse nuk gjendet. Funksioni $.inArray(kerkimi, vektori) ofrohet nga jQuery dhe është një mundësi e mirë për një funksionalitet që Javascript nuk e ofron. Nëse nuk doni të përdorni jQuery, në vend të vektorit mund të krijoni një Object Literal dhe të shikoni nëse faqja ndodhet brenda literalit përmes fjalës kyçe in. Do të ishte diçka e ngjashme me:

var faqet_lejuara = {krye:1, rreth:1, guidat:1, kontakt:1}; if (faqja in faqet_lejuara) { //kodi ne vijim } Literalët janë ndër pjesët më të bukura të Javascript dhe që i japin fuqinë shpesh të nënvlerësuar. Kjo është temë më vete, por doja thjeshtë t’ju jepja një ide.

Deri tani kemi marrë adresën, e kemi përpunuar dhe kemi kontrolluar nëse ndodhet në listën e bardhë. Na mbetet të kodojmë eventin e klikimit mbi lidhjet e menusë.

$('#koka').find('a').click(function() { hapFaqen($(this).attr('href')); }); Edhe këtu kam thirrur funksionin hapFaqen() kur një lidhje klikohet dhe ka shumë mundësi që po bëheni të padurueshëm për përmbajten e tij. Do kalojmë aty për pak! Më duhet t’ju shpjegoj disa gjëra mbi kodin mësipër. Së pari kam përdorur funksioni find(), në vend të shkruaja selektimin direkt në shkurtimin që ofron jQuery (në formën “#koka a”). Do funksiononte shumë mirë edhe në atë rast, thjeshtë do ishte më intensive. Funksioni find() është funksion i Javascript dhe si i tillë përdor pak resurse. Ndërsa selektimet me jQuery vënë në punë disa ingranazhe të brendshme që marrin kodin HTML të faqes, kërkojnë më Regular Expressions dhe në fund japin rezultatet. Sa më kompleks selektimi, aq më intensiv është proçesi. Prandaj mundohuni të përdorni find() sa më shumë.

Një tjetër gjë interesante e jQuery $(this), e cila i referencohet elementit në të cilin ndodhem. Në rastin tonë i referencohet lidhjes “a” që është klikuar. Nëse nuk do përdorja $(this), do më duhej t’a shkruaja edhe një herë selektimin. Së fundmi, thërras funksionin hapFaqen() duke i kaluar si parametër atributin “href” të lidhjes i cili mban emrin e faqes. Funksioni attr() i jQuery kthen vlerën e atributit të përcaktuar.

Jemi drejt fundit dhe kemi krijuar funksionalitetet bazë. S’na mbetet gjë tjetër përveç se të shohim çfarë përmban ky funksioni hapFaqen().

function hapFaqen(faqja) { //ketu vjen kodi ne vijim } Më sipër krijova definicionin e funksionit dhe parametrin “faqja” që ai merr. Këtë parametër e kemi kaluar dy herë deri tani: një herë kur një lidhje klikohet dhe një herë në fillim të egzekutimit kur përcaktuam faqen nga adresa.

if (faqja.indexOf('#') > -1) { faqja = faqja.substring(1); } Kodi më sipër kontrollon nëse faqja përmban “#”, sepse në dy rastet e thërritjes së funksionit kemi tekste të ndryshme për faqen. Në rastin e klikimit të lidhjes, na kthehet një faqe që përmban “#”, ndërsa në rastin e ngarkimit të faqes nga adresa, faqja nuk ka “#”. Me indexOf() kontrollojmë nëse përmban “#” dhe nëse po, e fshijmë atë me funksionin substring(). Këtë të fundit e shpjegova më sipër gjatë guidës.

$('#permbajtja').css('display', 'none'); Ky kod është vetëm për estetikë dhe për asgjë më tepër. Duke qenë se pas ngarkimit të faqeve dua t’a shfaq informacionin me efekt (fade in), nëse “div”-i i përmbajtjes nuk ka “display:none” efekti nuk do shfaqet. Duke i vendosur “display:none” çdo herë që thirret funksioni hapFaqe(), sigurohem që efekti të ndodhë.

$('#permbajtja').load('faqet/' + faqja + '.html', function(){ $('#permbajtja').fadeIn('slow'); }); Ky është dhe kodi i fundit për këtë guidë dhe pjesa ku ngarkojmë skedarin HTML, marrim përmbajtjen e tij dhe e vendosim në “div”-in e përmbajtjes. Funksioni load() është mënyra më e thjeshtë që egziston për të bërë thirrje AJAX. Mjafton të vendoset faqja! Në rastin tonë, faqja HTML ngarkohet në varësi të variablës “faqja”, e cila ka marrë vlerë nga klikimi në një lidhje apo nga përpunimi i adresës. Parametri i dytë i funksionit load() është një funksion anonim i cili egzekutohet në momentin kur thirrja AJAX përfundon. Unë e kam bërë që kur thirrja të përfundojë, “div”-i i përmbajtjes të shfaqet me një efekt të thjeshtë. Më lehtë se kaq s’ka ku të shkojë!

Përfundimi

Me librarinë jQuery dhe një teknikë shumë të thjeshtë kemi mënjanuar dy probleme të mëdha të AJAX. Kemi bërë thirrje AJAX me minimumin jetik të kodit dhe faqen tonë e kemi bërë të mbajë mend. Teknika mund të implementohet si ç’është për faqe të vogla të cilat nuk kanë shume seksione. Ndërsa për faqe të mëdha do ju duhet të lodheni shumë më tepër. Po ju jap disa ide:


  • Mund të ofroni mënyrë standarte ngarkimi për ata që s’kanë Javascript. Kjo është e rëndësishme për të rritur aksesueshmërinë dhe në një faqe serioze nuk mund të anashkalohet.
  • Mund të kaloni në adresë më shumë se një parametër, në formën: #kat=8;id=10. Me Javascript mund t’i merrni lehtë parametrat.
  • Parametrat e adresës mund t’i kaloni në një skedar PHP që shërben si ndërfaqe midis thirrjeve AJAX dhe logjikës PHP të faqes. Ky kod mund të thërrasë klasa/funksione që shërbejnë për të shfaqur normalisht përmbajtjen.
AJAX është një ide shumë e mirë për t’i ofruar eksperiencë më të bukur vizitorëve dhe për të kursyer trafik (sepse ngarkohet vetëm një pjesë, jo e gjithë faqja). Megjithatë, në faqe shumë të mëdha mund të jetë më tepër pengesë se sa fasilitet. Mund të bëhet tepër e komplikuar të kodohet dhe mirëmbahet për faqe që kanë qindrja apo mijëra artikuj dinamik, seksione të ndryshme me ndërfaqe të ndryshme, shumë module, etj. Prandaj mundohuni të përmbaheni në zgjedhje


Shpresoj të ketë qenë lexim interesant dhe t’ju ketë shërbyer si teknikë. Mos hezitoni të komentoni për çdo pyetje, sugjerim apo kritikë.

Mësim të mbarë.

Bëjini faqet me AJAX të “mbajnë mend” është një postim nga: Feniksi.Com - Thesari i Njohurive



Forum-Al.com
Aty ku shqiptarët mblidhen!
 

Hawk

V.I.P
Anëtar
Nov 24, 2014
Postime
12,718
Pikët
113
Përgjigje e: Bëjini faqet me AJAX të “mbajnë mend”

AJAX ka mundesuar qe Web Aplikacionet te imitojn Desktop Aplikacionet.

Nje shembull praktik per AJAX nga W3schools.

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_database

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for 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.asp?q="+str,true);
xmlhttp.send();

}
</script>
</head>
<body>

<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<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="txtHint">Customer info will be listed here...</div>

</body>
</html>
Ke nje dropdown list me opcione, ke emrat e klienteve dhe ne baz te zgjedhjeve nxjerre te dhenat e klientit nga Databaza, pra duke derguar ne server vetem kodin qe na intereson e jo komplet html faqen.

Libri nga Head First-serite per AJAX-in eshte i mire.

http://www.headfirstlabs.com/books/hfajax/
 
Top