Section 2.18. Supporting multiple browsers

2.18. Supporting multiple browsers

It's time to break into this pre-assembled JavaScript, and figure out exactly what's going on. Let's walk through exactly what each piece of createRequest() does, step-by-step.

1. Declare a request variable

   First, we declare a new variable to represent the request object, so we can use that variable in the rest of our JavaScript.

        var request = null;Remember, this variable is not declared in a function... it's just nested inside pizza.html's <script> tags.     requestSince this variable isn't declared inside a function, any of your JavaScript functions can use it. 

   
   

2. Try and create XMLHttpRequest for non-Microsoft browsers

   Next, we define a new function called createRequest(). The first thing this function does is try and create a new request object using the XMLHttpRequest type, which works on almost all browsers except Internet Explorer:

        function createRequest() {       try {         request = new XMLHttpRequest();XMLHttpRequest works     on Safari, FireFox, Mozilla, Opera, and most non-Microsoft browsers.       } catch (trymicrosoft) {         // Try something different         // for Microsoft         // (check out step 3)       }       if (request == null)         alert("Error creating XMLHttpRequest!");At the end of all this, spit out an error     if the request variable is still null.      } If that fails, let's try something else.We want our request variable to point at a JavaScript request object. 

   
   

3. Try and create an ActiveXObject for Microsoft browsers

   In the catch block, we try to create a request object using one of the Microsoft-compatible types... by trying each type in its own try/catch block:

        try {       request =         new ActiveXObject("Msxml2.XMLHTTP");Most versions of IE support this...     } catch (othermicrosoft) {       try {         request =           new ActiveXObject("Microsoft.XMLHTTP");...but for some, you'll need     this other type.ActiveXObject works on Internet Explorer.       } catch (failed) { request = null; }Uh oh... if the code gets here, we've got a     problem. Make sure request is still set to null.     } 

   
   

     ActiveXObjectWARNING! IE 5 on the Mac still won't work, even with this IE-specific code. If you're using IE on the Mac, though... well, what can we say?     requestHere's our request variable again. 

2.18.1. Now put it all together...

     var request = null;     function createRequest() {       try {         request = new XMLHttpRequest();For non-Microsoft browsers like Safari and Firefox.       } catch (trymicrosoft) {         try {           request = new ActiveXObject("Msxml2.XMLHTTP");         } catch (othermicrosoft) {           try {             request = new ActiveXObject("Microsoft.XMLHTTP");           } catch (failed) {             request = null;For the Internet Explorer fans.           }         }       }       if (request == null)         alert("Error creating XMLHttpRequest!");Error handling in case something went wrong.     } 

Don't forget about the big picture... we're still working on getting a request to the Break Neck web server.

Just Do It

It's time to get a taste of the browser wars for yourself. Add the getCustomerInfo() and createRequest() JavaScript from the last several pages into your copy of pizza.html. Then, comment out the parts of createRequest() that create the request object for the type of browser you're using.

If you're using InternetExplorer, comment out the code that deals with ActiveXObject ; if you're using a non-Microsoft browser, comment out the lines that create the XMLHttpRequest type. Now load pizza.html in your browser, and enter in a phone number. You should get an error message, like this:

Here's Internet Explorer, reporting an error because the ActiveXObject part of createRequest() was commented out.

I just tried this, and it really sucks that I had to enter my phone number in to find out that things weren't working. Couldn't you have told me that before I bothered typing my number in?

2.18.2. Don't annoy the customer!

In the Break Neck app, customers only have to fill out one field before getCustomerInfo() gets called, and your code tries to create a new request object. Then, if something's wrong, the customer gets an error message.

But imagine how annoying it would be to fill out an entire form, and then find out that something's wrong... what a waste of time!

It looks like we need to find a way to let users know about any problems much earlier... like before they start typing into the Break Neck form.

BRAIN POWER

Look back at Step 1 on page 88, and think about how we handled creating the request variable. Does this give you any ideas about how you could let customers know about any problems before they start using the Break Neck order form?

Well, we've got to run the createRequest() function somehow, right? How else can we create the request object ?

2.18.3. JavaScript doesn't have to be in a function

Remember how we declared the request variable, but didn't put that line of code in a function?

     <head>       <title>Break Neck Pizza Delivery</title>       ...       <script language="javascript" type="text/javascript">        var request = null;This code will run automatically when the page loads.       </script>     </head> 

Any JavaScript in your web page that's not in a function gets run statically. That means that as the web browser is loading your page, it will automatically run any JavaScript it finds that is not in a function, before anyone can type into your form or click any buttons on the page.

So if we move all of the code in createRequest() out of a function, all the code that tries to create the request object will run as soon as the Break Neck form loads. If there are errors, customers will know right away... and getCustomerInfo() won't need to run createRequest() anymore-the request object will be ready to use, or the customer will have already received an error message.

     requestBy the time the page is loaded, a new variable, called request...     Request Object...should be pointing at an instance of a JavaScript request object.The request variable justs holds something... in this case, a reference to a request object.