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

2. Ne kete leksion: Ç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.
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.

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

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

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

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

8. Shembuj te aplikimeve te AJAX
Google maps
Google Suggest
Gmail
Youtube
Facebook tabs

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

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

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

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

13. Si funksionon AJAX?

14. Cikli Jetesor i 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 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

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 "..." " <html xmlns=" <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. 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

23. 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=" url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null);

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

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.re sponseText; }

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() { 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;

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

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

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() {
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

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. Librari te AJAX-it ne PHP
SAJAX
XAJAX
AJAXAC
JPSPAN

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

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