Peter Lubbers - Pro HTML 5 Programming

130
CHAPTER 5 ■ USING THE COMMUNICATION APIS
Listing 5-7. Checking if cross-origin support is available in XMLHttpRequest
var xhr = new XMLHttpRequest()
if (typeof xhr.withCredentials === undefined) {
document.getElementById("support").innerHTML =
"Your browser does not support cross-origin XMLHttpRequest";
} else {
document.getElementById("support").innerHTML =
"Your browser doessupport cross-origin XMLHttpRequest";
}
Making Cross-Origin Requests
To make a cross-origin XMLHttpRequest, you must first create a new XMLHttpRequest object, as shown
in the following example.
var crossOriginRequest = new XMLHttpRequest()
Next, make the cross-origin XMLHttpRequest by specifying an address on a different origin as
shown in the following example.
crossOriginRequest.open("GET", "http://www.example.net/stockfeed", true);
Make sure, you listen for errors. There are many reasons why this request might not succeed. For
example, network failure, access denied, and lack of CORS support on the target server.
Using Progress Events
Instead of numerical states representing different stages of the request and response, XMLHttpRequest
Level 2 provides named progress events. You can listen for each of these events by setting a callback
function for the event handler attribute.
Listing 5-8 shows how callback functions are used to handle progress events. Progress events have
fields for the total amount of data to transfer, the amount that has already transferred, and a Boolean
value indicating whether the total is known (it may not be in the case of streaming HTTP).
XMLHttpRequest.upload dispatches events with the same fields.
Listing 5-8. Using the onprogress event
crossOriginRequest.onprogress = function(e) {
var total = e.total;
var loaded = e.loaded;
}
if (e.lengthComputable) {
// do something with the progress information
}