WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AJAX Tutorial


AJAX
AJAX

AJAX is very useful, it can use:

You can update a web pages without any reload the page
It can request data from a server - after the page has loaded
It can send data to a server - in the background


AJAX Example

AJAX can change this text


AJAX Example Explained

HTML Page

<!DOCTYPE html>
<html>
<body>

<div id="demo"><h2>Let AJAX change this text </h2></div>

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

</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() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
     document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

Start learn AJAX now!