AJAX Get Example

AJAX is a method for retrieving data from a server without refreshing the web page. Below, we have a simple Get example program to demonstrate how AJAX works. There are three files below which you can create with a text editor. These files are assumed to be in the same folder on the server.

IMPORTANT: These files must be accessed via a web server. That is, they must be on a server or served by a web server on a local machine. For example, if the files are local the program could be run by entering http://localhost:8080/XoaxGetAjax.html into the address bar of your browser, if the site is set up to run on port 8080. See our video on how to install and use IIS, if you do not know what a web server is.

XoaxGetAjax.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's Javascript AJAX Get Example</title>
</head>
<body>
    <script type="text/javascript" src="XoaxGetAjax.js"></script>

    <div id="XoaxDiv"><p>Fill this with a GET on the XoaxGetAjax.php file.</p></div>
    <button type="button" onclick="LoadXoaxAjaxFile()">Load XoaxGetAjax.php</button>
</body>
</html>

XoaxGetAjax.js

function LoadXoaxAjaxFile() {
  var qHttpReq;
  if (window.XMLHttpRequest) {
    qHttpReq=new XMLHttpRequest();
  }
  qHttpReq.onreadystatechange=function() {
    if (qHttpReq.readyState==4 && qHttpReq.status==200) {
      document.getElementById("XoaxDiv").innerHTML=qHttpReq.responseText;
    }  else if (qHttpReq.readyState!=4) {
      document.getElementById("XoaxDiv").innerHTML="Waiting...";
    } else {
      document.getElementById("XoaxDiv").innerHTML="Error";
    }
  }
  qHttpReq.open("GET","XoaxGetAjax.php",true);
  qHttpReq.send();
}

XoaxGetAjax.php

<?php
  echo "<p>XoaX.net GET text has been received.</p>";
?>

Core JavaScript

AJAX Get Example

XoaxGetAjax.html

XoaxGetAjax.js

XoaxGetAjax.php

Output