AJAX Basic Tutorial

AJAX XMLHttpRequest

Introduction to AJAX

AJAX allows for

This means that certain parts of the web page can be updated without reloading the entire page.

With AJAX, you can:

Send data to a web server (in the background)
Read data from a web server (after page load)
Update the web page without reloading the page

AJAX Example

The following code shows a basic AJAX example:

AJAX will change this text

Run the code

AJAX Example Explanation

The above example includes the following parts:

HTML code:

　　<!DOCTYPE html>
　　<html>
　　
　　<div id="output">
　　<h2>AJAX will change this text</h2>
　　<button onclick="fetchDoc()" type="button">Make Request</button>
　　</div>
　　
　　</html>

HTML code contains a<div>part (<h2>And<button>).

The<DIV>part is used to display information from the server.

The<button>Call a function (when clicked).

This function requests data from a web server and displays it (without reloading the page):

Function fetchDoc():

　　function fetchDoc() {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState ===　4　&& this.status ===　200) {"}}
　　　　document.getElementById("output").innerHTML = this.responseText;
　　　}
　　};
　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();
　　}

What is AJAX?

AJAX stands for 'Asynchronous Javascript And XML' (Asynchronous JavaScript and XML).

AJAX is not a programming language; it is a technology used to access web servers from web pages.

AJAX allows you to send requests to the server without reloading the page.

AJAX can communicate with the server, exchange data, and update the page without refreshing the page.

AJAX can send and receive various formats of information, including JSON, XML, HTML, and text files.

In short, it is to communicate with the server using the XMLHttpRequest object.

The two main functions of AJAX allow you to perform the following operations:

Sending requests to the server without reloading the page
Receiving and processing data from the server

How does AJAX work?

To perform AJAX communication, JavaScript uses an XMLHttpRequest object to send an HTTP request to the server and receive data as a response.

All modern browsers (Chrome, Firefox, IE7 +Safari, Opera) all support the XMLHttpRequest object.

The following diagram illustrates how AJAX communication works:

AJAX Operation Steps

An event occurred in the webpage (such as the page has been loaded or a button was clicked)
The XMLHttpRequest object is created by JavaScript
The XMLHttpRequest object sends the request to the web server
The server processes the request
The server sends the response back to the webpage
The response is read by JavaScript
The HTML DOM is updated by JavaScript

What you will learn

In the next chapter of this tutorial, you will learn:
How to create an XMLHttpRequest object
How to send data to a web server (in the background)
How to read data from a web server (in the background)
How to update the webpage without reloading the page

AJAX XMLHttpRequest