SEMINAR LAB TOPIC: AJAX
SEMINAR LABTOPIC: AJAX
INTRODUCTION
AJAX :Asynchronous JavaScript And XML
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail, YouTube, and Facebook.
BACK THEN:
Click
Search
AND YOU GET THIS:
THESE DAYS :
THE MAGIC SPELL BEHIND THIS IS :
AJAX
WHAT IS AJAX ?
• A programming language – no…
• A new technology – not exactly…
• So what else ?
It is a methodology on using several web technologies together, in an effort to close the gap between the usability and interactivity of a desktop application and the ever demanding web application
ORDER OF DEVELOPMENTS
Internet Explorer introduces the concept of IFrame element in 1996.(a technique thathelps in loading the contents of a web page.)
In the year 1998, Microsoft introduces another technique, called ‘Microsoft’s RemoteScripting’ as a replacement to the older techniques.
A year later, in 1999, Microsoft introduces the XMLHttpRequest object, an ActiveXcontrol, in IE 5.
The term AJAX is coined on February 18, 2005, by Jesse James Garret in a shortessay published a few days after Google released its Maps application.
Finally, in the year 2006, the W3C (World Wide Web Consortium) announces the release of the first draft which includes the specification for the object (XHR) and makes it an official web standard.
WHY AJAX IS IMPORTANT ?
AJAX enables a much better user experience for Web sites and applications.
Developers can now provide user interfaces that are nearly as responsive and richas more traditional Windows Forms applications while taking advantage of theWeb's innate ease of deployment and heterogeneous, cross-platform nature.
These benefits have been shown to dramatically reduce software maintenance costsand increase its reach. You can use AJAX to load specific portions of a page thatneed to be changed.
It further reduces network traffic.
THE CORE COMPONENTS:
HTML & CSS - for presenting.
JavaScript - for local processing.
Document Object Model (DOM) – to access data inside the page or to access elements of an XML file on the server.
XMLHttpRequest (XHR) object – to read/send data to the server asynchronously.
THE PROCESS CYCLE
A LITTLE ABOUT XHR OBJECT
CONT.…
A FEW STATUS VALUES
Status Description
200 OK
400 Bad Request
404 File Not Found
500 Internal Server Error
505 HTTP version not supported
THE ONREADYSTATECHANGE EVENT
Property Description
onreadystatechange Stores a function (or the name of a function) to be called automatically each time the readyState property changes
readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4:0: request not initialized1: server connection established2: request received3: processing request4: request finished and response is ready
status 200: "OK"404: Page not found
HOW AJAX WORKS ?
REVERSE AJAX
•Reverse Ajax is essentially a concept for sending data from the server to the client.
•It can be simulated with a repeated Ajax request from client – simple polling, piggyback polling.
•Comet – umbrella term for various techniques for Reverse Ajax
•Coined by Alex Russel in 2006.
•It can be simulated with a long-held Ajax request from client.
•Server can send events to the client without the client specifically requesting it.
•Also known as Ajax Push, Two-way-web, HTTP Streaming, and HTTP server push,
•First implementations appeared in 2000 with Pushlets and LightStreamer media server
REVERSE AJAX – SIMPLE POLLING
REVERSE AJAX – SIMPLE POLLING
•Basic Ajax with regular interval requests (every few seconds).
•To get the server events as soon as possible, the polling interval (time between requests) must be as low as possible.
•If interval is reduced, the client will issue many more requests, many of which won't return any useful data, and will consume bandwidth and processing resources for nothing.
•Advantages: It's really easy to implement and does not require any special features on the server side. It also works in all browsers.
•Disadvantages: This method is rarely employed because it does not scale at all. Example: 100 clients each issuing polling requests for 2 seconds, where 30% of the requests returns no data.
REVERSE AJAX – PIGGYBACK POLLING
REVERSE AJAX – PIGGYBACK POLLING
•Piggyback polling removes all redundant requests (which return no data)
•There is no interval
•Requests are sent when the client needs to send a request to the server
•The difference lies in the response, which is split into two parts:
i. the response for the requested data
ii. server events, if any
•Advantages: Less resource consumption. Works in all browsers, does not require special features on the server side.
•Disadvantages: You have no clue when the events accumulated on the server side will be delivered to the client.
REVERSE AJAX – COMET
REVERSE AJAX – COMET
•Request is sent to the server and kept alive for a long time, until a time-out or a server event occurs.
•When the request is completed, another long-lived Ajax request is sent to wait for other server events.
•With Comet, web servers can send the data to the client without having to explicitly request it.
•The server can push events on the clients by immediately committing (completing) the responses, or it can accumulate them and send bursts.
•Special features are required on the server side to handle all of these long-lived requests (Servlet 3.0 or Websockets)
•Implementations of Comet can be separated into two types: those using streaming mode, and those using long polling.
LET’S GET TO SOME WORK
EXAMPLE…
AJAX CODE
AJAX CODE WITH OUTPUT
XML FILE
BENEFITS OF USING AJAX
Helps to build fast, dynamic websites.
Improves sharing of resources : it facilitates to use the power of all the client computers rather than just a unique server and network.
Ajax allows to perform processing on client computer (in JavaScript) with data taken from the server thereby reducing server load by moving a part of server functionality to client side.
Ajax can selectively modify a part of a page displayed by the browser, and update it without the need to reload the whole document with all images, menus etc. This bridges the gap between desktop and web applications.
A FEW DRAWBACKS
If JavaScript is not activated, Ajax can't works. The user must be asked to set JavaScript from within options of the browser, with the "no script" tag.
Since data to display are loaded dynamically, they are not part of the page, and the keywords inside are not viewed by search engines.
The asynchronous mode may change the page with delays (when the processing on the server takes more time), this may be disturbing.
The back button may be deactivated.
THANK YOU!
Any Questions?