Core JavaScript

AJAX Ready State Changes

This JavaScript program shows the ready state changes that occur during an AJAX call.

AjaxReadyStateChanges.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's Javascript AJAX Example</title>
  <style>
    #XoaxDiv {
      width:500px;
      background-color:Beige;
      margin:10px;
      padding:20px;
    }
  </style>
</head>
<body>
  <script type="text/javascript" src="AjaxReadyStateChanges.js"></script>
  <h1>Ready State Changes</h1>
  <div id="XoaxDiv"><p>Fill this with the text from XoaX.net's text file.</p></div>
  <button type="button" onclick="LoadXoaxAjaxFile()">Load XoaxAjax.txt</button>
</body>
</html>

AjaxReadyStateChanges.js

function LoadXoaxAjaxFile() {
  var qHttpReq;
  if (window.XMLHttpRequest) {
    qHttpReq=new XMLHttpRequest();
    // Clear the Div First
    document.getElementById("XoaxDiv").innerHTML="";
  }
  qHttpReq.onreadystatechange=function() {
    document.getElementById("XoaxDiv").innerHTML+="State Changed:<br />";
    document.getElementById("XoaxDiv").innerHTML+="Ready State = "+qHttpReq.readyState+"<br />";
    document.getElementById("XoaxDiv").innerHTML+="Response Text = "+qHttpReq.responseText+"<br />";
    document.getElementById("XoaxDiv").innerHTML+="Response XML = "+qHttpReq.responseXML+"<br />";
    document.getElementById("XoaxDiv").innerHTML+="Status = "+qHttpReq.status+"<br />";
    document.getElementById("XoaxDiv").innerHTML+="Status Text = "+qHttpReq.statusText+"<br />";
    document.getElementById("XoaxDiv").innerHTML+="<br /><br />";
  }
  qHttpReq.open("GET","XoaxAjax.php",true);
  qHttpReq.send();
}

XoaxAjax.php

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

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.