AJAX is a technique for creating interactive web applications using a combination of technologies including XML, HTML, CSS, JavaScript, and the XMLHttpRequest object. It allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes, improving interactivity and performance. Some key benefits of AJAX include faster interactions and feedback, reduced load on the server and network, and ability to update parts of a page without reloading the whole page. The XMLHttpRequest object plays a central role by allowing JavaScript to make HTTP requests directly to the server.

1. Rajesh Kumar

2. AJAX stands for Asynchronous JavaScript
and XML.
AJAX is a new technique for creating better,
faster, and more interactive web applications
with the help of XML, HTML, CSS, and Java
Script.
Allows web pages or parts of them to be
updated asynchronously .

3.  Internet Explorer introduces the concept of IFrame element in 1996.
 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 announces the release of the first draft
which includes the specification for the object (XHR) and makes it an official
web standard.

4. • 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 object – to read/send data to the
server asynchronously.

5.  AJAX enables a much better user experience
for Web sites and applications.
 Portable across browsers
 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.

6.  Google Maps, A user can drag an entire map by
using the mouse.
 Google Suggest, As you type, Google offers
suggestions. Use the arrow keys to navigate the
results.
 Gmail Gmail is a webmail built on the idea that
emails can be more intuitive, efficient, and
useful.
 Facebook,Orkut.

7. All the available browsers cannot support AJAX.
Here is a list of major browsers that support
AJAX.
 Mozilla Firefox 1.0 and above.
 Netscape version 7.1 and above.
 Apple Safari 1.2 and above.
 Microsoft Internet Explorer 5 and above.
 Opera 7.6 and above.

10. 1. A client event occurs
2. An XMLHttpRequest object is
created
3. The XMLHttpRequest object is
configured
4. The XMLHttpRequest object
makes an async. Request
5. The ValidateServlet returns an
XML document containing the
result
6. The XMLHttpRequest object
calls the callback() function and
processes the result
7. The HTML DOM is updated

11. <script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
</script>
Script creates variable
Warning for user if all
browsers fail
IE can use 2 types
of ActiveXObjects

12.  The XMLHttpRequest object is the key to AJAX.
It has been available ever since Internet Explorer
5.5 was released in July 2000, but was not fully
discovered until AJAX and Web 2.0 in 2005
became popular.
 XMLHttpRequest (XHR) is an API that can be
used by JavaScript, web browser scripting
languages to transfer and manipulate XML data
to and from a webserver using HTTP,
establishing an independent connection channel
between a webpage's Client-Side and Server-
Side

13.  abort()
 getAllResponseHeaders()
 getResponseHeader( headerName )
 open( method, URL )
 open( method, URL, async )
 open( method, URL, async, userName )
 open( method, URL, async, userName,
password )
 send( content )
 setRequestHeader( label, value )

14.  Onreadystatechange
 readyState
 responseXML
 Status
 statusText

15.  Cross-Browser and Cross-Platform Compatibility.
 Ajax application can be build with open standards
technologies, is not tied to proprietary software.
 Lower cost of development.
 The code can be optimized and separated.
 More rich interaction with the user, by
example:autocomplete, drag and drop, transparency,
shading, Z-ordering, etc.
 More speed, and less wait time for screen updated.
 Widespread adoption of Ajax by industry leaders.
 Integration with others proprietaries technologies.

16.  Same security problems as in classic Web
applications.
Think of different way in the development
and design.
The use of frameworks can generate
complexity.
More interaction through JavaScript.
More code for old browser.
Special code for some functions of Internet
Explorer.

17. Server Side
AJAX-based Web applications use the same
server side securityschemes of regular Web
applications.
Client Side
Downloaded JavaScript code is constrained by
sand-box security model and can be relaxed for
signed JavaScript.

19.  AJAX extends the usefulness of web apps
 Saves entire pages reloading
 Gives greater transparency to users
 Data loads ‘in the background’
 Uses existing technologies
 Is becoming very popular

20. 1. http://www.w3schools.com/ajax/
2. http://www.tutorialspoint.com/ajax/
3. http://net.tutsplus.com/
4. https://developer.mozilla.org/en/XMLHttpReque
st
5. SAMS Teach Yourself Ajax in 10 Minutes, Phil
Ballard, p. 85
6. JavaScript & AJAX, 6th Edition, Tom Negrino
and Dori Smith, ch.15

21. Thank You!