Constructor

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

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.

The setRequestHeader method

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" );

The send method

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]}

The onreadystatechange event listener

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 example

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.

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

<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>

CGI example

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

#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" );
}

<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>