Ajax Allowed Creation Of Interactive Web Applications Computer Science Essay

Published:

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

AJAX is shorthand for asynchronous JavaScript and XML. It is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behaviour of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data are usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous. In AJAX it is possible to update parts of a web page, without reloading the whole page. Like DHTML and LAMP, Ajax is not a technology in itself, but a group of technologies. Ajax uses a combination of HTML and CSS 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.

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

Background

In the 1990s, web browsers and web sites were based on static pages and each user action required that the page be re-loaded from the server (or a new page loaded). This could slow down user interaction considerably.

Asynchronous loading of content first became practical when Java applets were introduced in the first version of the Java language in 1995. These allow compiled client-side code to load data asynchronously from the web server after a web page is loaded. In 1996, Internet Explorer introduced the IFrame element to HTML, which also enabled asynchronous loading. In 1999, Microsoft created the XMLHTTP ActiveX control in Internet Explorer 5, which is now supported by Mozilla, Safari, Opera and other browsers as the native XMLHttpRequest object. The utility of background HTTP requests to the server and asynchronous web technologies remained fairly obscure until Google made a wide deployment of Ajax with Gmail (2004) and Google Maps (2005)

AJAX 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 Ajax the following technologies are required:

JavaScript - XmlHttpRequest object

HTML/XHTML

DOM

XML

CSS

In the classic Web application model as discussed by Garrett, a user interacts with a Web server through a Web page running on their browser.

The AJAX Web application model adds an intermediary between the user and the server-side system, which is called an AJAX engine.

The AJAX engine is responsible for communicating with the server and for relaying any information from the server to the user interface

Figure-1

JavaScript call

datastores, backend processing, legacy systems

server-side systems

datastores, backend processing, legacy systems

server-side systems

HTTP request

classic

web application model

HTML + CSS data

http(s) transport

user interface

browser client

user interface

XML data

AJAX engine

user interface

browser client

web and/or XML server

AJAX

web application model

HTTP request

http(s) transport

HTML+CSS data

HTML DOM

DOM stands for Document Object Model; it is an abstract model of the documents, comprising a strict flow of information - typically top-down, from left to right

The DOM presents an HTML document as a tree-structure (a node tree), with elements, attributes, and text.

The HTML Document Object Model (HTML DOM) defines a standard way for accessing and manipulating HTML documents.

Document

Root element:

<html>

Element:

<head>

Root element:

<body>

Element:

<title>

Attribute:

<"href">

Element:

<a>

Element:

<h1>

Text:

"My title"

Text:

"My link"

Text:

"My header"

Figure-2

HTML DOM and JavaScript

JavaScript uses predefined object document, which represents the document as DOM-tree to refer to the Web page it runs on

Documents are treated as trees of nodes

Every item in the documents is a "node" in the tree (both structural tags and attributes, as well as enclosed content texts are nodes)

Child elements and enclosed text are sub-nodes of the parent nodes

Each node may have associated procedures for processing of the node

AJAX Basic Steps

iii

Server-side System

Browser Client

ii

Web Server

HTTP Request

XML HttpRequest

iv

XML HttpRequest

Callback()

XML Data

v

JavaScript call

data

exchange

HTML & CSS data

i

datastores

User Interface

Figure-3 illustrates the following steps in a generalized Ajax request:

The following sequence of steps occurs in a general AJAX request [Figure-1]:

The user generates an event (e.g. entering input or clicking a button). This event triggers a call to a JavaScript function.

An XmlHttpRequest object is created and configured with a request parameter that includes the ID of the component that generated the event and any value that the user has entered.

The XmlHttpRequest object makes an asynchronous request to the web server, i.e. while the request is made the user interface is not blocked. The server processes the request, exchanges any data required from the data store.

Although Figure 1 shows that the web server returns XML Data in fact the server can return any fragment of data, which typically is an XML document or a plain text containing the result.

The XmlHttpRequest object calls a callback() function, it receives the data and processes the result.

The HTML DOM is updated.

How AJAX works

The following example explain how AJAX works:

<html>

<head>

<script type="text/javascript">

function loadXMLDoc()

{

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

}

</script>

</head>

The XMLHttpRequest Object: All modern browsers support the XMLHttpRequest object (IE5 and IE6 uses an ActiveXObject).

The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Create an XMLHttpRequest Object

All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) has a built-in XMLHttpRequest object.

Syntax for creating an XMLHttpRequest object:

xmlhttp=new XMLHttpRequest();

Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:

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();

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)

string:

Sends the request off to the server.

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

The url - A File On a Server

The url parameter of the open() method, is an address to a file on a server:

xmlhttp.open("GET","ajax_test.asp",true);

The file can be any kind of file, like .txt and .xml, or server scripting files like .asp and .php (which can perform actions on the server before sending the response back).

Asynchronous - True or False?

AJAX stands for Asynchronous JavaScript and XML, and for the XMLHttpRequest object to behave as AJAX, the async parameter of the open() method has to be set to true:

xmlhttp.open("GET","ajax_test.asp",true);

Sending asynchronously requests is a huge improvement for web developers. Many of the tasks performed on the server are very time consuming. Before AJAX, this operation could cause the application to hang or stop.

With AJAX, the JavaScript does not have to wait for the server response, but can instead:

execute other scripts while waiting for server response

deal with the response when the response ready

Server Response

To get the response from a server, use the responseText or responseXML property of the XMLHttpRequest object

Property

Description

responseText

get the response data as a string

responseXML

get the response data as XML data

AJAX vs ActionScript

ActionScript is a very powerful RIA programming language that was launched in 1998 by Macromedia. It's deemed to be the most powerful programming language for RIA before Ajax. It uses Flash as a means of interacting with the users. Although it will require Flash in local computers, the popularity of Flash has made the interaction with the client side possible without any need of download. ActionScript is now controlled by Adobe who purchased Macromedia in 2005.

JavaScript before Ajax has been deemed as an "eye candy" programming language. The reason for this is that developers are not able to come in terms of XMLHttpRequest. Before Ajax, XHR is only limited to IE since Microsoft doesn't want to share this powerful function.

When Ajax was launched, JavaScript shed off its eye candy status and become one of the most sought after programming language today. Developers around the world are scrambling to learn this programming language to develop Ajax based applications.

Frameworks have also been developed to convert codes into JavaScript so that it could be developed into a full feature Ajax based application. From a simple eye candy programming language, JavaScript became a very powerful programming language for Rich Internet Application.

Although JavaScript has been developed into greater heights, ActionScript is continuously being developed by Adobe. Today, ActionScript could be easily compared to JavaScript as each of these RIA programming languages has their own advantages and disadvantages. Depending on the need of the developers, they should be able to select which programming language to select.

Using ActionScript

ActionScript's experience in providing RIA has been proven and it continuous to do so under the radar of JavaScript. Developers that use ActionScript are well known in building applications that could easily handle multimedia files.

Audio and video integration is no problem with the use of ActionScript. Obviously, the integration of Flash in ActionScript has enabled this feature. If the developer wants to build an application full of multimedia interaction, then ActionScript should be the choice of programming language.

But as expected, ActionScript is a lot heavier compared to JavaScript. ActionScript is also loose in its coding as it will never require the developer to be very conscious on the case of the codes.

Using JavaScript

On the other hand, JavaScript has been the option for developers in building lightweight applications. This is also the option for developers who also wanted to build an application that will never require any previous download.

Developers will be required to properly code JavaScript but this is eased up with the presence of hundreds of frameworks ready to be used in building an Ajax based application. Because of the popularity of JavaScript, support has been possible for almost any concerns…except security.

Even with the popularity of Ajax and JavaScript security is still the main concern of developers as this programming language can't be easily secured. The only way to secure JavaScript is through the assistance of other programming language.

The Benefits of AJAX

To help you decide whether AJAX is for you or not, here are some of the advantages it has over classic web development techniques:

The interface is much more responsive, as explained before, because only a small part of the page is transferred at a time. The user has the feeling that changes are instantaneous.

In a classic web application, when the web server sends a web page to the browser, it can use multiple connection threads to speed up delivery. However, this happens for content only - what is between the <body> tags. All script and CSS files linked in the page's <head> section are transferred using only one connection thread, which diminishes performance. With AJAX, you only have to load the basic scripts and CSS files, and request the rest as content, through multiple connections.

Waiting time is reduced - when the visitor submits a form, they no longer have to wait for the entire page to be rebuilt and re-transmitted by the server. Instead, only the relevant content changes, and in non-critical cases, the visitor can still work while the data is being submitted.

If a page section encounters an error, other sections are not affected (if not logically linked) and the data already entered by the user is not lost. This way, the application fails graciously, without causing head-aches for the users.

Traffic to and from the server is reduced considerably - because you do not have to send the entire page content (CSS, images, static sections), the bandwidth usage is most likely to decrease.

Drawbacks

Owing to their dynamic nature, Ajax interfaces are often harder to develop when compared to static pages.

Pages dynamically created using successive Ajax requests do not automatically register themselves with the browser's history engine, so clicking the browser's "back" button may not return the user to an earlier state of the Ajax-enabled page, but may instead return them to the last full page visited before it. Workarounds include the use of invisible IFrames to trigger changes in the browser's history and changing the anchor portion of the URL (following a #) when Ajax is run and monitoring it for changes.

Dynamic web page updates also make it difficult for a user to bookmark a particular state of the application. Solutions to this problem exist, many of which use the URL fragment identifier (the portion of a URL after the '#') to keep track of, and allow users to return to, the application in a given state.

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 indexable web applications should provide an alternative means of accessing the content that would normally be retrieved with Ajax, to allow 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. Similarly, devices such as mobile phones, PDAs, and screen readers may not have support for the required technologies. Screen readers that are able to use Ajax may still not be able to properly read the dynamically generated content. 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 do not rely solely on Ajax. In JavaScript, form submission could then be halted with "return false".

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. Techniques do currently exist to sidestep this limitation by using a special Cross Domain Communications channel embedded as an iframe within a page.

Like other web technologies, Ajax has its own set of vulnerabilities that developers must address. Developers familiar with other web technologies may have to learn new testing and coding methods to write secure Ajax applications.

Ajax-powered interfaces may dramatically increase the number of user-generated requests to web servers and their back-ends (databases, or other). This can lead to longer response times and/or additional hardware needs.

Justification

In many cases, related pages on a website consist of much content that is common between them. Using traditional methods, that content would have to be reloaded on every request. However, using Ajax, a web application can request only the content that needs to be updated, thus drastically reducing bandwidth usage and load time.

The use of asynchronous requests allows the client's Web browser UI to be more interactive and to respond quickly to inputs, and sections of pages can also be reloaded individually. 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 have to be requested only once.

State can be maintained throughout a Web site. JavaScript variables will persist because the main container page need not be reloaded.

Writing Services

Essay Writing
Service

Find out how the very best essay writing service can help you accomplish more and achieve higher marks today.

Assignment Writing Service

From complicated assignments to tricky tasks, our experts can tackle virtually any question thrown at them.

Dissertation Writing Service

A dissertation (also known as a thesis or research project) is probably the most important piece of work for any student! From full dissertations to individual chapters, we’re on hand to support you.

Coursework Writing Service

Our expert qualified writers can help you get your coursework right first time, every time.

Dissertation Proposal Service

The first step to completing a dissertation is to create a proposal that talks about what you wish to do. Our experts can design suitable methodologies - perfect to help you get started with a dissertation.

Report Writing
Service

Reports for any audience. Perfectly structured, professionally written, and tailored to suit your exact requirements.

Essay Skeleton Answer Service

If you’re just looking for some help to get started on an essay, our outline service provides you with a perfect essay plan.

Marking & Proofreading Service

Not sure if your work is hitting the mark? Struggling to get feedback from your lecturer? Our premium marking service was created just for you - get the feedback you deserve now.

Exam Revision
Service

Exams can be one of the most stressful experiences you’ll ever have! Revision is key, and we’re here to help. With custom created revision notes and exam answers, you’ll never feel underprepared again.