All About AJAX – From Beginners to Experts – Part 1

Brief History of Web Development

Let’s go 18 years back 1996, We have just started to create web pages, static with text, static with images and wowed the world. The browser was in demand to display web pages which render HTML. Later on, using Perl or C dynamic content has started to serve to a browser. As HTML and Browser evolved, Web becoming interesting, to stream video, playing games, online chatting, pay the bills, find a date and lots of other fun/work activity.

Flash Player was the key part in 2000 to the 2010 year. By using it, Advertiser has started creating animated ads and born of Rich Internet Application. With the use of Adobe Flex technology and instantly became famous. But Flash Player is not supported by Apple on Mobile devices and HTML 5 seems promising.

HTML 5 has gain popularity and started to use to make Richer Internet Application using JavaScript and it’s framework introduced by many giants. i.e JQuery, DOJO, Backbone, Sencha, Angular.

New Trend came and that’s Single Page Application without refreshing the page, render dynamic data like Gmail does. To get data, Browser needs to send the request to the server using JavaScript and that’s called AJAX.

Brief History of AJAX

Microsoft has introduced Internet Explorer to beat Netscape Navigator and got succeed. IE become the world famous browser and introduced many functionalities like ActiveX and Iframe to load asynchronous data. In 1998 IE introduce XMLHTTP for outlook web app. Another browser like Mozilla, Safari has introduced XMLHttpRequest and IE has supported in IE 7.

JavaScript was not widely supported and trusted language in those days. So the world was adopting Adobe Flex to develop Enterprise Rich Internet Application and it grew a lot in 2007-2008. In 2010 Apple wrote a letter regarding supporting flash player in iPhone, IPAD and IOS supported devices and that was not a good news for Adobe for more info click here. From that day the Big company would hesitate to build an application in Flex and search for new approach rises.

Google continued to develop an application in that approach and gave the world Gmail, GMap, Google+, Picasa etc using AJAX and others followed.

What is AJAX?

AJAX stands for Asynchronous JavaScript and XML. AJAX is a technique to send the request and get data asynchronously with the refreshing web page which happens in the traditional application like Wikipedia.

With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. – Wikipedia

XMLHttpRequest is used to make a call to server and retrieve the data. It’s an API provided by the browser to support AJAX technology.

This JavaScript code is to make ajax call to server.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function myAjax() {
 var xmlHttp = new XMLHttpRequest();
 var url="serverStuff.php";
 var parameters = "first=barack&last=obama";
 xmlHttp.open("POST", url, true);

 //Black magic paragraph
 xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xmlHttp.setRequestHeader("Content-length", parameters.length);
 xmlHttp.setRequestHeader("Connection", "close");

 xmlHttp.onreadystatechange = function() {
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
   document.getElementById('ajaxDump').innerHTML+=xmlHttp.responseText+"<br />";
  }
 }

 xmlHttp.send(parameters);
} //from stackoverflow

Here is the PHP code:

1
2
3
4
5
6
7
8

<?php
 //serverStuff.php
 //from stackoverflow
$lastName= $_POST['last']; $firstName = $_POST['first']; 

//everything echo'd becomes responseText in the JavaScript 

echo "Welcome, " . ucwords($firstName).' '.ucwords($lastName); 

And here is HTML code:

1
2
3
4
5
6

<!--Just doing some ajax over here... from stackoverflow-->
<a href="#" onclick="myAjax();return false">
Just trying out some Ajax here....</a>
<br />
<br />
<span id="ajaxDump"></span>

This is an example without any framework or library. Just plain JavaScript.

In next blog, it will be in more detail to make a different kind of ajax call with JQuery.