1 / 22

AJAX

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.

leigh
Download Presentation

AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX Programim ne Web Leksion 14 Iralda Mitro

  2. 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

  3. 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

  4. Motivimi per AJAX • Faqet Web gjithmoneRingarkohendhekurrenuk Update-ohen. • Perdoruesitpresinqegjithefaqjatengarkohetedhepsevetemnjesasi e vogeltedhenashnevojitet. • Kufizimetevetmekerkese/pergjigje (request/response) Iralda Mitro

  5. Client makes http request Server returns a new page Web server Nderveprimi ne web-in tradicional Iralda Mitro

  6. Client makes http request for specific information Server returns the requested information Web server Multiple requests are served Si funksionon AJAX-i? Iralda Mitro

  7. 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

  8. 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

  9. 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

  10. Aplikacioni Web dhe AJAX Iralda Mitro

  11. Procesimi i Kerkeses Iralda Mitro

  12. 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

  13. Shembull perdorimi XMLHttpRequest – Hapi 1 • KrijimObjekti • Kujdesemiper browseri-in specifik! • Shembull • var requester = new XMLHttpRequest(); • var requester = new ActiveXObject("Microsoft.XMLHTTP"); Iralda Mitro

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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

  19. 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

  20. Nderveprimimeskomponenteve Iralda Mitro

  21. Kush perdor AJAX ?

  22. Burimetendryshme • http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/ • http://www.w3schools.com/Ajax/default.asp

More Related