AJAX
- A New Approach to Web
Applications
Applications
CONTENTS
- INTRODUCTION
- HISTORY
- TECHNOLOGIES
- DRAWBACKS
- WORKING
OF AJAX
- CONCLUSION
- REFERENCE
INTRODUCTION
Web application designing has by far evolved in a number of ways since
the time of its birth. To make web pages more interactive various techniques
have been devised both at the browser level and at the server level. The
introduction of XMLHttpRequest class in the Internet Explorer 5 by Microsoft
paved the way for interacting with the server using JavaScript, asynchronously.
AJAX, a shorthand for Asynchronous Java And XML, is a technique which uses this
MLHttpRequest object of the browser features plus the Document Object Model and
DHTML and provides for making highly interactive web applications in which the
entire web page need not be changed by a user action, only parts of the page
are loaded dynamically by exchanging information with the server. This approach
has been able to enhance the interactivity and speed of the web applications to
a great extent. Interactive applications such as Google Maps, Orkut, and
Instant Messengers are making extensive use of this technique. This report
presents an overview of the basic concepts of AJAX and how it is used in making
web applications.
Creating Web applications has been considered as one of the most exciting jobs under current interaction design. But, Web interaction designers can't help feel a little envious of their colleagues who create desktop software. Desktop applications have a richness and responsiveness that has seemed out of reach on the Web. The same simplicity that enabled the Web's rapid proliferation also creates a gap between the experiences that can be provided through web applications and the experiences users can get from a desktop application.
In the earliest days of the Web, designers chafed against the constraints of the medium. The entire interaction model of the Web was rooted in its heritage as a hypertext system: click the link, request the document, and wait for the server to respond. Designers could not think of changing the basic foundation of the web that is, the call-response model, to improve on the web applications because of the various caveats, restrictions and compatibility issues associated with it.
But the urge to enhance the responsiveness of the web applications, made the designers take up the task of making the Web work the best it could within the hypertext interaction model, developing new conventions for Web interaction that allowed their applications to reach audiences who never would have attempted to use desktop applications designed for the same tasks. The designers' came up with a technique called AJAX, shorthand for Asynchronous Java and XML, which is a web development technique for creating interactive web applications. The intent of this is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability. AJAX is not a single new technology of its own but is a bunch of several technologies, each nourishing in its own right, coming together in powerful new ways.
What is AJAX?
AJAX is a set of technologies combined in an efficient manner so
that the web application runs in a better way utilizing the benefits of all
these simultaneously.
Ajax, shorthand for Asynchronous JavaScript and
XML, is a web development technique for creating interactive web
applications. The intent is to make web pages feel more responsive by
exchanging small amounts of data with the server behind the scenes, so that the
entire web page does not have to be reloaded each time the user makes a change.
This is meant to increase the web page s interactivity, speed, and usability.
The Ajax
technique uses a combination of XHTML (or HTML) and CSS, for marking up and
styling information.
XML is sometimes used as the format for
transferring data between the server and client
AJAX incorporates:
Standards-based presentation using XHTML and CSS; Dynamic display and interaction using the Document Object Model; Data interchange and manipulation using XML and XSLT; Asynchronous data retrieval using XMLHttpRequest; And JavaScript binding everything together.
Ajax (programming)
Ajax (also AJAX; /ˈeɪdʒæks/; an acronym for Asynchronous
JavaScript
and XML)[1]
is a group of interrelated web
development techniques used on the client-side
to create asynchronous web applications. With Ajax, web applications can
send data to, and retrieve interfering with the display and behavior of the
existing page. Data can be retrieved using the
XMLHttpRequest
object data from, a server
asynchronously (in the background) without. Despite the name, the use of XML is
not required (JSON
is often used instead), and the requests do not need to be asynchronous.[2]
Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up
and style information. The DOM is accessed with JavaScript to
dynamically display, and to allow the user to interact with the information
presented. JavaScript and the XMLHttpRequest object provide a method for
exchanging data asynchronously between browser and server to avoid full page
reloads. Ajax is different with Flash, Silverlight, Java Applet
and other RIA implementations;
Ajax doesn't depend on any plug-in of web browser.
HISTORY
In the 1990s, most web sites were
based on complete HTML pages; each user action required that the page be
re-loaded from the server (or a new page loaded). This process is inefficient,
as reflected by the user experience: all page content disappears then
reappears, etc. Each time a page is reloaded due to a partial change, all of
the content must be re-sent instead of only the changed information. This can
place additional load on the server and use excessive bandwidth.
In 1996, iframe tag was introduced by
internet explorer to load content asynchronously.
In 1998, Microsoft Outlook Web Access team
implemented the first component XMLHTTP by client script.
In 1999, Microsoft utilized its iframe
technology to dynamically update the news stories and stock quotes on the
default page for Internet Explorer (http://home.microsoft.com).In
1999, Microsoft created the XMLHTTP ActiveX control
in Internet Explorer 5, which was later adopted by
Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript
object.
Microsoft
has adopted the native XMLHttpRequest model as of Internet Explorer 7, though the ActiveX version
is still supported. The utility of background HTTP requests to the server and
asynchronous web technologies remained fairly obscure until it started
appearing in full scale online applications such as Outlook Web Access (2000) and Odd post (2002),
and later, Google
made a wide deployment of Ajax with Gmail (2004) and Google Maps
(2005).
The term Ajax
was coined on 18 February 2005 by Jesse James Garrett in an article entitled
"Ajax: A New Approach to Web Applications", based on techniques used
on Google web pages.
On 5
April 2006 the World Wide Web Consortium (W3C) released
the first draft specification for the XMLHttpRequest object in an attempt to
create an official web standard.
TECHNOLOGIES
The term Ajax
has come to represent a broad group of web technologies that can be used to
implement a web application that communicates with a server in the background,
without interfering with the current state of the page. In the article that
coined the term Ajax, Jesse James Garrett explained that the
following technologies are incorporated:
- HTML (or XHTML) and CSS for presentation
- The Document Object Model (DOM) for dynamic
display of and interaction with data
- XML for the
interchange of data, and XSLT for its manipulation
- The XMLHttpRequest
object for asynchronous communication
- JavaScript
to bring these technologies together
Since then,
however, there have been a number of developments in the technologies used in
an Ajax application, and the definition of the term Ajax. XML is not required
for data interchange and therefore XSLT is not required for the manipulation of
data. JavaScript Object
Notation (JSON) is often used as an alternative format for data
interchange, although other formats such as preformatted HTML or plain text can
also be used.
DRAWBACKS
- In pre-HTML5 browsers,
pages dynamically created using successive Ajax requests did not
automatically register themselves with the browser's history engine, so
clicking the browser's "back" button may not have returned the
browser to an earlier state of the Ajax-enabled page, but may have instead
returned to the last full page visited before it. A pre-Ajax workaround
was to use invisible frames to trigger changes in the browser's history. A
workaround implemented by Ajax techniques is to change the URL fragment identifier (the part of a URL
after the '#') when an Ajax-enabled page is accessed and monitor it for
changes
- Dynamic web
page updates also make it difficult to bookmark and return to a particular state of
the application. Solutions to this problem exist, many of which again use
the URL fragment identifier.
- The
solution provided by HTML5 for the above problem also applies for this.
- Depending on
the nature of the Ajax application, dynamic page updates may interfere
disruptively with user interactions, especially if working on an unstable
Internet connection. For instance, editing a search field may trigger a
query to the server for search completions, but the user may not know that
a search completion popup is forthcoming, and if the internet connection
is slow, the popup list may show up at an inconvenient time, when the user
has already proceeded to do something else.
- Because most
web
crawlers do not execute JavaScript code publicly index able web
applications should provide an alternative means of accessing the content
that would normally be retrieved with Ajax, thereby allowing search
engines to index it.
- Any user
whose browser does not support JavaScript or
XMLHttpRequest, or simply has this functionality disabled, will not be able to properly use pages which depend on Ajax. Devices such as smart phones and PDAs may not have support for the required technologies, though this is becoming less of an issue. The only way to let the user carry out functionality is to fall back to non-JavaScript methods. This can be achieved by making sure links and forms can be resolved properly and not relying solely on Ajax.
·
Similarly,
some web applications which use Ajax are built in a way that cannot be read by
screen-reading technologies, such as JAWS. The WAI-ARIA
standards provide a way to provide hints in such a case.
- Screen
readers that are able to use Ajax may still not be able to properly read
the dynamically generated content.
- The same origin policy prevents some Ajax
techniques from being used across domains, although the W3C has a draft of
the XMLHttpRequest object that would enable this functionality. Methods
exist to sidestep this security feature by using a special Cross Domain
Communications channel embedded as an iframe within a page, or by the use
of JSONP.
- Ajax-powered
interfaces may dramatically increase the number of user-generated requests
to web servers and their back-ends (e.g. databases) this can lead to
longer response times and/or additional hardware needs.
- The
asynchronous callback-style of programming required can lead to complex
code that is hard to maintain, to debugand to test
WORKING OF
AJAX
AJAX is Based on Internet Standards
AJAX
is based on internet standards, and uses a combination of:
- XMLHttpRequest
object (to exchange data
- asynchronously
with a server)
- JavaScript/DOM
(to display/interact with the information)
- CSS
(to style the data)
- XML
(often used as the format for transferring data)
AJAX applications are
browser- and platform-independent!
AJAX Example Explained
The AJAX application
above contains one div section and one button. The div section will be used to
display information returned from a server. The button calls a function named loadXMLDoc
(), if it is clicked:
<! DOCTYPE html>
<html>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc ()">Change Content</button>
</body>
</html>
<html>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc ()">Change Content</button>
</body>
</html>
Next, add a <script> tag to the page's head section. The
script section contains the loadXMLDoc() function:
<Head>
<script type="text/javascript">
function loadXMLDoc ()
{
.... AJAX script goes here ...
}
</script>
</head>
<script type="text/javascript">
function loadXMLDoc ()
{
.... AJAX script goes here ...
}
</script>
</head>
Create an XMLHttpRequest Object
All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera)
have a built-in XMLHttpRequest object.
Syntax for creating an XMLHttpRequest object:
Variable=new XMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX
Object:
variable=new
ActiveXObject("Microsoft.XMLHTTP");
To handle all modern browsers, including IE5 and IE6, check if the
browser supports the XMLHttpRequest object. If it does, create an
XMLHttpRequest object, if not, create an ActiveXObject:
Example
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Send a Request to a Server
To send a request to a server, we use the open () and send ()
methods of the XMLHttpRequest object:
xmlhttp.open ("GET","ajax_info.txt", true);
xmlhttp.send();
xmlhttp.send();
|
Method
|
Description
|
|
open(method,url,async)
|
Specifies
the type of request, the URL, and if the request should be handled
asynchronously or not.
method: the type of request: GET or POST url: the location of the file on the server async: true (asynchronous) or false (synchronous) |
|
send(string)
|
Sends the
request off to the server.
string: Only used for POST requests |
GET or POST?
GET is simpler and faster than POST, and
can be used in most cases.
However, always use POST requests when:
- A
cached file is not an option (update a file or database on the server)
- Sending
a large amount of data to the server (POST has no size limitations)
- Sending
user input (which can contain unknown characters), POST is more robust and
secure than GET
Asynchronous JavaScript + XML, while not a technology in itself, is a term coined in
2005 by Jesse James Garrett, that describes a "new" approach to using
a number of existing technologies together, including: HTML or XHTML, Cascading Style
Sheets, JavaScript, The Document Object
Model, XML,
XSLT, and
the most importantly XMLHttpRequest object.
When these technologies are combined in the AJAX model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions.
When these technologies are combined in the AJAX model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions.
Although X in AJAX stands for XML, JSON is used more than XML
nowadays because of its many advantages such as being lighter and a part of
JavaScript. Both JSON and XML are used for packaging information in AJAX model.
|
|
CONCLUSION
Although AJAX allows us to build new and improved ways of
interacting with a Web page, as developers we need to remember that the product
is not about the technologies; it's about the users and how they interact with
the product. Without the users, the projects we build would have no purpose.
With that principle in mind, we can assess what technologies to use and when to
use them in order to create an application that's beneficial to all who use it.
Basically
this is just a small reference to the AJAX functionality in query and I feel
like it fills it's position fairly well. Thank you for reading and have a
good night, don't forget to leave some feedback or corrections.
REFERENCES
1.
Jesse James Garrett (18 February 2005). "Ajax: A New Approach to Web Applications".
AdaptivePath.com. Retrieved 19 June 2008.
2.
Ullman,
Chris (March 2007). Beginning Ajax. Wrox. ISBN 978-0-470-10675-4. Archived from the original on 5 July 2008. Retrieved 24 June 2008.
6.
"JavaScript Object Notation".
Apache.org. Archived from the original on 16 June 2008. Retrieved 4 July 2008.
7.
"Speed Up Your Ajax-based Apps with JSON".
DevX.com.Archived from the original on 4 July 2008. Retrieved 4 July 2008.
8. "Why use Ajax?". InterAKT. 10
November 2005. Archivedfrom the original on 29 May 2008. Retrieved 26 June 2008.
No comments:
Post a Comment