AJAX Request

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

AJAX – XMLHttpRequest

The XMLHttpRequest object requests the data from a server.

Send a Request to a Server

To send a request to a server, use the open() and send() methods of the XMLHttpRequest object:

xhttp.open(“GET”, “ajax_info.txt”, true);

xhttp.send();

Method

Description

open(method, url, async)

Specifies the type of request

method: the type of request: GET or POST
url: the server (file) location
async: true (asynchronous) or false (synchronous)

send()

Sends the request to the server (used for GET)

send(string)

Sends the request to the server (used for POST)

The URL – A File on a Server

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

xhttp.open(“GET”, “ajax_test.asp”, true);

The file can be any kind of file, like .txt and .xml, or server scriptings files like .asp and .php.

Asynchronous – True or False?

Server requests must be sent asynchronously.

The async parameter of the open() method must be set to true:

xhttp.open(“GET”, “ajax_test.asp”, true);

By sending asynchronously, 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 after the response is ready

GET or POST?

GET is much simpler and faster than POST, and can be used in most cases.

Use POST requests when:

  • A cached file is not an option (update a file or database on the server).
  • While sending a large amount of data to the server (POST has no size limitations).
  • Sending user input, POST is more robust and secure than GET.

GET Requests

A simple GET request:

<!DOCTYPE html>

<html>

<body>

<h2>The XMLHttpRequest Object</h2>

<button type=”button” onclick=”loadDoc()”>Request data</button>

<p id=”demo”></p>

<script>

function loadDoc() {

const xhttp = new XMLHttpRequest();

 xhttp.onload = function() {

 document.getElementById(“demo”).innerHTML = this.responseText;

  }

 xhttp.open(“GET”, “demo_get.asp”);

  xhttp.send();

}

</script>

</body>

</html>

In the example above, you may get a cached result. To avoid this, add a unique ID to the URL.

Example

<!DOCTYPE html>

<html>

<body>

<h2>The XMLHttpRequest Object</h2>

<button type=”button” onclick=”loadDoc()”>Request data</button>

<p id=”demo”></p>

<script>

function loadDoc() {

const xhttp = new XMLHttpRequest();

 xhttp.onload = function() {

 document.getElementById(“demo”).innerHTML = this.responseText;

  }

  xhttp.open(“GET”, “demo_get.asp?t=” + Math.random());

  xhttp.send();

}

</script>

</body>

</html>

If you want to send information with the GET method, add the information to the URL.

Example

<!DOCTYPE html>

<html>

<body>

<h2>The XMLHttpRequest Object</h2>

<button type=”button” onclick=”loadDoc()”>Request data</button>

<p id=”demo”></p>

<script>

function loadDoc() {

const xhttp = new XMLHttpRequest();

xhttp.onload = function() {

document.getElementById(“demo”).innerHTML = this.responseText;

  }

  xhttp.open(“GET”, “demo_get2.asp?fname=Henry&lname=Ford”);

  xhttp.send();

}

</script>

</body>

</html>

POST Requests

A simple POST request.

Example

<!DOCTYPE html>

<html>

<body>

<h2>The XMLHttpRequest Object</h2>

<button type=”button” onclick=”loadDoc()”>Request data</button>

<p id=”demo”></p>

<script>

function loadDoc() {

const xhttp = new XMLHttpRequest();

 xhttp.onload = function() {

 document.getElementById(“demo”).innerHTML = this.responseText;

  }

 xhttp.open(“POST”, “demo_post.asp”);

  xhttp.send();

}

</script>

</body>

</html>

To POST data like an HTML form, add an HTTP header with setRequestHeader(). Define the data you want to send in the send() method:

Example

<!DOCTYPE html>

<html>

<body>

<h2>The XMLHttpRequest Object</h2>

<button type=”button” onclick=”loadDoc()”>Request data</button>

<p id=”demo”></p>

<script>

function loadDoc() {

const xhttp = new XMLHttpRequest();

xhttp.onload = function() {

document.getElementById(“demo”).innerHTML = this.responseText;

  }

 xhttp.open(“POST”, “demo_post2.asp”);

 xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

xhttp.send(“fname=Henry&lname=Ford”);

}

</script>

</body>

</html>

Synchronous Request

For executing a synchronous request, change the third parameter in the open() method to false:

xhttp.open(“GET”, “ajax_info.txt”, false);

Sometimes async = false is used for quick testing. You will also find synchronous requests in older JavaScript code.

Since the code waits for server completion, there is no need for an onreadystatechange function:

Example

<!DOCTYPE html>

<html>

<body>

<h2>The XMLHttpRequest Object</h2>

<p id=”demo”>Let AJAX change this text.</p>

<button type=”button” onclick=”loadDoc()”>Change Content</button>

<script>

function loadDoc() {

  var xhttp = new XMLHttpRequest();

  xhttp.open(“GET”, “ajax_info.txt”, false);

 xhttp.send();

 document.getElementById(“demo”).innerHTML = xhttp.responseText;

}

</script>

</body>

</html>