Peter Lubbers - Pro HTML 5 Programming

Download from Wow! eBook
132
CHAPTER 5 ■ USING THE COMMUNICATION APIS
if (typeof xhr.withCredentials === undefined) {
document.getElementById("support").innerHTML =
"Your browser doesnot support cross-origin XMLHttpRequest";
} else {
document.getElementById("support").innerHTML =
"Your browser does support cross-origin XMLHttpRequest";
}
Next, set callback functions to handle the progress events and calculate the uploaded and
downloaded ratios.
xhr.upload.onprogress = function(e) {
var ratio = e.loaded / e.total;
setProgress(ratio + "% uploaded");
}
xhr.onprogress = function(e) {
var ratio = e.loaded / e.total;
setProgress(ratio + "% downloaded");
}
xhr.onload = function(e) {
setProgress("finished");
}
xhr.onerror = function(e) {
setProgress("error");
}
Finally, open the request and send the string containing the encoded geolocation data. This will be a
cross-origin request because the target location is a URL with a different origin than the page.
var targetLocation = "http://geodata.example.net:9999/upload";
xhr.open("POST", targetLocation, true);
geoDataString = dataElement.textContent;
xhr.send(geoDataString);
The Final Code
Listing 5-9 shows the complete application code—the contents of the crossOriginUpload.html file.
Listing 5-9. Contents of crossOriginUpload.html
Upload Geolocation Data