AJAX – Asynchronous JavaScript and XML Leksion 14 AJAX – has taken IT industry by storm. It might turn out to be one of the most demanded thing/in thing and hence, a brief presentation to understand AJAX. Be it anything that we are learning, asking 6 key questions is very important to get an overall idea of the same. The questions being – What, Why, Who, How, When and Where. So let’s being with what is AJAX? – not a technology, not a product … but an approach taken to develop Web Applications.

Ne kete leksion: Çfare eshte AJAX? Cikli jetesor i AJAX-it Shembuj ne boten reale Si funksionon? Permbledhje e kodit Shembuj

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. What is AJAX ? Ajax is just a style of design, one that makes feel less web and more desktop Inorder to understand what is this approach all about … let us first seek to know what the current approach is … At present, for every user interaction, the entire web page is rebuild. Even if a part of the entire page needs to be changed … we land up reloading the entire page. Which leads to … network traffic … slow speed … and most importantly … user experience goes down … user has to wait for loading of images … controls … which had already been loaded once!!! This is what AJAX asks us not to do.

Kush e krijoi AJAX-in ? Askush nuk e krijoi AJAX-in ! AJAX = Asynchronous JavaScript And XML Jesse James Garett e shpiku termin AJAX ne artikullin e tij - “AJAX : A new approach for a new application”

AJAX AJAX Bazohet ne Standarte Web: AJAX bazohet ne standartet web te meposhtme: JavaScript XML HTML CSS DOM Standartet web te perdorura ne AJAX jane te mirepercaktuara, dhe te suportuara nga te gjithe browserat kryesore. Aplikacionet me AJAX jane te pavarur nga browseri dhe platforma. Objekte te veçanta: Mozilla: XMLHttpRequest IE: ActiveXObject("Microsoft.XMLHTTP") What is AJAX ?

DOM (Document Object Model) Paraqitje e Orientuar nga Objektet per dokumentet XML dhe HTML Bazohet ne strukturen hierarkike (ne forme peme) Lejon qe programet dhe skriptet te ndertojne dokumente, te navigojne ne strukturen e tyre, te shtojne, modifikojne ose fshijne elemente dhe permbajtjen e tyre. Ofron themelet per zhvillimin, ekzekutimin e query-ve, filtrimin, transformimin e aplikacioneve qe ngrihen mbi implementimet e DOM-it

Pse eshte AJAX-i kaq interesant — 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

Shembuj te aplikimeve te 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

Baza te AJAX-it AJAX perdor kerkesat HTTP Me AJAX, kodi juaj JavaScript komunikon me serverin diretk, nepermjet objektit XMLHttpRequest ne JavaScript Duke perdorur kerkesen HTTP, nje faqe web mund te beje nje kerkese dhe te marre nje pergjigje nga nje server web, pa e ngarkuar serish faqen. Perdoruesi do te qendroje ne te njejten faqe, dhe ai nuk do kuptoje qe skripti ne background kerkon per faqe ose dergon te dhena tek nje server.

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

Nje menyre e re e ndertimit te aplikacioneve Aplikacionet AJAX jane: Aplikacione klient/server me 3 shtresa Browser ↔ App Server ↔ Data Source Drejtohen nga ngjarjet Perdoruesi klikon, perdoruesi terheq (drag), perdoruesi ndryshon te dhenat. Me grafike intensive Efekte Vizuale, Kontrolle Vizuale te Pasura Jane te orientuar nga te dhenat Perdoruesit manipulojne dhe fusin te dhena. Jane Komplekse Faqet mbajne shume me teper kontrolle dhe te dhena sesa aplikacionet e orientuara nga faqet (page-oriented applications). Shume relacione Master-Detail ne nje faqe

Karakteristika te AJAX-it Ndjesi e vazhdueshmerise Update-ime ne kohe reale Nderveprime grafike Continuous Feel: Traditional web applications force you to submit a form, wait a few seconds, watch the page redraw, and then add some more info. Forgot to enter the area code in a phone number? Start all over again. Sometimes, you feel like you're in the middle of a traffic jam: go 20 metres, stop a minute, go 20 metres, stop a minute ... How many E-Commerce sales have been lost because the user encountered one too many error message and gave up the battle? Ajax offers a smooth ride all the way. There's no page reloads here - you're just doing stuff and the browser is responding. Real-Time Updates: As part of the continous feel, Ajax applications can update the page in real-time. Currently, news services on the web redraw the entire page at intervals, e.g. once every 15 minutes. In contrast, it's feasible for a browser running an Ajax applciation to poll the server every few seconds, so it's capable of updating any information directly on the parts of the page that need changing. The rest of the page is unaffected. Graphical Interaction: Flashy backdrops are abundant on the web, but the basic mode of interaction has nevertheless mimicked the 1970s-style form-based data entry systems. Ajax represents a transition into the world of GUI controls visible on present-day desktops. Thus, you will encounter animations such as fading text to tell you something's just been saved, you will be able to drag items around, you will see some static text suddenly turn into an edit field as you hover over it.

Si funksionon AJAX?

Cikli Jetesor i Ajax-it

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

Pick a Framework… any Framework 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) Pick a Framework… any Framework www.ajaxpatterns.org

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

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

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

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>

Shembull AJAX DB

JavaScript Function Call HTML 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> Java Script File JavaScript Function Call

Java Script File – Show Cityname() Function var xmlHttp function showCityname(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) alert ("Your browser does not support AJAX!"); return; } var url="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);

AJAX - Dergimi i nje kerkese 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.

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

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

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

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

XMLHttpRequest Properties onreadystatechange Ruan funksionin qe do te therritet automatikisht , sa here qe ndryshon veçoria readyState readyState – statusi aktual i kerkeses 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 qe kthehet nga serveri : 200 = OK responseText Versioni String i te dhenave qe kthehen nga serveri responseXML Dokumenti XML DOM i te dhenave qe kthehet statusText Teksti i statusit, qe kthehet nga serveri

XmlHttpRequest ? Komponent ne anen e klientit. Duhet te krijohet nje instance e tij perpara se te perdoret. Perdor metoden open() per t’u lidhur dhe per te marre pergjigje nga nje URL specifike. Perdor ngjarjen onreadystatechange.

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);   }

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

AJAX me PHP

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

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

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

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>

Librari te AJAX-it ne PHP SAJAX XAJAX AJAXAC JPSPAN

Implementime JavaScript Debugging. Siguria. Kufizime te AJAX Implementime JavaScript Debugging. Siguria.

Permbledhje Asynchronous JavaScript and XML(AJAX) Teknike e zhvillimit ne web per te krijuar aplikacione web I ben faqet web me te gatshme per t’u pergjigjur, duke shkembyer sasi te vogla te te dhenave Lejon nje faqe web qe te ndryshoje permbajtjen e saj, pa e rifreskuar te tere faqen Nje teknologji ne web browser, e pavarur nga software i web serverit.