Ajax Demos

Get a file

Read a text file, ajax-get.txt, from the server and display the content on the current page, into the "zone" tag.
This is a minimal script that makes use of the GET method and checks only for the value of readyState, and not the status.
This simple code can work locally on a desktop.

Code

function submitForm()
{ 
  var xhr=createXHR();
  xhr.open("GET", "ajax-get.txt",true);
  xhr.onreadystatechange=function()
  { 
    if(xhr.readyState == 4)
    {
      document.getElementById("zone").innerHTML= xhr.responseText;	
    } 
  }; 
  xhr.send(null); 
}

<FORM name="ajax" method="POST" action="">
  <input type="BUTTON" value="Submit"  onClick="submitForm()">
</FORM>

<div id="zone"></div>

Values of readyState

This property holds successive values of the readyState property, starting from 1, and ending to 4 when the exchange with the server is completed. This demo displays the values and helps to understand how the XMLHttpRequest object works.

Code:

function submitStates(url)
{ 
  xhr=createXHR();
  var zone = document.getElementById("zoneStates");
  zone.innerHTML="Started...";
  xhr.open("GET", url, true);
  xhr.onreadystatechange=function() 
  {
    if (xhr.readyState == 4) 
    {
      zone.innerHTML += xhr.readyState;
      if (xhr.status == 200) 
      {
        zone.innerHTML += "Completed...";
        document.getElementById("datafield").innerHTML += xhr.responseText;
      } 
      else 
      {
        alert("Error " + xhr.status);
      }
    }
    else
    {
      zone.innerHTML += xhr.readyState;
    }
  }
  xhr.send(null); 
}

<FORM name="ajax" method="POST" action="">
  <INPUT type="BUTTON" value="Start" 
                ONCLICK="submitStates('ajax-get.txt')">
</FORM>

<div id="zone"></div>
<div id="datafield"></div>

File exists

Simple demo to check if a file exists.
The script Attemp to read the header of a file, throw an error if the file is not found...

Code:

function submitExists(url)
{ 
  xhr=createXHR();
  xhr.open("HEAD", url, true);
  xhr.onreadystatechange=function() 
  {
    document.getElementById("zoneExists").innerHTML="Wait server...";
    if(xhr.readyState == 4) 
    {
      var value;
      if(xhr.status == 200)
      { 
        value = url + " exists...";
      }
      else 
      {
        if(xhr.status==404) value = url + " doesn't exist!";
        else value = "Error, status is " + xhr.status;
      }
      document.getElementById("zone").innerHTML=value;			
    }
  }
  xhr.send(null); 
} 

<FORM name="ajax" method="POST" action="">
<INPUT type="BUTTON" value="Check"  
      ONCLICK="submitExists(document.ajax.filename.value)">
<INPUT type="text" name="filename" value="demos.html" maxlength="40">
</FORM>
    

<div id="zoneExists"></div>

Form and XML

Fill a form with data taken from an XML document.

Code:

function processData(doc)
{
  var element = doc.getElementsByTagName('one').item(0);
  document.form1.one.value= element.firstChild.data;
  document.form1.two.value= doc.getElementsByTagName('two').item(0).firstChild.data;
  document.form1.three.value= doc.getElementsByTagName('three').item(0).firstChild.data;
}
function submitXML()
{ 
  var xhr=createXHR();
  xhr.open("GET", "ajax-form.xml",true);
  xhr.onreadystatechange = function()
  { 
    if(xhr.readyState == 4)
    {
      if(xhr.status == 200)
      {
        processData(xhr.responseXML);
      }	
      else	
      {
        alert("Error: returned status code " + xhr.status + " " + xhr.statusText);
      }	
    } 
  }; 
  xhr.send(null); 
} 

<FORM name="form1" method="POST" action="">
<INPUT type="BUTTON" value="Fill"  ONCLICK="submitXML()">
<INPUT type="text" name="one" size="32" value="">
<INPUT type="text" name="two">
<INPUT type="text" name="three">
</FORM>

Reading an HTML page

This demo creates the responseHTML-like attribute, as the responseText and responseXML attributes of XMLHttpRequest. It is made of a JavaScript function and a tag. To add this new feature to a web page, copy the three lines of code from the demo file, and past them into the page that has to read the content of another HTML page.
Works remotely or locally, and with any browser.

Load the anotherpage.html file, get the content of the BODY section and write it into this page, below...

Code:

<FORM name="ajax" method="POST" action="">
<INPUT type="BUTTON" value="Load HTML and get data"
     ONCLICK="loadWholePage('anotherpage.html')">
</FORM>

<div id="storage" style="display:none;"></div>
<div id="displayed"></div>

JavaScript code