The document provides an introduction to AJAX (Asynchronous JavaScript and XML), a technique that enhances web page interactivity by allowing asynchronous data exchange, significantly improving user experience without page reloads. It traces the development of AJAX from early web technologies to its formal establishment as a standard by the W3C in 2006, highlighting its core components and advantages, including reduced server load and better responsiveness. Additionally, it discusses 'reverse AJAX' concepts and the challenges associated with AJAX, such as Javascript dependency and search engine indexing issues.

1. SEMINAR LAB
TOPIC: AJAX

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

3. BACK THEN:
Click
Search

4. AND YOU GET THIS:

5. THESE DAYS :

6. THE MAGIC SPELL BEHIND THIS IS :
AJAX

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

8. ORDER OF DEVELOPMENTS
Internet Explorer introduces the concept of IFrame element in 1996.(a technique that
helps in loading the contents of a web page.)
In the year 1998, Microsoft introduces another technique, called ‘Microsoft’s Remote
Scripting’ as a replacement to the older techniques.
A year later, in 1999, Microsoft introduces the XMLHttpRequest object, an ActiveX
control, in IE 5.
The term AJAX is coined on February 18, 2005, by Jesse James Garret in a short
essay 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.

9. 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 rich
as more traditional Windows Forms applications while taking advantage of the
Web's innate ease of deployment and heterogeneous, cross-platform nature.
These benefits have been shown to dramatically reduce software maintenance costs
and increase its reach. You can use AJAX to load specific portions of a page that
need to be changed.
It further reduces network traffic.

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

11. THE PROCESS CYCLE

12. A LITTLE ABOUT XHR OBJECT

13. CONT.…

14. A FEW STATUS VALUES
Status Description
200 OK
400 Bad Request
404 File Not Found
500 Internal Server Error
505 HTTP version not supported

15. 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 initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status 200: "OK"
404: Page not found

16. HOW AJAX WORKS ?

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

18. REVERSE AJAX – SIMPLE POLLING

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

20. REVERSE AJAX – PIGGYBACK POLLING

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

22. REVERSE AJAX – COMET

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

24. LET’S GET TO SOME WORK 
EXAMPLE…

25. AJAX CODE

26. AJAX CODE WITH OUTPUT

27. XML FILE

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

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

30. THANK YOU!
Any Questions?