Ajax Tutorial – 1: How to Send HTTP/HTTPS requests via XMLHTTP Object?

ACMer

12 years ago

Ajax stands for AsynchronousJavascript and Xml. It is not a new programming language or tool. Instead, it is a new way of using existing standards to exchange data between client and server without reloading the whole page.

Ajax is based on Javascript, which needs to create the most important object XMLHttpRequest before any further function calls. All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object. However, on outdated browsers, such as IE5 and IE6, you will need to use new ActivxObject to create a similar object. To sum up, in IE7+ and other modern browsers, you can use the following.

1	var ajax = new XMLHttpRequest();

var ajax = new XMLHttpRequest();

In IE5 and IE6, you will need the alternative.

1	var ajax = new ActiveXObject("Microsoft.XMLHTTP");

var ajax = new ActiveXObject("Microsoft.XMLHTTP");

We can use the following code to safely return the object depending on browsers.

var xmlhttp;
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari
  ajax = new XMLHttpRequest();
}
else
{// IE6, IE5
  ajax = new ActiveXObject("Microsoft.XMLHTTP");
}

var xmlhttp;
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari
  ajax = new XMLHttpRequest();
}
else
{// IE6, IE5
  ajax = new ActiveXObject("Microsoft.XMLHTTP");
}

Some browsers can use new ActiveXObject(“Msxml2.XMLHTTP”) to create the XMLHttpRequest, Therefore, we can try all possible cases before returning a null object.

function Ajax()      // return Ajax object
{
    var ajax = false;
    try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            ajax = false;
        }
    }
    if (!ajax && typeof XMLHttpRequest!='undefined') {
        ajax = new XMLHttpRequest();
    }
    return ajax;
}

function Ajax()      // return Ajax object
{
    var ajax = false;
    try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            ajax = false;
        }
    }
    if (!ajax && typeof XMLHttpRequest!='undefined') {
        ajax = new XMLHttpRequest();
    }
    return ajax;
}

The following example, demonstrates the usage of Ajax. First, we create a server-side script, for example, PHP, which takes one query string ID and computes the reverse string.

    $id = "";
    if (isset($_GET['id']))
    {
        $id = trim($_GET['id']);
    }
    echo strrev($id);

	$id = "";
	if (isset($_GET['id']))
	{
		$id = trim($_GET['id']);
	}
	echo strrev($id);

For example, you can call https://steakovercooked.com/test/testajax.php?id=12345 and the browser will output 54321. The PHP script is as simple as it looks. It gets the parameter from the URL, and prints the reverse to the client browser.

We then design a simple HTML page, which contains a textbox for input and output, a button that will call the ajax object sending request to the PHP page and updates the textbox asynchronous once it has received the response from the PHP page. The update will be processed in background that no page refresh will be noticed. It looks like below.

The HTML code is like this.

<!DOCTYPE HTML>
<html>
    <head>
          <title>Test Ajax</title>
          <script language="Javascript">
        function Ajax()      // return Ajax object
        {
            var ajax = false;
            try {
                ajax = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (E) {
                    ajax = false;
                }
            }
            if (!ajax && typeof XMLHttpRequest!='undefined') {
                ajax = new XMLHttpRequest();
            }
            return ajax;
        }       
        function $(id)     // get DOM
        {
            return document.getElementById(id);
        }
        function run()
            {
            var ajax = Ajax();
            ajax.open("GET", 'https://steakovercooked.com/test/testajax.php?id=' + $('text').value, true);
            ajax.onreadystatechange = function() {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    $('text').value = ajax.responseText;
                }
            }
            ajax.send(null); // send the request          
        }
          </script>
    </head>
    <body>
        The page won't refresh. <BR />
        <input type='text' id='text' value='1234567890' />
        <input type='button' value='Reverse Me' onclick='javascript:run()'>
    </body>
</html>

<!DOCTYPE HTML>
<html>
	<head>
	      <title>Test Ajax</title>
	      <script language="Javascript">
	    function Ajax()      // return Ajax object
		{
		    var ajax = false;
		    try {
		        ajax = new ActiveXObject("Msxml2.XMLHTTP");
		    } catch (e) {
		        try {
		            ajax = new ActiveXObject("Microsoft.XMLHTTP");
		        } catch (E) {
		            ajax = false;
		        }
		    }
		    if (!ajax && typeof XMLHttpRequest!='undefined') {
		        ajax = new XMLHttpRequest();
		    }
		    return ajax;
		}		
		function $(id)     // get DOM
		{
			return document.getElementById(id);
		}
		function run()
	      	{
			var ajax = Ajax();
			ajax.open("GET", 'https://steakovercooked.com/test/testajax.php?id=' + $('text').value, true);
			ajax.onreadystatechange = function() {
			    if (ajax.readyState == 4 && ajax.status == 200) {
			        $('text').value = ajax.responseText;
			    }
			}
			ajax.send(null); // send the request	      
		}
	      </script>
	</head>
	<body>
		The page won't refresh. <BR />
		<input type='text' id='text' value='1234567890' />
		<input type='button' value='Reverse Me' onclick='javascript:run()'>
	</body>
</html>

The ajax (XMLHttpRequest) is used to exchange data with a server. The open takes three parameters. The first one is either GET or POST which specifies the type of the request. The second one is the URL, the location of file on the server. The third one specifies whether the request is true (asynchronous) or false (synchronous). The prototype onreadystatechange, as its name implies, specifies the function to invoke when the ready state changes, such as 200 response. The readyState property holds the status of the XMLHttpRequest. The readyState can be one of the following values.

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

The status property can be 404 (not found) or 200 (success). The send sends the request off to the server. It can take a parameter which is type of string, to send to the server, only to be used when the type of request is POST.

The example can be clicked here: https://steakovercooked.com/test/testajax.html

However, for modern browsers/programming languages, you might want to use JQuery’s $.ajax semantics or the fetch() function that is supported in modern browsers e.g. Chrome.

–EOF (The Ultimate Computing & Technology Blog) —

915 words
Last Post: Heron's Formula for the area of a triangle
Next Post: Silent Failure of Javascript

The Permanent URL is: Ajax Tutorial – 1: How to Send HTTP/HTTPS requests via XMLHTTP Object? (AMP Version)

Related posts: