Home > Projects > Hello World



AJAX


To view the complete JavaScript source for the below examples, refer to the <head> and <script> tags of this web page.


The examples below use four data files:


displayhello.txt

Hello, World! (text file)

displayhello.html

Hello, World! (html file)

displayhello.xml

<?xml version="1.0" ?<
<root>
    Hello, World! (XML file)
</root>  

displayhelloPost.php

<?php 
echo 'Hello, '. $_POST['firstname'] . ' ' . $_POST['lastname'] . ' !';
?<  


Step One: Make an HTTP request


To make an HTTP request to the server using JavaScript, you need an instance of a class to create an XMLHttpRequest object which is the keystone of AJAX.

All modern browsers support the XMLHttpRequest object. Below is the syntax for creating an XMLHttpRequest object for non-IE and IE browsers. An error is displayed if an older browser is detected.


NOTE: the line numbering may not match the JavaScript in the <HEAD> tag as this page is in continual change.

 
var xhttp;
        if (window.XMLHttpRequest) {
					xhttp = new XMLHttpRequest(); //Not IE
				} else if(window.ActiveXObject) {
					xhttp = ActiveXObject("Microsoft.XMLHTTP"); //IE6, IE5
				} else {
					alert("Your browser doesn't support AJAX, upgrade your browser to a newer version.");
				}

TEXT Example


Next specify what to do with the request. Tell the HTTP request object which JavaScript function will handle processing the response. In this example function printHelloText is called to print the contents of a text file called displayhello.txt

 
xhttp.onreadystatechange = printHelloText; 

Initiate the asyncronous request. If the XmlHttpRequest object is not in the middle of a request (readyState), start the new asyncronous call. Note 4 = "complete" and 0 = "uninitialized". Setup the connection as a GET call to "displayhello.txt". True parameter explicity sets the request to asyncronous which is the default. Then line 38 makes the call.

function callHelloText() {
        if (xhttp.readyState == 4 || xhttp.readyState == 0) {
					xhttp.open("GET", 'ajax/files/displayhello.txt', true);
					xhttp.onreadystatechange = printHelloText; 
					xhttp.send(null);
				}			
			}

The printHelloText() function is called every time the XmlHttpRequest object state changes. First, check the readyState to see if the XmlHttpRequest state is finished. Last, set the contents of the demoText element to the result of the asyncronous call so the contents of the text file "Hello, World! (text file)" displays in the web page.

function printHelloText() {
        if (xhttp.readyState == 4) {
				document.getElementById('demoText').innerHTML = xhttp.responseText;
				}
			}

To see the text file example: Click for "Hello World!"



HTML Example


HTML is similar to text. Setup the connection as a GET call to "displayhello.html".

 
xhttp.open("GET", 'ajax/files/displayhello.html', true);

Then set the contents of the demoHTML element to the result of the asyncronous call so the contents of the HTML file "Hello, World! (html file)" displays in the web page.

document.getElementById('demoHTML').innerHTML = xhttp.responseText;

To see the HTML file example: Click for "Hello World!"



XML Example


In the previous examples, after the response to the HTTP request was received the responseText property of the request object was used which contained the contents of the "displayhello.txt" and "displayhello.html" files. Now the responseXML property will be used.

 
xhttp.open("GET", 'ajax/files/displayhello.xml', true);

The code takes the XMLDocument object given by responseXML and uses DOM methods to access some of the data contained in the XML document.

var xmldoc = xhttp.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
document.getElementById('demoXML').innerHTML = root_node.firstChild.data;

To see the XML file example: Click for "Hello World!"



Data / POST Example


The JavaScript below will send a dynamic page, called "displayhelloPost.php" that will take the data entered and return a computed string, "Hello, [FirstName] [Last Name]!"


Get the user input data of first name and last name combined in the variable vars (line 84) and send it along with the url (line 81) of the server-side (PHP) script then call xhttp.send(vars) (line 93).


Also set the content of the status (line 90) element to the result of the call so the return data displays in the web page.

var url = "ajax/files/displayhelloPost.php";
var fn = document.getElementById("first_name").value;
var ln = document.getElementById("last_name").value;
var vars = "firstname="+fn+"&lastname="+ln;
xhttp.open("POST", url, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.onreadystatechange = function() {
  if(xhttp.readyState == 4 && xhttp.status == 200) {
    var return_data = xhttp.responseText;
  document.getElementById("status").innerHTML = return_data;
  }
 }
xhttp.send(vars); 
document.getElementById("status").innerHTML = "processing...";

To see the POST example that replaces: "Hello, World!" for "Hello, FirstName Last Name!"


First Name:

Last Name: