Scribd
Upload
97 views

Getting Hands On AJAX-New

This document provides an introduction to AJAX (Asynchronous JavaScript and XML). It defines AJAX as a web development technique for creating interactive web applications. The document discusses why developers use AJAX to build responsive web applications, provides an example of how AJAX works by making asynchronous requests in the background without reloading the entire page, and outlines some potential issues with AJAX applications.

Uploaded by

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

Getting Hands On AJAX-New

This document provides an introduction to AJAX (Asynchronous JavaScript and XML). It defines AJAX as a web development technique for creating interactive web applications. The document discusses why developers use AJAX to build responsive web applications, provides an example of how AJAX works by making asynchronous requests in the background without reloading the entire page, and outlines some potential issues with AJAX applications.

Uploaded by

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

GETTING HANDS ON

AJAX

Submitted To:- Prof. Abhinav Juneja


H.O.D CSE
Submitted By:- Chuni Lal
IT/06/512
Outline
1. What you’re in for…
2. What’s AJAX?
3. Why AJAX?
4. Look at AJAX example
5. Issues related with AJAX
What you’re in for…
 A discussion about an emerging web
application framework
 An introduction to the essential
elements of AJAX
 Walkthrough the code of a working
AJAX example
 Issues related with AJAX
What is AJAX?
 Asynchronous Javascript and XML
 Not all AJAX apps involve XML
 Combination of technologies
 HTML, CSS, DOM
 XML, XMLHttp, JavaScript
 Not a language but a methodology
 A method for building more responsive and
interactive applications.
Who are using AJAX ?
Why Do I Care About AJAX?
 Enables building Rich Internet Applications (RIA)
 Allows dynamic interaction on the Web
 Improves performance
 Real-time updates, without reloading the whole page
 No plug-ins required
 Open Source
 Work on Open Standards
 Platform independence (OS, server, browser, IDE)
 Compatible with HTML and existing web development
technologies
Job Trends
AJAX = Asynchronous JavaScript
and XML
 JavaScript: used to make a request to the
web server.

 Asynchronous: means that the processing


will continue on without waiting for the server
side retrieval to complete.

 XML: may be used to receive the data


returned from the web server.
Traditional Web Interaction

Client makes http request

Server returns a new page


Web server
How AJAX works
Client makes http request for specific information

Server returns the requested information

Web server

Multiple requests are served


Click, Wait, Refresh
Ajax-powered user
experiences
Ajax Value Proposition
 More productive end-users, lower
bandwidth, and strong ROI
 Time spent waiting for data to be
transmitted.
 Time spent completing a particular task

 Bandwidth consumed for the entire task


Client vs. Server Scripting
 Client scripting
 Web browser does all the work
 Server Scripting
 Web server does all the work
 AJAX leverages both client and server
side scripting
AJAX Web Interaction
 What you don’t see
 Data reload happens in the background
 JavaScript queries the server to get the
proper data without you knowing it
 Page updates without a screen “reload”
AJAX uses the XMLHttpRequest
object
 Our JavaScript communicates directly with
the server, through the JavaScript XHR
object.

 With the XHR object, a web page can make


a request to, and get a response from a
web server - without reloading the page.
Walkthrough An Example
 We create an AJAX application from
scratch.
 It will have a click button to fetch data
from a server and display the
information in a web page, without
reloading the page itself..
<html>
HMTL Code
<head>
<script src="ajax.js"></script> </head>
<body>
<center>
<h1>Hello I.T. FINAL YEAR </h1>

<div id="test">
<h2>Click to let AJAX change this text</h2></div>

<button type="button"
onclick="loadXMLDoc('test1.txt')">ClickMe</button>

</center>
</body>
</html>
JavaScript Code
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest(); create a XMLHttpRequest
object
}
else
{// code for IE6, IE5
if IE5 or IE6 create an
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
ActiveXObject
}
Open the request
xmlhttp.open("GET",url,true);
Send request object
to
xmlhttp.send(null);
server
document.getElementById('test').innerHTML=xmlhttp.responeText;
} Update page with the
response from the server
Important Properties

 The XHR object has 3 important properties:


 The responseText property

 The readyState property

 The onreadystatechange property


 responseText - stores any data retrieved from a server.
document.getElementById('test').innerHTML=xmlhttp.responseText

 Once we have sent a request to the server we are not sure about the
request completion.

 For this we need to set the onreadystatechange property, to a function


(or name of a function) to be executed after completion.

 In this onreadystatechange function we must test the readyState


property before we can use the result of the server call.
The readyState property
 The readyState property holds the status of the server's
response.

 Possible values for the readyState property:


State Description
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete
Make A Change
xmlhttp.onreadystatechange=state_Change();
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
function state_Change()
{
if(xmlhttp.readyState==4)
{ if (xmlhttp.status==200)
{ // 200 = "OK"
document.getElementById(‘test').innerHTML=xmlhttp.responseText; }
else
{
alert("Problem retrieving data:" + xmlhttp.statusText); }
}
}
INSPECT OUR CODE
XHR Object can Request any
Data
 Requesting Text Files
 Requesting XML Files
 Requesting HTML, JSP, ASPX, or ASP
Files
 Submitting Forms
Potential Uses for AJAX
Chat Rooms And
Login Forms
Instant
Messaging

Auto-Complete

Form
Voting and Rating Submission &
Validation
Lightboxes Using AJAX With
Flash

Drag and Drop Updating With User


Content
Potential Problems
 Ajax reliance on JavaScript
 Pages can be difficult to bookmark
 Time lag
 Debugging is difficult
 Complexity of the code makes it
difficult for web developers
AJAX - Further References
 Articles
 Ajax: A New Approach to Web Applications by Jesse James Garrett
http://www.adaptivepath.com/publications/essays/archives/000385.php
 Ajax gives software a fresh look (from CNET News)
http://beta.news.com.com/Ajax+gives+software+a+fresh+look/2100-1007_3-
5886709.html?
 Weighing the Alternatives (from ajax info)
http://www.ajaxinfo.com/default~viewart~8.htm
 Resources
 XMLHttpRequest & Ajax Based Applications (from Fiftyfoureleven.com)
http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/
 Foundations of Ajax by Ryan Asleson, Nathaniel T. Schutta
ISBN: 1590595823 http://www.worldcatlibraries.org/wcpa/isbn/1590595823
 Tutorials
 Getting Started with AJAX (from A List Apart)
http://www.alistapart.com/articles/gettingstartedwithajax
 AJAX:Getting Started (from Mozilla Developer Center)
http://developer.mozilla.org/en/docs/AJAX:Getting_Started
 Dynamic HTML and XML: The XMLHTTPRequest Object (from Apple Developer
Connection) http://developer.apple.com/internet/webcontent/xmlhttpreq.html
 Mastering Ajax, Part 1: Introduction to Ajax (from IBM developerWorks)
http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html?
ca=dgr-wikiAJAXinto1
THANK YOU

You might also like