Simple Ajax examples - u3schools - Online Web Tutorials

Simple Example in AJAX

Get a text

<html>
<head>
<script>
function submitForm()
{
    var xhr;
    try {  xhr = new ActiveXObject('Msxml2.XMLHTTP');   }
    catch (e)
    {
        try {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch (e2)
        {
          try { xhr = new XMLHttpRequest();     }
          catch (e3) {  xhr = false;   }
        }
     }

    xhr.onreadystatechange  = function()
    {
         if(xhr.readyState  == 4)
         {
         if(xhr.status  == 200)
         document.ajax.dyn="Received:"  + xhr.responseText;
         else
         document.ajax.dyn="Error code " + xhr.status;
         }
    };

   xhr.open(GET, "data.txt",  true);
   xhr.send(null);
}

</script>
</head>

<body>
<FORM method="POST" name="ajax" action="">
<INPUT type="BUTTON" value="Submit"  ONCLICK="submitForm()">

 <INPUT type="text" name="dyn"  value="">
</FORM>
</body>
</html>

Comments on the code:

new ActiveXObject(Microsoft.XMLHTTP)
   This constructor is for Internet Explorer.

new XMLHttpRequest()
   This constructor is for any other browser including Firefox.

http.onreadystatechange
  An anonymous function is assigned to the event indicator.

http.readyState == 4
   The 4 state means for the response is ready and sent by the server.

http.status == 200
   This status means ok, otherwise some error code is returned, 404 for example.

http.open( "POST", "data.xml", true);
   POST or GET
   URL of the script to execute.
   true for asynchronous (false for synchronous).

http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   This is for POST only.

http.send(document.getElementById("TYPEDTEXT").value);
   Send data to the server.
Data comes from the "TYPEDTEXT" variable filled throught the form by the user.

Get from XML

To get data from an XML file, we have just to replace this line:

document.ajax.dyn="Received:" + xhr.responseText;

by this code:

        // Assign the XML file to a var
      var doc = xhr.responseXML;
       // Read the first element
      var element = doc.getElementsByTagName('root').item(0);  
       // Assign the content to the form
      document.ajax.dyn.value= element.firstChild.data;

Write to body

In this demo, the text read is put into the body of the page, and not into a textfield.
The code below replaces the textfield form object and the second part replaces the assignment into the JavaScript function.

<div id="zone">
     ... some text to replace ...
 </div>

var a = document.getElementById("zone");
  a.innerHTML = "Received:" + xhr.responseText;

Post a text

In this demo, a text is sent to the server and is written into a file. The call to the "open" method changes, the argument is POST, the url is the name of a file or script that receives the data sent, and that must process it. And the "send" method has now a value as argument that is a string of parameters.

xhr.open("POST", "ajax-post-text.php", true);
xhr.setRequestHeader("Content-Type",
    "application/x-www-form-urlencoded");
xhr.send(data);

The parameter of the send method is in the format of the HTML POST method. When several values are sent, they are separated by the ampersand symbol:

var data = "file=" + url + "&content=" + content;

The "file" parameter is the name of a file created to store the content. The filename must be checked by the server to prevent any other file to be modified.

Using an external file

It is simpler to include a JavaScript file. This line will be included into the head section of the HTML page:

<script src="ajax.js" type="text/javascript"></script>

And the function is called with this statement:

var xhr = createXHR();

Back Next