Ajax Demos

Several demos of Ajax and the XMLHttpRequest object. Each demo is a HTML page, that holds the JavaScript code and the HTML form used to interact with the script.
All the demos use an external JavaScript file, ajax.js that creates an instance of the object, and assigns it to the xhr variable.
You are free to use the code of these demos as template for pages of your own website (see licence at bottom).

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.

Values of readyState should be successively 1, 2, 3 and 4.

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.

Charge le fichier ajax-form.xml et écrit son contenu dans les champs du formulaire.

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

More demos

Scaling images under the mouse

Script to show how to manage a gallery of thumbnails with a function to display image in full size, when the mouse is moved over a thumbnail.
Ajax is used for loading the full size images asynchronously after the loading of the page.

Sequence of requests

Vous can have a dialogue with a program on the server, by chaining Ajax requests, with the POST method to send data to the server and GET to retrieve the results found by the remote program. The demo shows how to overcome the traps of the asynchronous mode.

Forum

Check If file Exist with Ajax always returns true.

Wed, 18 Mar 2009 08:39:46

Wicked

In the demo file exists, everything seems to work accept for no matter what I type in the box to check for it always says that the file exist when in fact it does not. My code is exactly the same as the one on the demo page. What would cause this to always return that the file exist when in fact it doesn't. The demo appears to function correctly unlike my own. I have not changed anything. I am on a Linux Server. Any info would be helpful. Also please let me know if you need any additional information from me.
Wed, 18 Mar 2009 20:43:40

Administrator

If it is exactly the same code, sure, this is the configuration of the server that differs. Not all servers support the same functionnalities, and return the same infos. But in any if a mean should be available to know if a file exists with HTTP codes.
© 2006-2012 Xul.fr