3.34. Frequently Asked Questions? | Q: | We're using two request objects so we can send requests to both coffee makers, right? | | A: | We were actually able to make requests to both coffee makers with just one request object. The problem, though, was that we can't get responses from both coffee makers with just a single request object. When you make a request, and the server works on that request, the browser uses the request object to connect the server's response with your JavaScript code. But if you start another request using the same request object before the first request is complete, the browser can't make that connection anymore. The second request overwrites the first one. | | Q: | And that's why Bob's coffee got brewed, but Jim's didn't, right? Because his order was placed second, so it overwrote Jim's earlier order? | | A: | Exactly. And even though the coffee-making script on the server finished Jim's order and returned a response, the browser had no way to connect that response to your JavaScript. The request object was already being reused to handle Bob's order. By using two request objects, we can make sure that both coffee makers can be used, and that the browser can always get the server's response back to your JavaScript callback function. | | Q: | So we should always use two request objects in our asyncronous applications? | | A: | No, not at all. In fact, in a lot of your asynchronous apps, one request object will be plenty. The only time you need more than one request object is when your app needs to make more than one asynchronous request at the same time. | | Q: | And why did we turn the code that created request objects into a function again? Didn't we just take that code out of a function in Chapter 2? | | A: | We sure did. But remember, in Chapter 2 we only needed that code to run once: for the single request object. Since we need two request objects for the coffee maker, it was simpler to put the request object creation code in a function, and then call that function twice: once for each request object. You could have kept the code staticand not put it in a functionbut you would have had to change it to refer to request1 instead of request, and then create another copy that referred to request2. There's nothing really wrong with this, but we preferred to keep the request object creation code in a single function, and then just call that function as many times as we need it to run. | | Q: | Why are you calling createRequest() again in serveDrink()? | | A: | When a server's response is complete, the ready state of the request object is set to "4". But even if you use the response, nothing resets the request object's ready state. So the first line of serveDrink()if (request1. readyState == 4)would always be true after coffee has been brewed using the first coffee maker. This is a problem if serveDrink() is called when the second coffee maker finishes brewing, though. Even though it's the second coffee makerand the second request objectthat needs to be dealt with, the first request object could still have that ready state of 4. To avoid this, we need to reset the request object. | | Q: | Wouldn't it be easier to just set the request object's readyState property to 0 in serveDrink()? | | A: | It sure would... except that readyState is a read-only property, and you can't set it directly in your JavaScript. Only the browser can change the readyState property of the request object. To get around that, we just call createRequest(), which creates a new request object. That's a bit of a hack, but it's the easiest way to reset the request and make sure only an active request object has a ready state of 4. |
Just Do It You're almost done with your multi-request coffee-making wonder app... all that's left is to change the serveDrink() callback so that it can handle two request objects, instead of just one. Here's the code we wrote for the part of serveDrink() that deals with the second coffee maker. Make sure you have the same code, and save your changes to coffee.js request1 = createRequest(); } else alert("Error! Request status is " + request1.status); } else if (request2.readyState == 4) { if (request2.status == 200) { var response = request2.responseText; var whichCoffeemaker = response.substring(0, 1); var name = response.substring(1, response.length); if (whichCoffeemaker == "1") { var coffeemakerStatusDiv1 = document.getElementById("coffeemaker1-status"); replaceText(coffeemakerStatusDiv1, "Idle"); } else { var coffeemakerStatusDiv2 = document.getElementById("coffeemaker2-status"); replaceText(coffeemakerStatusDiv2, "Idle"); } alert(name + ", your coffee is ready!"); request2 = createRequest(); } else alert("Error! Request status is " + request2.status); } }
|
|
