BUILDING RICH INTERNET
APPLICATIONS
WITH AJAX
1
BY
RAMA SATISH K.V.
Asst. Professor, RNSIT
BANGALORE
[email protected]Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Limitations of Classic Web application model
2
An Ajax application eliminates the start-stop-start-stop nature
of interaction on the Web by introducing an intermediary — an
Ajax engine — between the user and the server. It seems like
adding a layer to the application would make it less responsive, but
the opposite is true.
Instead of loading a webpage, at the start of the session, the
browser loads an Ajax engine — written in JavaScript and usually
tucked away in a hidden frame. This engine is responsible for both
rendering the interface the user sees and communicating with the
server on the user’s behalf.
The Ajax engine allows the user’s interaction with the application
to happen asynchronously — independent of communication
with the server. So the user is never staring at a blank browser
window and an hourglass icon, waiting around for the server to do
something.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
3
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
4
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
5
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Then How AJAX works?
6
Ajax model provides an intermediate layer —an Ajax
engine — to handle this communication.
An Ajax engine is really just a JavaScript object or
function that is called whenever information needs to be
requested from the server.
When the Ajax engine receives the server response, it goes into
action, often parsing the data and making several changes to the
user interface based on the information it was provided.
Because this process involves transferring less information than
the traditional web application model, user interface updates are
faster, and the user is able to do his or her work more quickly.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
7
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
8
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Why Ajax?
9
Internet-applications have many benefits over
desktop applications; they can reach a larger
audience, they are easier to install and support,
and easier to develop.
With AJAX, Internet applications can be made
richer and more user-friendly
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Technologies Behind Ajax
10
Garrett's article mentions several technologies that he sees as parts of
an Ajax solution. These are:
HTML/XHTML: Primary content representation languages
CSS: Provides stylistic formatting to XHTML
DOM: Dynamic updating of a loaded page
XML: Data exchange format
XSLT: Transforms XML into XHTML (styled by CSS)
XMLHttp: Primary communication broker
JavaScript: Scripting language used to program an Ajax
engine
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Who’s Using Ajax
11
Google is making a huge investment in developing the Ajax
approach. All of the major products Google has introduced over the
last year — Orkut, Gmail, the latest beta version of Google Groups,
Google Suggest, and Google Maps — are Ajax applications.
Others are following suit: many of the features that people love in
Flickr depend on Ajax, and Amazon’s A9.com search engine applies
similar techniques. These projects demonstrate that Ajax is not only
technically sound, but also practical for real-world applications.
Ajax applications can be any size, from the very simple, single-
function Google Suggest to the very complex and sophisticated
Google Maps.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
12
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
13
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
14
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Updating Web Page Text with Ajax
15
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
http://www.espncricinfo.com/
16
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Chatting in Real Time with Ajax
17
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Google Chat / Facebook Chat
18
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Dragging and Dropping with Ajax
19
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
http://www.google.com/ig
20
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Downloading Images with Ajax
21
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
http://vijaykarnatakaepaper.com/svww_index1.php
22
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
http://youtube.com
23
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Other Related Examples
24
Live Search
Online Poll
Upload Example
Reading XML Data
Feedback Form
Throttling
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
The XMLHttpRequest object
25
By using the XMLHttpRequest object, a web
developer can update a page with data from the
server after the page has loaded!
AJAX was made popular in 2005 by Google.
The XMLHttpRequest object is supported in all
major browsers (Internet Explorer, Firefox, Chrome,
Opera, and Safari).
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
XMLHttpRequest Object
26
Creating XMLHTTPRequest Object
Sending Request to server
Server Response
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Creating XMLHttpRequest object
27
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Request to server
28
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Server Response
29
The onreadystatechange property
After a request to a server, we need a function to
receive the data returned from the server.
The onreadystatechange property stores the function
that will process the response from a server. The
function is stored in the property to be called
automatically.
The following code sets the onreadystatechange
property and stores an empty function inside it:
xmlhttp.onreadystatechange=function()
{
// We are going to write some code here
}
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
The readyState property
30
The readyState property holds the status of the server's response.
Each time the readyState property changes, the
onreadystatechange function will be executed.
Possible values for the readyState property:
Add an If statement to the onreadystatechange function to test if
the response is complete (means that now we can get our data):
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
31
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
// Get data from the server's response
}
}
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
The responseText property
32
The data sent back from a server can be retrieved with the
responseText property.
Now, we want to set the value of the "Time" input field
equal to responseText:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.myForm.time.value=xmlhttp.responseText;
}
}
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
AJAX Example
33
To understand how AJAX works, we will create a
small AJAX application.
First we are going to create a standard HTML form
with two input fields: Name and Time. The "Name"
field will be filled out by the user, and the "Time"
field will be filled out with AJAX.
The HTML file will be named "testAjax.htm", and it
looks like this (notice that the HTML form below has
no submit button!):
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Advantages & Disadvantages of XMLHttp
34
Undoubtedly, we can see the advantage of using XMLHttp for client-
server communication instead of hidden frames. The code we write is
much cleaner and the intent of the code is much more apparent than
using numerous callback functions with hidden frames. You have access to
request and response headers as well as HTTP status codes, enabling you
to determine if your request was successful.
The downside is that, unlike hidden frames, there is no browser history
record of the calls that were made. The Back and Forward buttons do not
tie in to XMLHttp requests, so you have effectively cut off their use. It is
for this reason that many Ajax applications use a mixture of XMLHttp and
hidden frames to make a truly usable interface.
Another disadvantage, which applies to Internet Explorer only, is that
you depend on ActiveX controls being enabled. If the user has your
page set up in a particular security zone that doesn't allow ActiveX
controls, you cannot access the XMLHttp object. In that case, you may
have to default to using hidden frames.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
35
This is what enables the hidden frame technique to work: both
frames load a page from the same origin; thus, they are allowed to
communicate using JavaScript.
If you try to load a frame with a page from another origin, you will
not be able to interact with that page or access any scripting features
of it. The intent is to prevent malicious programmers from getting
your information out of a legitimate web page.
The same origin policy also affects how XMLHttp works. Using
XMLHttp, you cannot access any resource that is not from the same
origin as the page running the code. This means that, by default, you
cannot use a URL beginning with http:// in the open() method; you
can use only absolute or relative URLs from within the same domain.
If you need to access a URL located in a different origin, you must
create a server-side proxy to handle the communication
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Break
36
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Ajax Patterns
37
Design patterns describe programming techniques to solve
common problems.
We've already seen some of these patterns in action, namely
the hidden frame technique and asynchronous XMLHttp
calls.
These are communication patterns between the client
and server using JavaScript.
Predictive fetch pattern,
Submission throttling pattern,
Periodic refresh,
Multi stage download,
Fall back patterns.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Predictive Fetch
38
In a traditional web solution, the application has no idea what
is to come next. A page is presented with any number of links,
each one leading to a different part of the site. This may be
termed "fetch on demand," where the user, through his or
her actions, tells the server exactly what data should be
retrieved.
The Predictive Fetch pattern is a relatively simple idea that
can be somewhat difficult to implement: the Ajax application
guesses what the user is going to do next and retrieves the
appropriate data.
In a perfect world, it would be wonderful to always know
what the user is going to do and make sure that the next data
is readily available when needed.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Use Case : Reading an article
39
There are simple use cases where predicting user actions is
somewhat easier. Suppose you are reading an online article
that is separated into three pages. It is logical to assume
that if you are interested in reading the first page, you're
also interested in reading the second and third page.
So if the first page has been loaded for a few seconds, it is
probably safe to download the second page in the
background. Likewise, if the second page has been loaded
for a few seconds, it is logical to assume that the reader will
continue on to the third page. As this extra data is being
loaded and cached on the client, the reader continues to
read and barely even notices that the next page comes up
almost instantaneously after clicking the Next Page link.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Use Case: Email
40
Another simple use case happens during the writing of an e-mail. Most of
the time, you'll be writing an e-mail to someone you know, so it's logical to
assume that the person is already in your address book. To help you out, it
may be wise to preload your address book in the background and offer
suggestions. This approach is taken by many web-based e-mail systems,
including Gmail and AOL Webmail.
The key, once again, is the "logical-to-assume" criterion. By anticipating
and pre-loading information related to the user's most likely next steps,
you can make your application feel lighter and more responsive; by using
Ajax to fetch information related to any possible next step, you can quickly
overload your server and make the browser bog down with extra processing.
As a rule of thumb, only pre-fetch information when you believe it's logical
to assume that information will be requisite to completing the user's next
request.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Submission Throttling
41
Predictive Fetch is one pattern for retrieving data from the server; the other
side of an Ajax solution is the sending of data to the server.
Since you want to avoid page refreshes, the question of when to send user
data is important. In a traditional web site or web application, each click
makes a request back to the server so that the server is always aware of what
the client is doing.
In the Ajax model, the user interacts with the site or application without
additional requests being generated for each click.
Using Submission Throttling, you buffer the data to be sent to the server on
the client and then send the data at predetermined times. The venerable
Google Suggest feature does this brilliantly. It doesn't send a request after
each character is typed.
Instead, it waits for a certain amount of time and sends all the text
currently in the text box. The delay from typing to sending has been fine-
tuned to the point that it doesn't seem like much of a delay at all.
Submission Throttling,
Prof. Rama Satish, RNSIT, Bengaluru. in part, gives Google Suggest its speed. 19/08/2014
42
Submission Throttling typically begins either when the web site or
application first loads or because of a specific user action. Then, a client-
side function is called to begin the buffering of data. Every so often, the
user's status is checked to see if he or she is idle. If the user is still active,
data continues to be collected.
When the user is idle, which is to say he or she is not performing an action,
it's time to decide whether to send the data. This determination varies
depending on your use case; you may want to send data only when it
reaches a certain size, or you may want to send it every time the user
is idle.
After the data is sent, the application typically continues to gather data until
either a server response or some user action signals to stop the data
collection. Figure 3-2 outlines this process.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
43
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Periodic Refresh
44
The Periodic Refresh design pattern describes the
process of checking for new server
information in specific intervals. This approach, also
called polling, requires the browser to keep
track of when another request to the server should
take place.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Where is it used?
45
This pattern is used in a variety of different ways on the Web: ESPN
uses Periodic Refresh to update its online scoreboards automatically.
For example, the NFL Scoreboard, located at
http://sports.espn.go.com/nfl/scoreboard, shows up-to-the-minute
scores and drive charts for every NFL game being played at the time.
Gmail (http://gmail.google.com) uses Periodic Refresh to notify users
when new mail has been received. As you are reading an e-mail or
performing other operations, Gmail repeatedly checks the server to see
if new mail has arrived.
XHTML Live Chat (www.plasticshore.com/projects/chat/) uses
Periodic Refresh to implement a chat room using simple web
technologies. The chat room text is updated automatically every few
seconds by checking the server for new information. If there is a new
message, the page is updated to reflect it, thus creating a traditional
chat room experience.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
New Comment Notifier Example
46
A feature that has been creeping into blogs across the
Web since the beginning of 2005 is a New Comment
Notifier.
A New Comment Notifier does exactly what it says it
does: it alerts the user when a new comment has
been added.
This can take the form of a simple text message
displayed on the page.
In this example, Periodic Refresh is used to check a
database table containing comments to see which is
the newest.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Multi-Stage Download
47
With the popularity of residential broadband Internet solutions,
many sites have upgraded, including multimedia, more pictures,
and more content. This approach, while giving the user more
information, also leads to slower download times as everything is
loaded in seemingly random order. Fortunately, there is an Ajax
solution for this problem.
Multi-Stage Download is an Ajax pattern wherein only the most
basic functionality is loaded into a page initially. Upon completion,
the page then begins to download other components that should
appear on the page. If the user should leave the page before all of
the components are downloaded, it's of no consequence. If,
however, the user stays on the page for an extended period of time
(perhaps reading an article), the extra functionality is loaded in the
background and available when the user is ready.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Drawbacks of Multi-Stage Download
48
Although nice, Multi-Stage Download does have a downside:
the page must work in its simplest form for browsers that
don't support Ajax technologies. This means that all the basic
functionality must work without any additional downloads.
The typical way of dealing with this problem is to provide
graceful degradation, meaning that those browsers that
support Ajax technologies will get the more extensive
interface while other browsers get a simple, barebones
interface.
This is especially important if you are expecting search
engines to crawl your site; since these bots don't support
JavaScript, they rely solely on the HTML in the page to
determine your site's value.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Additional Information Links Example
49
When reading through an article online, frequently
there are Additional Information links included for
further reading on the topic. The key question here is
this:
What is the main content?
Clearly the article text is the main content on the
page, so it should be downloaded when the page is
initially loaded. The additional links aren't as
important, so they can be loaded later.
This example walks you through the creation of such
a solution.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
The impact of Web 2.0 on Cloud Computing
50
Static Pages ……………………
Dynamic Pages…………………..
Classic Web Pages …………………
Distributed Web Applications using Ajax………..
Cloud Computing
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Creating AJAX Applications
51
BY
RAMA SATISH K.V.
Asst. Professor, RNSIT
BANGALORE
[email protected]Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Fetch the message
52
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
XMLHttpRequest Object Properties
53
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
XMLHttpRequest Object methods
54
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
XMLHttpRequest Object Properties
55
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
readyState
56
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
HTTP Status Code
57
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Adding Some Server-Side Programming
58
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Sending Data to the Server Using GET
59
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Sending Data to the Server Using POST
60
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Using Ajax Together with XML
61
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Questions
62
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Review Questions
63
1. What is web 2.0? Discuss the applications of Ajax.
2. Explain the different ways to create XHR Object and also check the browser
compatibility.
3. Write short notes on:
a. Open() b. send() c. onreadystatechange event
1. Explain how Ajax communicates using GET and POST methods using an
example program.
2. List the various properties of XHR object and their meaning.
3. Write an Ajax program to read data.txt from the server.
4. What are inner functions in Java Script. Explain with an example?
5. How Ajax communicates with php script to get response from server.
6. Discuss the Ajax communication with multiple XHR objects with an
example.
7. Discuss how JavaScript can download the XML file content from color.xml.
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
Thank you
64
Prof. Rama Satish, RNSIT, Bengaluru. 19/08/2014
