Scribd
Upload
71 views

Presented By: Guided By:: Anagha.D.Kulkarni Prof. P.S.Revankar

AJAX is a technique for creating faster and more interactive web applications. It uses a combination of technologies including XML, JavaScript, CSS, and HTML in a browser to retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. This allows for features like updating parts of a web page without reloading the whole page. Some key advantages of AJAX include reducing bandwidth usage and providing a more responsive interface that feels like a desktop application.

Uploaded by

adroita
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
71 views

Presented By: Guided By:: Anagha.D.Kulkarni Prof. P.S.Revankar

AJAX is a technique for creating faster and more interactive web applications. It uses a combination of technologies including XML, JavaScript, CSS, and HTML in a browser to retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. This allows for features like updating parts of a web page without reloading the whole page. Some key advantages of AJAX include reducing bandwidth usage and providing a more responsive interface that feels like a desktop application.

Uploaded by

adroita
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 28

AJAX

Presented By : Guided By :
Anagha.D.Kulkarni Prof. P.S.Revankar
What is AJAX ?

• Asynchronous Javascript and XML.

• Not a stand-alone language or technology.

• 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


Characteristics

1. Continuous Feel

2. Real Time Updates

3. Graphical Interaction

4. Language Neutrality
AJAX is Not

1. Proprietary

2. Plug-in-Based

3. Browser Specific
How AJAX Works?
How AJAX Works?
XMLHttpRequest Object

A page element must make a javascript


call

The javascript function must create an


XMLHttpRequest object which is used to
contact the server
Objects & Browsers

• XMLHttpRequest object for Firefox, Opera &


Safari.
• ActiveXObject(“Msxml2.XMLHTTP”) for
Internet Explorer 6.0
Or
• ActiveXObject(“MicrosoftXMLHTTP”)
XMLHttpRequest Object

An Example

<html>
<body><form name="myForm">
Name: <input type="text"
name="username" />
Time: <input type="text"
name="time" />
</form></body>
</html>
XMLHttpRequest Object
<html><body><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");
}
XHR Object
catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{ alert("Your browser does not support AJAX!");
return false;
} } } }
</script><form name="myForm">Name: <input
type="text" name="username" />Time: <input type="text"
name="time" /></form></body></html>
XHR Object Methods

1. abort()

2. getAllResponseHeaders()

3. getResponseHeader(headerName)

4. open(method, URL)
open(method, URL, async)
open(method, URL, async, userName)
open(method, URL, async, userName, password)
XHR Object Properties

1. responseText

2. responseXML

3. responseBody

4. status

5. statusText
Traditional Web Application
1. First, the application shows a list of employees to pick from
Traditional Web Application
2. When the user chooses an employee, the server
returns a new page (FIRST REFRESH) and a form is
displayed
Traditional Web Application
3. The user can then edit the employee data (e.g, change
"Andrew" to "Andy") and submit the form. The server then
returns the new page (SECOND REFRESH).
Traditional Web Application
4. To get back to the employee list to begin the process of
modifying another employee's data, the user would have
to click on the "Employee List" link (THIRD REFRESH).
AJAX Web Application
1. Like with the traditional method, the Ajax
application shows a list of employees to pick from.
AJAX Web Application
2. When the user chooses an employee, the page doesn't
reload. Instead, an Ajax call to the server is made, the
server returns the HTML form and JavaScript is used to
display the form on the page.
AJAX Web Application
3. The user can then edit the form fields. Each time a
changed form field loses focus the change is sent to the
server with Ajax, the server-side code updates the data in
the database and sends back the updated list of employees
to the browser. JavaScript is again used to display the
updated list on the page
AJAX Web Application
4. The employee list is updated to reflect the changes
made. Notice "Andrew" has been changed to "Andy" in
the list. A message is displayed letting the user know that
the database was updated
Moral
•No need to Refresh

page.
•Real Time
•High speed
•Less Bandwidth
usage
Advantages
Using Ajax, a web application can request only the
content that needs to be updated, thus drastically
reducing bandwidth usage.

Users may perceive the application to be faster or more


responsive, even if the application has not changed on
the server side.

The use of Ajax can reduce connections to the server,


since scripts and style sheets only have to be
requested once.
Disadvantages

Pages Not register so no use of “Back”


button, Bookmarks.
No Support for Devices such as mobile
phones, PDA’s, etc
If browser is JavaScript disabled, Can’t use
Ajax functionality
Conclusion
Ajax is a pattern for building a new style of web applications using
JavaScript, XML, and new browser.

Ajax can lead to really neat stuff!

Ajax has it’s costs, and is not a panacea for all Web site / application
‘problems’

We need to know and experiment with it, to keep up with the neighbors

Web 2.0 is more about the cultural wave that Ajax is a part of

Need to keep track of Web 2.0 too, as it may change how our customers
expect us to offer services
References

Bulletproof Ajax By Jeremy Keith

Ajax in Action By Dave Crane

Ajax: The Definitive Guide By Anthony T. Holdener III

http://webdesign.about.com/od/ajax

http://en.wikipedia.org/wiki/AJAX

http://www.w3schools.com/Ajax
Questions

? ? ?
?
? ?
?
Thank You !

You might also like