JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

AJAX Introduction

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.

Using AJAX you can:

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

AJAX Example

The following code shows a basic example of AJAX:

AJAX will change this text

Run code

AJAX Example Explained

The above example has the following parts:

HTML code:

The HTML code contains a <div> section (<h2> and <button>).

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

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

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

Function fetchDoc():

What is AJAX?

AJAX stands for Asynchronous JavaScript And XML.

AJAX is not a programming language, it's a technique for accessing web servers from a web page.

AJAX allow you to make requests to the server without reloading the page.

AJAX can communicate with the server, exchange data, and update the page without having to refresh the page.

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

In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers.

The two major features of AJAX allow you to do the following:

  • Make requests to the server without reloading the page
  • Receive and work with data from the server

How AJAX Works?

To perform AJAX communication JavaScript uses an XMLHttpRequest object to make HTTP requests to the server and receive data in response.

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

The following illustrations demonstrate how AJAX communication works:

How AJAX Works

Steps of AJAX Operation

  1. An event occurs in a web page (i.e. the page is loaded or a button is clicked)
  2. An XMLHttpRequest object is created by JavaScript
  3. The XMLHttpRequest object sends a request to a web server
  4. The server processes the request
  5. The server sends a response back to the web page
  6. The response is read by JavaScript
  7. The HTML DOM is updated by JavaScript

What You Will Learn

In the next chapters of this tutorial you will learn:

  • How to create XMLHttpRequest object
  • How to sent data to a web server (in the background)
  • How to read data from a web server (in the background)
  • How to update a web page without reloading the page