1. AJAX
AN INTRODUCTION
Page 1

2. AGENDA
• WHAT IS AJAX?
• HISTORY
• GOOGLE SUGGEST
• SIMPLE PROCESSING
• COMPONENTS
• XHTML,CSS
• DOM
• XML
• HTTP REQUEST OBJECT
• JAVA SCRIPT
• PROCESS CYCLE
• AJAX ADVANTAGES AND DISADVANTAGES
• EXAMPLE
Page 2

3. BACK THEN…
Click
Search
Page 3

4. AND YOU GET THIS …
Page 4

5. THESE DAYS..
Page 5

6. THE MAGIC SPELL BEHIND THIS IS
AJAX
(Asynchronous JavaScript and XML)
Page 6

7. SO 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
Page 7

8.  Asynchronous Javascript and XML is a client side
techniques that combines a set of known technologies in
order to create faster and more user friendly web pages.
 AJAX provides an ability to communicate with the server
asynchronously.
ASYNCHRONOUS???
We can send a request to server and continue user
interaction with the user with out waiting for server
response. Once the response arrives, a designated area
in UI will update itself and reflect the response
information. Whole page need not be reloaded
Page 8

9. HISTORY OF AJAX
 Starts with web pages
 Static web pages
 Static html page is loaded
 No interaction with user
 Dynamic web pages
 Html page is generated dynamically
 Interaction with user
 Becomes slower as functionality increases
 Speed becomes intolerable, so AJAX has been born
Page 9

10.  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.
 In the year 2006, the W3C (World Wide Web Consortium)
announces the release of the first draft which made AJAX
an official web standard.
Page 10

11. GOOGLE SUGGEST
Google Suggest is
using AJAX to create
a very dynamic web
interface: When you
start typing in
Google's search
box, a JavaScript
sends the letters off
to a server and the
server returns a list
of suggestions.
Page 11

12. SİMPLE PROCESSİNG
• AJAX is based on Javascript, and the main functionality is
to access the web server inside the Javascript code.
When user
The received
We access to the initiates an
information is
server using event, a javascript
shown to the user
special objects; we function is called
by means of the
send data and which accesses
Javascript’s
retrieve data. server using the
functions.
objects.
Page 12

13. COMPONENTS OF AJAX
• Ajax incorporates several technologies, each flourishing in
its own right, coming together in powerful new ways.
– standards-based presentation using XHTML, CSS
– dynamic display and interaction using DOM
– data interchange and manipulation using XML
– asynchronous data retrieval using XMLHttpRequest
– and JavaScript binding everything together.
Page 13

14. XHTML, CSS
• XHTML stands for EXtensible HyperText Markup
Language
– It consists of all the elements in HTML 4.01 combined
with the syntax of XML
• CSS stands for Cascading Style Sheets
– It is used to describe the presentation of a document
written in HTML or XML.
Page 14

15. DOM
• Document Object Model for HTML
 DOM provides a standard set of objects for representing
HTML and XML documents, and a standard interface
for accessing and manipulating them.
 Essentially, it connects web pages to scripts or
programming languages.
 It defines an HTML document as a collection of objects
that have properties and methods and that can respond
to events
Page 15

16. XML
• EXtensible Markup Language
 XML was designed to describe data and to focus on
what data is (unlike HTML which was designed to
display data and to focus on how data looks)
 It is a general-purpose markup language for creating
special-purpose markup languages that carry data.
Page 16

17. XMLHttpRequest
XmlHttp
 The kernel of Ajax
Request
Object
 The XMLHttpRequest object allows client-side JavaScript
to make HTTP requests (both GET and POST) to the server
without reloading pages in the browser.
 This JavaScript object was originally introduced in Internet
Explorer 5 by Microsoft and it is the enabling technology
that allows asynchronous requests
Page 17

18. XMLHttpRequest
• By performing screen updates on the client, you have a
great amount of flexibility when it comes to creating your
Web site :
 Eliminate page refreshes every time there is user input
 Edit data directly in place, without requiring the user
to navigate to a new page to edit the data
 Increase site performance by reducing the amount of
data downloaded from the server
• The possibilities are endless!
Page 18

19. JavaScript
 JavaScript is one of the world's most popular programming
languages
 Its popularity is due entirely to its role as the scripting
language of the WWW along with VBScript
 JavaScript has a syntax similar to Java but:
 It is not a real programming language (it is script)
 It was developed at Netscape and not Sun.
 It was originally called LiveScript
Page 19

20. JavaScript
• JavaScript binds all the mentioned technologies together to
create the Ajax “pattern”.
When a user clicks a button, you can use JavaScript
and XHTML to immediately update the UI
Spawn an asynchronous request to the server using the
XMLHttpRequest object via JavaScript to perform
an update or query a database.
When the request returns as XML, you can then use
JavaScript, CSS, DOM to update your UI
accordingly without refreshing the entire page.
Most importantly, users don't even know your code is
communicating with the server: the Web site feels like
it's instantly responding ("desktop-like" usability)
Page 20

21. THE PROCESS CYCLE
Page 21

22. BENEFITS OF USING AJAX
• Helps to build fast, dynamic websites.
• 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.
• Saves bandwidth by only transmitting new information
• Creates possibility of entirely new types of user interfaces
not possible in traditional model.
Page 22

23. AJAX DISADVANTAGES
 Poor compatibility with very old or obscure
browsers, and many mobile devices.
 Limited Capabilities like multimedia, interaction with
web-cams and printers, local data storage and real time
graphics.
 Not everyone have JavaScript enabled. 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 "noscript" tag.
 Too much code makes the browser slow.
Page 23

24. • The back button problem. People think that when they
press back button, they will return to the last change they
made, but in AJAX this doesn not hold.
• Possible network latency problems. People should be given
feedback about the processing.
• Does not run on all browsers.
Page 24

25. XMLHTTPREQUEST OBJECT
Important Methods
Open(“method”,”url”,boolean)
 to send a request to server
 method - GET or POST
 url - address of the target file
 boolean - to denote whether the request is
synchronous or asynchronous. If true, asynchronous.
Send(content)
 to send data to server for processing
 content - may be string or DOM type of document.
Page 25

26. IMPORTANT PROPERTIES
 readystate
- used to identify the state of the request. Possible values 0-4.
 onreadystatechange
- event handler for an event that fires at every state change.
 status
-Numeric code return by server.Eg.404,200
 responseText
- the string data returned by the server process.
 responseXML
- the DOM type of document returned by the server process.
Page 26

27. CREATE XMLHTTPREQUEST OBJECT
var request;
if (window.ActiveXObject)
{
/*supperted in IE*/
request = new
ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
/* supported in Safari and Mozilla*/
request = new XMLHttpRequest();
}
else
{
request = null;
}
Page 27

28. CREATE XMLHTTPREQUEST OBJECT
request.open("GET", "message.html", true);
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
if(request.status == 200)
{
/*in the case of string data*/
var str = request.responseText;
document.getElementById(‘tag id’).innerHTML = str ;
/*in the case of XML document*/
var response = request.responseXML;
var doc = response.documentElement;
var data1 = doc.getElementByTagName(‘tagname’)[0].firstchild.nodeValue;
}
}
}
request.send(null);
Page 28

29. JAVASCRIPT LIBRARY
A JavaScript library is a library of pre-written JavaScript
which allows for easier development of JavaScript-based
applications, especially for AJAX.
Some popular javascript libraries are
jQuery, MooTools, Prototype, Dojo.
With the help of the javascript library functions dynamic
web page development will be easier.
Page 29

30. THANK YOU…
Page 30