AJAX – A synchronous J avaScript a nd X ML

1. AJAX – Asynchronous JavaScript and XML Leksion 14

2. Ne keteleksion: • Çfare eshte AJAX? • Cikli jetesor i AJAX-it • Shembuj ne boten reale • Si funksionon? • Permbledhje e kodit • Shembuj

3. Hyrje • AJAX = Asynchronous JavaScript and XML • AJAX nuk eshte nje gjuhe e re programimi, por nje teknike per te krijuar aplikacione web me te mira, me te shpejta, dhe me interaktive. • Duke perdorur AJAX, kodi juaj JavaScript mund te komunikoje direkt me serverin duke perdorur objektin XMLHttpRequest te Javascript-it. Me kete objekt, kodi juaj JavaScript mund te shkembeje te dhena ma serverin web, pa ringarkuar faqen. • AJAX perdor transferim te dhenash asinkron (kerkesat HTTP) ndermjet browserit dhe serverit web, duke bere te mundur qe faqet web te kerkojne sasi te vogla informacioni nga serveri ne vend te faqeve te tera. • Teknika AJAX i ben aplikimet ne internet me te vogla, me te shpejta dhe me user-friendly.

4. Kush e krijoi AJAX-in ? Askushnuk e krijoi AJAX-in ! AJAX = Asynchronous JavaScript And XML Jesse James Garett e shpikutermin AJAX ne artikullin e tij - “AJAX : A new approach for a new application”

5. AJAX • AJAX Bazohet ne Standarte Web: • AJAX bazohet ne standartet web temeposhtme: • JavaScript • XML • HTML • CSS • DOM • Standartet web teperdorura ne AJAX janetemirepercaktuara, dhetesuportuarangategjithebrowseratkryesore. Aplikacionet me AJAX janetepavarurngabrowseridheplatforma. • Objekteteveçanta: • Mozilla: XMLHttpRequest • IE: ActiveXObject("Microsoft.XMLHTTP")

6. DOM (Document Object Model) • Paraqitje e OrientuarngaObjektet per dokumentet XML dhe HTML • Bazohet ne strukturenhierarkike (ne formepeme) • Lejonqeprogrametdheskriptettendertojnedokumente, tenavigojne ne strukturen e tyre, teshtojne, modifikojneosefshijneelementedhepermbajtjen e tyre. • Ofronthemelet per zhvillimin, ekzekutimin e query-ve, filtrimin, transformimin e aplikacioneveqengrihenmbiimplementimet e DOM-it

7. Pseeshte AJAX-ikaqinteresant — TANI? • Kerkesa per aplikacione me te pasura eshte ne rritje • Aplikacionet te koheve te fundit te Google kane nxitur imagjinaten e njerezve • Google gmail, Google suggests, Google Maps • Njerezit po mendojne qe te ndertojne APLIKACIONE… jo thjesht site • Pika e ktheses • Te gjitha keto kane bere qe shume aplikacione ne internet te arrijne piken e tyre te ktheses - ku pershtatja me AJAX-in perhapet ne menyre te shpejte dhe dramatike • Redukton trafikun ne rrjet • Rrit shpejtesine • Zgjeron eksperiencen e perdoruesit

8. Shembujteaplikimevete AJAX • Google maps • http://maps.google.com/ • Google Suggest • http://www.google.com/webhp?complete=1&hl=en • Gmail • http://gmail.com/ • Youtube • Facebook tabs

9. Bazate AJAX-it • AJAX perdorkerkesat HTTP • Me AJAX, kodijuaj JavaScript komunikon me serverindiretk, nepermjetobjektitXMLHttpRequest ne JavaScript • Duke perdorurkerkesen HTTP, njefaqe web mundtebejenjekerkesedhetemarrenjepergjigjenganje server web, pa e ngarkuarserishfaqen. Perdoruesi do teqendroje ne tenjejtenfaqe, dheainuk do kuptojeqeskripti ne background kerkon per faqeosedergontedhenateknje server.

10. Bazate AJAX-it • Objekti XMLHttpRequest • Duke perdorur objektin XMLHttpRequest, nje zhvillues web mund te update-oje nje faqe me te dhena nga serveri, pasi te jete ngarkuar faqja! • AJAX u be popullor ne vitin 2005 nga Google (me Google Suggest). • Google Suggest perdor objetin XMLHttpRequest per te krijuar nje nderfaqe web shume dinamike: Kur ju filloni te shkruani ne kutine kerkimit ne Google, nje kod Javascript dergon shkronjat tek nje server dhe serveri kthen nje liste me sugjerime. • Objekti XMLHttpRequest suportohet nga Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, dhe Netscape 7.

11. Njemenyre e re e ndertimitteaplikacioneve Aplikacionet AJAX jane: • Aplikacioneklient/server me 3 shtresa • Browser ↔ App Server ↔ Data Source • Drejtohenngangjarjet • Perdoruesiklikon, perdoruesiterheq (drag), perdoruesindryshontedhenat. • Me grafike intensive • EfekteVizuale, KontrolleVizualetePasura • Jane teorientuarngatedhenat • Perdoruesitmanipulojnedhefusintedhena. • Jane Komplekse • Faqetmbajneshume me teperkontrolledhetedhenasesaaplikacionet e orientuarangafaqet (page-oriented applications). • Shumerelacione Master-Detail ne njefaqe

12. Karakteristikate AJAX-it Ndjesi e vazhdueshmerise Update-ime ne kohereale Nderveprimegrafike

13. Si funksionon AJAX?

14. CikliJetesori Ajax-it

15. AJAX Frameworks • Pure JavaScript Framework • Infrastructure • Provides basic piping & portable browser abstractions • Content up to developer • Typical Functionality: • Wrapper around XMLHttpRequest • XML manipulation & interrogation • DOM manipulations based on responses from XMLHttpRequest • Application Framework • Includes basic Infrastruture functionality • Server-Side Framework • HTML/JavaScript Generation • Server provides complete HTML/JS code generation and browser  server coordination • Browser-side coding is for customization • Remote Invocation • JavaScript calls routed directly to server-side functions (Java Methods) and returned back to Javascript callback handlers

16. Pick aFramework…any Framework www.ajaxpatterns.org • Pure JavaScript • DOJO (9/04) • Prototype (2001) • Open Rico (5/05) • Qooxdoo (5/05) • Pure JavaScript Infrastructural • AjaxJS (5/05) • HTMLHttpRequest (2001) • Interactive Website Framework (5/05) • LibXMLHttpRequest (6/03) • RSLite • Sack (5/05) • Sarissa (2/03) • XHConn (4/05) • Server-Side (Multi Language) • Cross-Platform Asynchronous Interface Toolkit (5/05) • SAJAX (3/05) • Javascript Object Notation (JSON) & JSON-RPC • Javascript Remote Scripting (2000) • Server-Side (Java) • Echo2 (3/05) • Direct Web Remoting (DWR) (2005)] • ThinkCAP Minerva (04/2005) • Server-Side (Lisp) • CL-Ajax • Server-Side (.NET) • Ajax.NET (305) • Server-Side (PHP) • AjaxAC (4/05) • JPSpan • XAJAX • Server-Side (Ruby) • Ruby-On-Rails (3/05)

17. Define Object var request; function getRequestObject() { if (window.ActiveXObject) { return(new ActiveXObject("Microsoft.XMLHTTP")); } else if (window.XMLHttpRequest) { return(new XMLHttpRequest()); } else { return(null); } }

18. Initiate Request function sendRequest() { request = getRequestObject(); request.onreadystatechange = handleResponse; request.open("GET", "message-data.html", true); request.send(null); }

19. Handling Response function handleResponse() { if (request.readyState == 4) { alert(request.responseText); } }

20. HTML Code <!DOCTYPE html PUBLIC "..." "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/2009/xhtml"> <head><title>Ajax: Simple Message</title> <script src="mesg.js" type="text/javascript"></script> </head> <body> <center> <table border="1" bgcolor="gray"> <tr><th><big>Ajax: Simple Message</big></th></tr> </table> <p/> <form action="#"> <input type="button" value="Show Message" onclick="sendRequest()"/> </form> </center></body></html>

21. Shembull AJAX DB

22. HTML File Java Script File <html> <head> <script src="select_name.js"></script> </head><body><form> Select a State: <select name="cities" onchange="showCityname(this.value)"> <option value="Tamilnadu">Tamilnadu <option value="Kerala ">Kerala <option value="Karnataka">Karnataka </select> </form><p> <div id="txtHint"><b>City Names will be listed here.</b></div> </p> </body> </html> JavaScript Function Call

23. Java Script File – Show Cityname() Function varxmlHttp function showCityname(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } varurl="http://10.1.6.32/ajax/getname.php"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); }

24. AJAX - Dergimiinjekerkese ne Server • Per te derguar nje kerkese ne server, ne perdorim metodat open() dhe send(). • Metoda open() merr tre argumente: • I pari percakton se cila metode do te perdoret kur te dergohet kerkesa (GET or POST). • Argumenti i dyte percakton URL-ne e skriptit ne anen e serverit. • Argumenti i trete percakton qe kerkesa duhet te trajtohet ne menyre asinkrone. • Metoda send() e dergon kerkesen ne server. Ketu dergojme nje null (ose asgje) sepse te gjithe te dhenat jane ne URL, sepse po perdorim metoden GET. Nese do te perdornim metoden POST, atehere ne vend te null do te ishte nje variabel apo nje string qe permban te dhenat qe ju po dergoni me post.

25. Nese supozojme se skedaret HTML dhe PHP jane ne te njejten direktori, kodi do te ishte: xmlHttp.open("GET",“getname.php",true); xmlHttp.send(null); • Percaktron url-ne (emrin e skedarit) per ta derguar ne server • Shton nje parameter (q) tek url-ja me permbajtjen e fushes input • Shton nje numer te rastit per te parandaluar qe serverri te perdore nje skedar te ruajtur ne cache • Krijon objektin XMLHTTP dhe i tregon objektit qe te ekzekutoje nje funksion te quajtur stateChanged kur ndodh nje ndryshim • Hap objektin XMLHTTP me url-ne e dhene. • Dergon nje kerkese HTTP ne server

26. Javascript- State Changed function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }

27. Funksioni State changed • Veçoria readyState mban statusin e pergjigjes se serverit. Sa here qe ndryshon readyState, do te ekzekutohet funksioni onreadystatechange. • Kerkesa nuk eshte e inicializuar – 0 • Kerkesa eshte krijuar – 1 • Kerkesa eshte derguar – 2 • Kerkesa eshte ne proces – 3 • Kerkesa ka perfunduar – 4

28. JavaScript – Percaktimi i objektit XmlHttpObject function GetXmlHttpObject() { varxmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }

29. XMLHttpRequest Properties • onreadystatechange • Ruan funksionin qe do te therritet automatikisht , sa here qe ndryshon veçoria readyState • readyState – statusiaktualikerkeses • 0 = uninitialized • 1 = loading • 2 = loaded • 3 = interactive (some data has been returned) • This is broken in IE right now • 4 = complete • status • Statusi HTTP qekthehetngaserveri : 200 = OK • responseText • Versioni String itedhenaveqekthehenngaserveri • responseXML • Dokumenti XML DOM itedhenaveqekthehet • statusText • Tekstiistatusit, qekthehetngaserveri

30. XmlHttpRequest ? Komponent ne anen e klientit. Duhettekrijohetnje instance e tijperpara se teperdoret. Perdormetoden open() per t’ulidhurdhe per temarrepergjigjenganje URL specifike. Perdorngjarjenonreadystatechange.

31. Shembull: var req;function retrieveURL(url) {     if (window.XMLHttpRequest) // Non-IE browsers {       req = new XMLHttpRequest();     } else if (window.ActiveXObject) // IE {       req = new ActiveXObject("Microsoft.XMLHTTP");     }      req.open("GET", url, true);      req.onreadystatechange = processStateChange;      req.send(null);   }

32. Shembull (vazhdim): function processStateChange() {     if (req.readyState == 4) // Complete {       if (req.status == 200) // OK response {  document.getElementById(“MyContent").innerHTML = req.responseText;       }     }   }

33. AJAX me PHP

34. Kodi : PHP [server.php] <?php //Display Message echo “This is Ajax with PHP “; ?>

35. Kodi: Javascript [client.htm] <html> <script language=“javascript”> function createRequestObject() { varhttpObj; var browser=navigator.appName; if(browser=="Microsoft Internet Explorer"){ httpObj = ActiveXObject("Microsoft.XMLHTTP"); }else{ httpObj = new XMLHttpRequest(); } return http; } var http = createRequestObject(); - vazhdon

36. Coding: Javascript [client.htm] var requestObject=createRequestObject(); function sendRequest(page) { requestObject.open('get',page); requestObject.onreadystatechange=displayContent; requestObject.send(null); } - Continued

37. Coding: Javascript [client.htm] function displayContent() { if(requestObject.readyState==4){ var data=requestObject.responseText; document.getElementById('contact').innerHTML=data+"<br>"; } } </script> <body> <a href="javascript:sendRequest('server.php')">Click here to View the page</a><br> <div id=“contact"> </div> </body></html>

38. Librarite AJAX-it ne PHP • SAJAX • XAJAX • AJAXAC • JPSPAN

39. Kufizimete AJAX Implementime JavaScript Debugging. Siguria.

40. Permbledhje • Asynchronous JavaScript and XML(AJAX) • Teknike e zhvillimit ne web per tekrijuaraplikacione web • I benfaqet web me tegatshme per t’upergjigjur, duke shkembyersasitevoglatetedhenave • Lejonnjefaqe web qetendryshojepermbajtjen e saj, pa e rifreskuarteterefaqen • Njeteknologji ne web browser, e pavarurnga software i web serverit.