Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Ajax Overview

This article gives an overview of Ajax technology. We will see what is this and what we can do with this technology.

AJAX stands for Asynchronous JavaScript and XML. Asynchronous means that you can make request to a server via Hypertext Transfer Protocol (HTTP), and process the other data while waiting for the response. It is not a new programming language but it is a group of interrelated web development techniques used on client side to create interactive web applications. It is a way of using existing standards such as JavaScript and XML to create interactive web applications. Browser based applications and platform independent applications use Ajax.

With AJAX, we can move data from web page to server and web applications can send data to and receive data from server without interfering with existing page and without making the user wait while reloading the whole page. This is accomplished through a kind of HTTP request. Web pages which do not use AJAX must reload the entire page to change the contents of the web page. There are many web applications running on Ajax technology such as Gmail, Yahoo, Facebook, Twitter and YouTube etc. Ajax uses XHTML for content, CSS for presentation and Document Object Model (DOM) for content display.

To learn Ajax you should have basic understanding of the following:

  • HTML/XHTML
  • JavaScript
  • CSS
  • DOM (Document Object Model)
Ajax technology has some advantages and disadvantages as mentioned below:

Advantages:

  • Ajax allows web applications to interact with data on the web browser.
  • Ajax can be used to handle several complex web applications, for example Google map.
  • Ajax can be used for creating rich web based applications like desktop applications.
  • Ajax can be used to update the page data without reloading the whole page. It reduces server load.
  • Faster retrieval of the data.
  • Ajax is easy to learn and understand. It is based on JavaScript and other technologies such as XML, CSS etc.
  • The code is light weight and not very complex.
  • Ajax is much responsive, whole page data can be transferred at a time.
  • It allows easier navigation and form validation to get proper validation.
  • Reduce the traffic level between client and server and also reduce the time consuming on both side responses.

Disadvantages:

  • It is open source. Anyone can view the source code written for Ajax.
  • It increases design and development time.
  • ActiveX requests are supported only in IE5 and IE6 of old version. This feature is now available in latest version in few browsers.
  • Ajax is not fully integrated with any browser. It has browser compatibility issues.
  • It is harder to bookmark updated page content.
  • The browsers which do not have JavaScript cannot use the application.
  • It has low latency connection to the server.
  • Debugging is difficult.
  • There is problem with browser back button when using Ajax enabled pages.
  • It is less secure because JavaScript code is open source. Unauthorized user/hacker can use code for inferring server side weaknesses.

Characteristics of an Ajax Application

Ajax refers to set of technology and techniques that make web pages to be more interactive like desktop applications. Different from classic web applications, Ajax applications have the following characteristics.

  • Ajax makes boundary between web page and application. In classic web application, web page is rendered by browser to display the result and in Ajax application, the server sends HTML page to browser that allows making page to be interactive.
  • With Ajax, a web page feels like a desktop application. It responds fast and updates the page by fetching the data from the server in the background.
  • In classic web applications web servers serve HTML pages. Some of the pages are static while others are created dynamically at server side. In Ajax applications servers do not need to convert data into HTML page. The server sends data directly to the client.
  • Important characteristic of Ajax is in its first letter “A” – Asynchronous. Asynchronous means the user can interact with the application while the browser is communicating with the server.
  • Ajax is scripting based approach. Developers need to understand JavaScript and write code in JavaScript. JavaScript is hard to develop, maintain, test and debug.
  • An Ajax application reduces network load and provides support for both synchronous and asynchronous communication.
  • If user wants to create a secure application and if the browser does not support JavaScript then we cannot use Ajax.

Browser Support

Not all browsers support Ajax. Here are some browsers which support Ajax :

  • Mozilla Firefox 1.0 and above
  • Microsoft Internet Explorer 5 and above
  • Safari 1.2 and above
  • Netscape Navigator 7 and above

What can Ajax do?

Ajax plays an important role in making web 2.0 promises a reality. Some of the features of web 2.0 are:

  • We can use the Web as a platform.
  • Software can be delivered as a service.
  • Cost effective
  • Architecture with completely user interaction.

Google map is considered as one of the popular AJAX based applications which allows user to zoom in and zoom out and scroll the map in four directions like a desktop application. User can drag the map on the screen using the mouse pointer and double clicking the center.

Gmail uses Ajax for spell check, new mail check and other functions. Yahoo’s Flickr uses Ajax for text editing and tagging interface. Yahoo front page also uses Ajax field. Windows live is application of Ajax technique. It has features such as search, maps, news, email integration, instant messenger etc.

Impact of Ajax on User

Existing Ajax applications can be divided into two types such as

  1. Partially AJAXed –used to provide functionalities like in .-flickr
  2. Fully AJAXed –used for functionalities as well as user interface such as -Google Maps and Windows Live.

The fully AJAXed applications are different from traditional web applications. In these applications

  • A web page breaks down
  • Surfing site or using applications is not just clicking links and loading pages,
  • URL remains unchanged in address bar, forward, backward ,reload buttons are rendered meaningless.

Rich Internet Applications

Ajax is a way of developing richer and more interactive web applications .These applications are referred to as “Rich Internet Applications (RIA)” .RIA are the web applications which provides functionality of the desktop applications. The primary difference between RIA and traditional web applications is quality of interaction between user and the interface. RIA uses controls to improve user’s interaction by allowing better error management, efficient interactions and user experience.

RIAs fall into two basic categories:

  1. Object oriented based approaches: Java and .Net
  2. Scripting based approaches: Ajax and Flash

Features of RIAs are as follows:

  • Installation is not required. Only Ajax enabled browsers are required.
  • Compatible with existing HTML infrastructure and content.
  • Easy to try without the need of additional software.
  • Lower development and deployment costs.
  • Reduces the load on the server and reduction in network traffic.

How AJAX works

Figure 1. Ajax working

As shown in the figure, when user enters some data through the browser, the appropriate web page will be open. When the user requests from the browser it creates XMLHttpRequest object. When a request goes to server it processes the HttpRequest and creates response and send data back to the browser. It processes the data sent from the server using java script and update the page content.

Technologies used in AJAX

  • JavaScript
  • DOM
  • CSS
  • XMLHttpRequest

JavaScript: JavaScript is an object based scripting language used to make request to the web server. JavaScript function is called when event occurs in a page. It is loosely typed and cross-platform programming language. It is used to create interactive web sites. It is mainly used for client side validation, displaying date and time, displaying popup windows and dialog boxes etc. It has become common in server side programming and creation of desktop applications. It provides dynamic behavior to the application.

DOM: It stands for Document Object Model which is representation of XML and HTML documents. It allows interaction with web page using java script and changes the structure of the document. It provides API for changing content, structure and style. It binds JavaScript and other scripting languages with HTML and other markup languages. It is also used to display dynamic data and interacting with data. It is used for manipulating XML and HTML documents.

CSS: It stands for Cascading Style Sheets. It is used for describing the presentation of documents written in markup language. It defines how to display contents and styles of HTML elements. Its new feature added to HTML where users can create style sheets. Styles are saved in external.css file which allows changing the layout of pages in the web site such as layout, colors, fonts ,height, width, background images etc. It enables to design web site in a new way. It is a must when working with web design.

XMLHttpRequest: It is used to interact with client and server. It plays important role in Ajax web development technique. It can be used by JavaScript, VBScript and other scripting languages to manipulate data to and from server using HTTP making connection between client and server side. It is used by many websites to create dynamic web applications. With Ajax, JavaScript communicates with server using XMLHttpRequest object to send request and get response from the server without refreshing the page.

Syntax for creating XMLHttpRequest is as follows:

Variable=new XMLHttpRequest ();

Steps of AJAX Operation

It has following stages:

  • User visits the page by clicking the targeted link or typing URL in the web browser. When the page is loaded, the Ajax engine is also initialized. User interacts with Ajax engine to interact with web server.
  • User requests from web browser and receive the response back. This can be done by an AJAX application which recalls the HTTP transaction which sends request to the server, server responds to the client and client and server close the connection.
  • The client renders the document which may include some JavaScript. Communication with server takes place asynchronously to the user.
  • JavaScript code creates XMLHttpRequest object which requests document from the web server.
  • XMLHttpRequest indicates that data has arrived which is often called a callback. Ajax engine calls the callback functions to receive server response. Data is exchanged with server without reloading the page.
  • The callback function updates the browser using DOM objects, HTML and CSS data. The callback function processes the data and displays it. Ajax applications are terminated once the request is completed.

XMLHttpRequest: It is used to interact with client and server. It plays an important role in Ajax web development technique. It can be used by JavaScript, VBScript and other scripting languages to manipulate data to and from server using HTTP making connection between client and server side.

  • It is used by many websites to create dynamic web applications.
  • It communicates with server in the background.
  • It updates the page with new data without reloading the page.
  • It request and receive the data from web server.

Creating XMLHttpRequest object is as follows:

All modern browsers such as IE7, Firefox, Chrome, and Safari have built in XMLHttpRequest object.

variable variable_name = new XMLHttpRequest ();

OR

Old versions of Internet Explorer such as IE5 and IE6 use ActiveX objects as shown below:

variable variable_name= new ActiveXObject (“Microsft.XMlHTTP”);

The following small example determines which object to use and how to create it:

If(window.XMLHttpRequest)
{
request=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
request=new ActiveXObject(“Microsoft.XMLHTTP”);
}

XMLHttpRequest object methods:

  • open (method,URL):
  • open (method, URL, async), open (method, URL, async, userName), open (method, URL, async, username, password), Specifies the method, URL and other attributes of the request.

    Method represents types of the request such as GET, POST or HEAD and other Http methods such as PUT and DELETE.

    URL Specifies location or path of the file async specifies true (asynchronous) or false(synchronous), “true” means script processes after the send() method without waiting for response and “false” means script waits for response before continuing the script processing.

  • send(string): It is used to send the request.
  • String: Use only POST method request.

  • setRequestHeader(label, value): It is used to set label/value to HTTP header.
  • getResponseHeader(headerName): It returns value of the specific HTTP header
  • getAllResponseHeaders(): It returns complete set of HTTP headers.
  • abort(): It cancels the request.

XMLHttpRequest object Properties

  • readyState: It defines current state or holds the status of the XMLHttpRequest. It has some possible values from 0 to 4.
    • 0 : The request is not initialized.
    • 1 : The request has been setup. Server connection established.
    • 2 : The request has been sent.
    • 3 : The request processing.
    • 4 : The request is finished and response is ready.
  • Onreadystatechange: It stores the name of the function that will process the response from the server and will be called automatically each time the readyState property changes.
  • status: It returns status as a number. e.g. 404: page not found 200: OK
  • responseText: It returns returned data as string of characters.
  • responseXml: It returns data as XML file. It returns XML document object of data from server.
  • statusText: It returns the status as a string. (e.g. “Not Found” or “OK”).
  • Ajax Security

    • JavaScript code is open source. Unauthorized user/hacker can use code for inferring server side weaknesses and can easily penetrate into the system.
    • It is combination of both JavaScript and XML which have security issues that Ajax helps to facilitate.
    • The client code can be easily modified by attacker because it is open source code.
    • The Ajax engine uses JavaScript to capture and transfer user commands into function calls which are sent in plain visible text to the server which may reveal database details.
    • JavaScript code is downloaded from server side and executed at client side which compromises the client by mal-intended code.
    • All the client side validation must be backed up by server side validation.
    • Ajax applications use the same server side security schemes of regular web applications.
    • JavaScript code is open source. Unauthorized user/hacker can use code for inferring server side weaknesses and can easily penetrate into the system.
    • It is combination of both JavaScript and XML which have security issues that Ajax helps to facilitate.
    • The client code can be easily modified by attacker because it is open source code.
    • The Ajax engine uses JavaScript to capture and transfer user commands into function calls which are sent in plain visible text to the server which may reveal database details.
    • JavaScript code is downloaded from server side and executed at client side which compromises the client by mal-intended code.
    • All the client side validation must be backed up by server side validation.
    • Ajax applications use the same server side security schemes of regular web applications.

    Ajax Issues

    Ajax applications are difficult to maintain, test and debug.
  • It is harder to bookmark updated page content.
  • Developers should know the knowledge of technical skills such as JavaScript, CSS, HTML and DOM.
  • The browsers which do not have JavaScript cannot use the application.
  • Old browsers doesn’t support XMLHttpRequest object. IFrame will help because IFrame supports modern browsers.
  • JavaScript technology is incompatible with some applications and browsers.
  • Complexity is increased because server side developers need to understand presentation logic at client side and server side.
  • It is less secure because JavaScript code is open source and is visible to user/hacker .So JavaScript code can raise security problem. Since data is sent in plain text, so it is extremely vulnerable to hacker attacks.

Example

Now let us see some Simple Hello World Example of Ajax usage.

Listing 1: ajaxhelloworld.htm

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function callme()
{
                
var a;
 
    if (window.XMLHttpRequest)
    {// If the browser if IE7+FirefoxChromeOperaSafari
      a=new XMLHttpRequest();
     
    }
   else
    {//If browser is IE6, IE5
      a=new ActiveXObject("Microsoft.XMLHTTP");
    }
 
a.onreadystatechange=function()
{
                
  if (a.readyState==4 && a.status==200)
  {
    document.getElementById("myDiv").innerHTML=a.responseText;
   }
}
 
a.open("POST","mrbool.txt",true);
a.send();
} // fun1() close
</script>
</head>
<body>
 
<div id="myDiv" style="width: 300px; height: 30px;">Click on the button below</div>
<button type="button" onclick="callme()">Change Content</button>
 
</body>
</html>

Listing 2: mrbool.txt

Hello, Welcome to Mrbool.com

Now deploy these two file in a web server like tomcat and start the server. Now access this program using the link:

http://localhost:8080/HelloWorldAjax/ajaxhelloworld.htm

You will see a screen as below:

Figure 2: Output 1

Now click on the button “Change Content”, you will see the output as below:

Figure 3: Output 2

Now let us understand this code and its execution:

  • When you click on the button “Change Content”, the function callme() will be called.
  • In the method callme(), the first step is to check the browser type and then based on the browser create a new instance of XMLHttpRequest object.
  • If the browser is Firefox/Chrome or IE7, then a new instance of XMLHttpRequest object is created
  • Else if the browser is less than IE7, then new ActiveXObject("Microsoft.XMLHTTP") is created.
  • Next the control goes to the line a.open("POST","mrbool.txt",true). It opens the text file mrbool.txt and the next step the request is sent a.send().
  • Now if the server sends the response back then the control goes to line: a.onreadystatechange=function() and displays the content from the Mrbool.txt.

Conclusion

This is all for today's article, hope everybody's got the concept of Ajax. See you next time.



I''m a full stack developer with around 10+ yrs of experience. I enjoy writing technical articles on upcoming technical trends.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login