AJAX Technique Example Using JavaScript

AJAX – Asynchronous JavaScript And XML

This tutorial shows an example on AJAX using JavaScript. AJAX is an acronym that stands for Asynchronous JavaScript And XML. Therefore it is not a technology, but a technique which is implemented using JavaScript.

Here I will show you how to use AJAX technique in simple way without using jquery or any other framework. AJAX is a technique that checks the type of browser and creates an XMLHttpRequest object depending upon the type of browser. Then you can a GET or a POST request.

Prerequisites

Knowledge of JavaScript

XMLHttpRequest

Here in the below code snippets, I will show you how to create XMLHttpRequest object through AJAX technique.

As previously mentioned I will use here plain JavaScript technology to create the required object.

The technique will check the type of browser, such as, Internet Explorer, Firefox, Chrome etc. and create an XMLHttpRequest object.

The XMLHttpRequest is used to perform operations over HTTP methods GET, POST, PUT, etc.

<script type="text/javascript">
	var xmlHttp = null;
	
	function getXmlHttpAjax() {
		if (window.XMLHttpRequest) { // for Mozilla, Safari, Chrome etc.
		  xmlHttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) { // for IE browser
		  try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		  } catch (e) {
			try {
			  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		  }
		}
		
		return xmlHttp;
	}
</script>

Usage Example of AJAX

Here in the below examples I will show you how you can use XMLHttpRequest object to call HTTP GET or POST method.

GET Request

A simple GET request can be written as:

xmlHttp.open("GET", url, true);
xmlHttp.send();

In the above example, you see three parameters – GET, url, true.

The first parameter – GET – is the type of request. Generally GET request is used to fetch data from server.

The second parameter – url – indicates the server location where you want to perform your GET request.

The third parameter – true – indicates the request is Asynchronous. To make it synchronous you can specify false.

The method send() is used to send the data to the server and sending data in body is required only for POST request.

Avoid Caching Results

In the above example, you may get cached results. So to avoid this you need to append a unique value to the URL. One of the ways is to generate the random value using Math.random() method and use it.

xmlHttp.open("GET",url+"?t=" + Math.random(),true);
xmlHttp.send();

Send Data to Server

If you need to send information to server with the GET request, you can send as query parameters or path parameters in the URL itself.

xmlHttp.open("GET", url+"?id=1234&type=cat", true);
xmlHttp.send();

POST Request

A simple POST request is written as:

xmlHttp.open("POST", url, true);
xmlHttp.send();

To POST data, you add an HTTP header with setRequestHeader(). For example, you may set some HTTP headers with the value.

You have to send the data to server location using the send() method.

xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("id=1234&type=cat");

You can also use other HTTP methods, such as, PUT, DELETE, etc., to perform the required operations.

That’s all about how to work with AJAX technique.

Roy Tutorials