230 likes | 545 Views
AJAX. Programim ne Web Leksion 14. Cfare eshte Ajax?. Revolucioni i aplikimeve ne WEB Akronim i “Asynchronous JavaScript and XML” Teknike zhvilluese per krijimin e aplikacioneve interaktive web Ajax (Asynchronous Javascript + XML) nuk eshte vetem nje teknologji.
E N D
AJAX Programim ne Web Leksion 14 Iralda Mitro
Cfareeshte Ajax? • Revolucioni i aplikimeve ne WEB • Akronimi “Asynchronous JavaScript and XML” • Teknikezhvilluese per krijimin e aplikacioneveinteraktive web • Ajax (Asynchronous Javascript + XML) nuk eshte vetem nje teknologji. • Perbehet nga nje sere teknologjish Iralda Mitro
CfarerealizonAjax-i • Prezantimin e bazuar ne standarte (standards-based presentation) duke perdorur XHTML dhe CSS • Shfaqje dhe nderveprim dinamik duke perdorur edhe Document Object Model • Shkembim dhe manipulim te dhenash duke perdorur XML dhe XSLT • Marrje asinkrone te dhenash duke perdorur XMLHTTPRequest • Dhe Javascript qe i permbledh te gjitha keto teknologji se bashku. Iralda Mitro
Motivimi per AJAX • Faqet Web gjithmoneRingarkohendhekurrenuk Update-ohen. • Perdoruesitpresinqegjithefaqjatengarkohetedhepsevetemnjesasi e vogeltedhenashnevojitet. • Kufizimetevetmekerkese/pergjigje (request/response) Iralda Mitro
Client makes http request Server returns a new page Web server Nderveprimi ne web-in tradicional Iralda Mitro
Client makes http request for specific information Server returns the requested information Web server Multiple requests are served Si funksionon AJAX-i? Iralda Mitro
Komponente • HTML (or XHTML) and CSS • Prezantim informacioni • Document Object Model • Nderveprim dhe paraqitje dinamike me informacionin • XMLHttpRequest object • Marrje te dhenash ne menyre ASINKRONE nga web server-i. • Javascript • I permbledh te gjitha se bashku. Iralda Mitro
Cfare ka kaqte mire AJAX? • Lidhje midis client side script dheserver side script. • Pershtypje me te mire e perdoruesit • Me shumefleksibilitet • Me shumeopsione Iralda Mitro
Perdorime te paradigmit te AJAX • Forma validimitedhenash ne kohereale • Te dhenat e formesqekerkojnevalidim ne server-side mundtevalidohen ne njeforme “perpara” se perdoruesiijep submit. • Mbushjeautomatike • Njepjesespecifike e formes se tedhenavemundtembushetautomatikishtkurperdoruesishtyp. • Veprime me tedetajuara • Bazuarne ngjarje ne ‘client-side’, njefaqe HTML mundteafishojeinformacione me tedetajuarambitedhenat pa rifreskuaredhenjeherefaqen e web-it. • Kontrolle UI tesofistikuara • Kontrollesipeme, menu, tab-e, shiritaprogresietjmundtesigurohen pa rifreskimetefaqes. Iralda Mitro
Aplikacioni Web dhe AJAX Iralda Mitro
Procesimi i Kerkeses Iralda Mitro
ProcesimiAsinkron - XMLHttpRequest • Kerkesatevazhdueshme me HTTP request • Pergjigjet e rikthyera me kodJavascript • Suportohet ne tegjithebrowseratstandarte • I ngjashem me objektin “image” • Ndryshimdinamiki URL se ‘image source’ (src) pa rifreskimfaqeje. Iralda Mitro
Shembull perdorimi XMLHttpRequest – Hapi 1 • KrijimObjekti • Kujdesemiper browseri-in specifik! • Shembull • var requester = new XMLHttpRequest(); • var requester = new ActiveXObject("Microsoft.XMLHTTP"); Iralda Mitro
Shembull perdorimi XMLHttpRequest – Hapi 2 • Transferimiitedhenave ne Server • Open() per teinicializuarlidhjen me serverin • Send() per tederguartedhenataktuale • Shembull • requester.open("POST", "/query.cgi") • requester.send("name=Bob&email=bob@example.com"); Iralda Mitro
Cfarendodhpasidergohentedhenat? • XMLHttpRequest kontakton serverin dhe merr te dhenat • Merr nje kohe te papercaktuar • Event Listener per te percaktuar kur objekti ka perfunduar marrjen e te dhenave • Ne menyre specifike shikohen ndryshimet ne variablin “readyState” Iralda Mitro
Shembull perdorimi XMLHttpRequest – Hapi 3 • Perdorimnjefunksion per temenaxhuarngjarjenkurreadyStatendryshohet ne 4 • 0 – Uninitialised • 1 – Loading • 2 – Loaded • 3 – Interactive • 4 – Completed • Shembull • requester.onreadystatechange = stateHandler; Iralda Mitro
Shembull perdorimi XMLHttpRequest – Hapi 3 • KontrollneseobjektiXMLHttpRequest ka marre ne menyretesuksesshmetedhenat, ose ka dhenenje error code • Shembull • if (requester.readyState == 4) { if (requester.status == 200) { success(); } } Iralda Mitro
Shembull perdorimi XMLHttpRequest – Hapi 4 • Afishim te dhenash • responseXML • DOM-structured object • responseText • One complete string • Shembull • var nameNode = requester.responseXML.getElementsByTagName("name")[0]; var nameTextNode = nameNode.childNodes[0]; var name = nameTextNode.nodeValue; Iralda Mitro
varXMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject= new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject= new ActiveXObject("Microsoft.XMLHTTP"); } if(XMLHttpRequestObject) { varobj = document.getElementById(divID); XMLHttpRequestObject.open("POST", dataSource); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { //document.getElementById('loadB').style.visibility="hidden"; obj.innerHTML = XMLHttpRequestObject.responseText; delete XMLHttpRequestObject; XMLHttpRequestObject = null; } } XMLHttpRequestObject.send(null); } Iralda Mitro
Nderveprimimeskomponenteve Iralda Mitro
Burimetendryshme • http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/ • http://www.w3schools.com/Ajax/default.asp