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