TIPS & TRICKS FOR STUDY: 2021

AJAX - The XMLHttpRequest Object

The XMLHttpRequest Object

All modern browsers support the XMLHttpRequest object.

The XMLHttpRequest object can be used to exchange data with a web 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 (Chrome, Firefox, IE, Edge, Safari, Opera) have a built-in XMLHttpRequest object.

Syntax for creating an XMLHttpRequest object:

variable = new XMLHttpRequest();

Define a Callback Function

A callback function is a function passed as a parameter to another function.

In this case, the callback function should contain the code to execute when the response is ready.

xhttp.onload = function() {

// What do do when the response is ready

}

Send a Request

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

xhttp.open("GET", "ajax_info.txt");

xhttp.send();

Example

// Create an XMLHttpRequest object

const xhttp = new XMLHttpRequest();

// Define a callback function

xhttp.onload = function() {

// Here you can use the Data

}

// Send a request

xhttp.open("GET", "ajax_info.txt");

xhttp.send();

AJAX Introduction

AJAX = Asynchronous JavaScript And XML.

AJAX is not a programming language.

AJAX just uses a combination of:

A browser built-in XMLHttpRequest object (to request data from a web server)

JavaScript and HTML DOM (to display or use the data)

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

HTML Example

<!DOCTYPE html>

<html>

<body>

<h2>Let AJAX change this text</h2>

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

</div>

</body>

</html>

The HTML page contains a <div> section and a <button>.

The <div> section is used to display information from a server.

The <button> calls a function (if it is clicked).

The function requests data from a web server and displays it:

Function LoadDoc()

function loadDoc() {

const xhttp = new XMLHttpRequest();

xhttp.onload = function() {

document.getElementById("demo").innerHTML = this.responseText;

}

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

xhttp.send();

}