Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

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, while all other browsers use a slightly different method. Therefore, the code in Example 17-1 will work for all major browsers released over the last few years.

Example 17-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 17-1 is a perfect illustration of its utility: 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. If, however, the command fails, a catch traps the error and the subsequent command is executed. Again, ...