You are on page 1of 18

Amit Kumar CSE-3rd year Roll no.


• It is a technique that combines a set of known technologies in order to create faster and more user friendly web pages. • It is a client side technology. . • Not a stand-alone language or technology.What is AJAX ? • Asynchronous Javascript and XML.

• This causes very long waiting times and waste of bandwidth. whole page is reloaded from the server. although most of the page remains the same. • When we submit a form. • loading only the necessary information. . and making only the necessary changes on the current page without reloading the whole page.Purpose of AJAX • Prevents unnecessary reloading of a page.

• The list which appears when we write a single letter in the search box is an example of AJAX .

5 browser replaces view with data sent from server 4 data is returned in response to the request five stages of each interaction. Will unpack how this actually works later on.Classic web application browser sends request to server (e. . for a web page) server generates web page (html + css) as a response to the request user does something 1 browser 2 http request 3 server-side systems web server UI html + css data data stores backend etc.g.

. which helps manage the desktop / user interaction. and intermediates between what the user sees/does and the functionality of – and data sent out by – the server.From “classic” to “Ajax” Ajax adds an extra layer of functionality on the browser. browser browser JavaScript calls server-side systems request UI UI Ajax “engine” html + css + xml data data mgmt web server data stores backend etc. Desktop UI “session” management How does this work? The next slides explain what‟s happing under the “browser hood” to support the Ajax approach.

takes HTML/CSS What really happens “under the hood” of a “classic” browser. and „knows‟ how to format and display it. browser data and images. .g. request HTML rendering engine browser UI UI HTML / CSS data data other data (e.what’s inside a browser so this works? rendering engine -. Browser knows how to save and manage data it downloads. images) data stores.

images) 3 data UI E.g. 1 HTML rendering engine 1 request 2 4 HTML / CSS data 5 other data ( it all works -1 User clicks on a link: rendering engine / browser sends of a request document. 3 Data comes back browser for a 2 4 Browser knows what to do with it and where to put it 5 HTML and CSS go to the rendering engine. http://www. This engine also knows to send out more requests for images.g.bmo. which starts painting the . needed in the page.

.. images) XML data JavaScript code data XML data support. without waiting for a user click. Browsers can now store XML data.” including getting data from elsewhere. whatever) on their own.g. XML. without waiting for the user to do something! browser XMLHttpRequest() JavaScript Engine HTML rendering engine request UI HTML / CSS data other data (e. and a new tool a new JavaScript function. JavaScript programs can now go off and “do their own thing.Ajax: XML data. and access / manipulate from JavaScript programs via the JavaScript engine. This lets JavaScript programs send out requests for data (images.

g. A  The pattern is: C A Use JavaScript to control the show. whenever the the Ajax other “engine” data (e. A control JavaScript B data XML. XML HTML / CSS UI JavaScript Use it to asynchronously data data Code – request and retrieve data from B remote servers.Which brings us to Ajax browser  XMLHttpRequest() Ajax is a pattern for building JavaScript Engine applications on the browser. images) HTML rendering engine C display HTML and CSS . not just when the user does something). Then use JavaScript to extract data from the XML. C Use HTML and CSS for display: manipulate this using JavaScript.g.e. other formats (e. B Use XML to send numerical or text-style data to the browser. program thinks this is a good images) idea (i.

g. images) server-side systems request UI UI UI XML data Ajax JavaScript Code – “engine” Ajax engine web server html + css + xml data data mgmt data stores backend etc.From “classic” to “Ajax” redux The Ajax “engine” browser browser HTML rendering engine XMLHttpRequest() html + css Engine JavaScript JavaScript calls HTML / CSS data other data (e. Desktop UI “session” management .

Technologies Used • AJAX uses: – Javascript (for altering the page) – XML (for information exchange) – ASP or JSP (server side) .

• Only necessary data is returned and that part is updated . • Technologies with similar tasks: URLConnection. ASP and JSP • Other technologies returns whole page and client loads it.Alternative Technologies • Not a technology. but a combination of technologies.

• It resembles the Java’s URL object that is used to access a specific URL and get the contents. .XMLHTTP Object • The object that is used to connect to the remote server is called XMLHTTP.

Creating the object • For IE 5.5: objXmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”) • For Mozilla: objXmlHttp=new XMLHttpRequest() .

responseText”. Retrieving information  We get the returned value with the property “xmlHttp. true) xmlhttp. .send(“date=11112006&name=Ali") • Third argument tells that data will be processes“GET”.send() • POST METHOD:"POST". url. url. the “OnReadyStateChange” event handler will be called.Sending information • After creating the object. we can send information to the web server and get the answer using this object’s functions: • GET METHOD: xmlhttp. true) xmlhttp. When server responds.

– Apart from obtaining the XMLHTTP object. • Disadvantages: – The back button problem. – Possible network latency problems. – Does not run on all browsers. People should be given feedback about the processing. but in AJAX this doesn not hold. People think that when they press back button. all processing is same for all browser types. . – Permits the development of faster and more interactive web applications. because Javascript is used.Pros/Cons • Advantages: – Independent of server technology. they will return to the last change they made.