AJAX Introduction

AJAX is a developer's dream because you can:

  • Update the web page without refreshing the page
  • Request data from the server after the page is loaded
  • Receive data from the server after the page is loaded
  • Send data to the server in the background

AJAX Example

Click the button below to let Ajax change this text:

Try It Yourself

AJAX Example Explanation

HTML Page

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Let AJAX Change This Text</h2>
  <button type="button" onclick="loadDoc()">Change Text</button>
</div>
</body>
</html>

This HTML page contains a <div> and a <button>.

<div> Used to display information from the server.

<button> Call the function (when it is clicked).

This function requests data from the web server and displays it:

Function loadDoc()
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

What is AJAX?

AJAX = Asynchronous JvaScript And XML.

AJAX is not a programming language.

AJAX simply combines:

  • Browser's built-in XMLHttpRequest object (requesting data from the web server)
  • JavaScript and HTML DOM (display or use data)

Ajax is a misleading name. Ajax applications may use XML to transmit data, but it is also common to transmit data as plain text or JSON text.

Ajax allows for asynchronous updating of the web page by exchanging data with the web server behind the scene. This means that only part of the web page can be updated without reloading the entire page.

How AJAX Works

AJAX
  1. An event occurs in the web page (page loading, button click)
  2. Create the XMLHttpRequest object by JavaScript
  3. The XMLHttpRequest object sends a request to the web server
  4. The server processes the request
  5. The server sends the response back to the web page
  6. Read the response by JavaScript
  7. Perform the correct action (such as updating the page) by JavaScript