Learning PHP, MySQL, and JavaScript

Using XMLHttpRequest

Due to the differences between browser implementations of XMLHttpRequest, it’s necessary to create a special function in order to ensure that your code will work on all major browsers.

To do this, you must understand the three ways of creating an XMLHttpRequest object:

• IE 5: request = new ActiveXObject("Microsoft.XMLHTTP")

• IE 6+: request = new ActiveXObject("Msxml2.XMLHTTP")

• All others: request = new XMLHttpRequest()

This is the case because Microsoft chose to implement a change with the release of Internet Explorer 6. Therefore, the code in Example 18-1 will work for all the following browsers and newer versions:

• Windows Internet Explorer 5.0

• Mozilla Firefox 1.0

• Netscape 7.1

• Apple Safari 1.2

• Konqueror 3.0

• Nokia S60

• Google Chrome 1.0

• Opera 8.0

Example 18-1. A cross-browser Ajax function

<script>
function ajaxRequest()
{
    try // Non IE Browser?
    {   
        var request = new XMLHttpRequest()
    }
    catch(e1)
    {
        try // IE 6+?
        {   
            request = new ActiveXObject("Msxml2.XMLHTTP")
        }
        catch(e2)
        {
            try // IE 5?
            {   
                request = new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch(e3) // There is no Ajax Support
            {
                request = false
            }
        }
    }
    return request
}
</script>

You may remember the introduction to error handling in the previous chapter, using the try...catch construct. Example 18-1 is a perfect illustration of its utility, because it uses the try keyword to execute the non-IE Ajax command, and upon success, jumps on to the final return statement, where the new object is returned.

Otherwise, a catch traps the error and ...