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?