XMLHttpRequest

Generating an asynchronous request to the web server requires first to instantiate (allocate the memory of) the XMLHttpRequest object. The allocated memory is assigned to a variable. The programming statement in JavaScript to instantiate a new object is new.[12] The new statement is followed by the constructor function of the object. The custom for object-oriented language developers is to invoke the constructor function using same name as the class name.[13] In this case, the class name is XMLHttpRequest. To instantiate a new XMLHttpRequest and assign it to the variable named request:

var request = new XMLHttpRequest();[14]

The open method prepares the XMLHttpRequest.[15] It can accept up to five parameters, but requires only the first two.

var request = new XMLHttpRequest();

request.open( RequestMethod, SubmitURL, AsynchronousBoolean, UserName, Password );

• RequestMethod: The HTTP request method may be GET for typical quantities of data. Among the other request methods available, POST will handle substantial quantities of data.[16] After the return string is received, then send the DELETE request method to .open() to free the XMLHttpRequest memory.[17] If DELETE is sent, then the SubmitURL parameter may be null.

* request.open( "DELETE", null );

• SubmitURL: The SubmitURL is a URL containing the execution filename and any parameters that get submitted to the web server. If the URL contains the host name, it must be the web server that sent the HTML document. Ajax supports the same-origin policy.[18]
• AsynchronousBoolean: If supplied, it should be set to true. If set to false, then the browser will wait until the return string is received. Programmers are discouraged to set AsynchronousBoolean to false, and browsers may experience an exception error.[19]
• UserName: If supplied, it will help authenticate the user.
• Password: If supplied, it will help authenticate the user.

If the request method of POST is invoked, then the additional step of sending the media type of Content-Type: application/x-www-form-urlencoded is required.[20] The setRequestHeader method allows the program to send this or other HTTP headers to the web server. Its usage is setRequestHeader( HeaderField, HeaderValue ).[15] To enable the POST request method:

* request.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );

If the request method of POST is invoked, then the web server expects the form data to be read from the standard input stream.[21] To send the form data to the web server, execute request.send( FormData ), where FormData is a text string. If the request method of GET is invoked, then the web server expects only the default headers.[22] To send the default headers, execute request.send( null ).[lower-alpha 4]

onreadystatechange is a callback method that is periodically executed throughout the Ajax lifecycle.[23] To set a callback method named ReadyStateMethod(), the syntax is request.onreadystatechange = ReadyStateMethod.[lower-alpha 5] For convenience, the syntax allows for an anonymous method to be defined.[23] To define an anonymous callback method:

var request = new XMLHttpRequest();

request.onreadystatechange = function()
{
// code omitted
}

The XMLHttpRequest lifecycle progresses through several stages – from 0 to 4. Stage 0 is before the open() method is invoked, and stage 4 is when the text string has arrived.[22] To monitor the lifecycle, XMLHttpRequest has available the readyState attribute. Stages 1-3 are ambiguous and interpretations vary across browsers.[15] Nonetheless, one interpretation is:[15]

• Stage 0: Uninitialized
• Stage 1: Loading
• Stage 2: Loaded
• Stage 3: Interactive
• Stage 4: Completed

When readyState reaches 4, then the text string has arrived and is set in the responseText attribute.

var request = new XMLHttpRequest();

request.onreadystatechange = function()
{
    if ( request.readyState == 4 )
    {
        // request.responseText is set
    }
}

PHP is a scripting language designed specifically to interface with HTML.[24] Because the PHP engine is an interpreter – interpreting program statements as they are read – there are programming limitations[lower-alpha 6] and performance costs.[lower-alpha 7] Nonetheless, its simplicity may place the XMLHttpRequest set of files in the same working directory – probably /var/www/html.

The server component of a PHP XMLHttpRequest is a file located on the server that doesn't get transmitted to the browser. Instead, the PHP interpreter will open this file and read in its PHP instructions. The XMLHttpRequest protocol requires it to output a text string.

• cd /var/www/html
• Edit a file named ajax.phtml:

<?php
    echo '<h1>Hello World!</h1>';
?>

The browser component of a PHP XMLHttpRequest is a file located on the server that gets transmitted to the browser. The browser will open this file and read in its HTML instructions.

• cd /var/www/html
• Edit a file named ajax.html:

<html>
<head>
    <title>Hello World</title>
    <script type=text/javascript src=ajax_submit.js></script>
</head>
<body>
    <div id=ajax_title></div>
    <button onclick="ajax_submit( 'ajax_title', 'ajax.phtml' )">
        Submit
    </button>
</body>

• Point your browser to http://localhost/ajax.html
• Press Submit

The Common Gateway Interface (CGI) process allows browsers to request the web server to execute compiled computer programs.[lower-alpha 8]

The server component of a CGI XMLHttpRequest is an executable file located on the server. The operating system will open this file and read in its machine instructions. The XMLHttpRequest protocol requires the executable to output a text string.

Compiled programs have two files: the source code and a corresponding executable.

• cd /usr/lib/cgi-bin
• Edit a file named ajax.c:

#include <stdio.h>

void main( void )
{
    /* CGI requires the first line to output: */
    printf( "Content-type: text/html\n" );

    /* CGI requires the second line to output: */
    printf( "\n" );

    printf( "<h1>Hello World!</h1>\n" );
}

• Compile the source code to create the executable:

cc ajax.c -o ajax

or

sudo cc ajax.c -o ajax

The CGI browser component is the same as the PHP browser component, except for a slight change in the submit_url. The syntax to tell the web server to execute an executable is /cgi-bin/ followed by the filename. For security, the executable must reside in a chroot jail. In this case, the jail is the directory /usr/lib/cgi-bin/.[lower-alpha 9]

• cd /var/www/html
• Edit a file named ajax.html:

<html>
<head>
    <title>Hello World</title>
    <script type=text/javascript src=ajax_submit.js></script>
</head>
<body>
    <div id=ajax_title></div>
    <button onclick="ajax_submit( 'ajax_title', '/cgi-bin/ajax' )">
        Submit
    </button>
</body>

• Point your browser to http://localhost/ajax.html
• Press Submit