Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, part of his series of titles on HTML5 and CSS3, author and expert Andy Olsen looks at advanced topics like geolocation, mobile development, web sockets, Web SQL, and web workers. You'll also learn how to communicate between pages downloaded from different servers and how to use the new Ajax features in XMLHttpRequest Level 2. After completing this workshop, developers be well equipped to start utilizing the powerful features of HTML5.
HTML 5 has made some big improvements on teh way Ajax works. Ajax allows you to communicate in an asynchronous manner from a Web page back to a Web server. And it's used extensively in contemporary web applications. But in Ajax level 2, there were two new features, the first feature is the Event model. If you group with Ajax Level 1, you'll know that there's a single event called Ready State Changed. In Ajax Level 2, there are several different events which are laid to monitor the progress in a more granular manner.
So, the event model has changed and the second big change is that nowadays with HTML 5 you can post back to an Ajax server. Which is on the different domain but on that run that the Web page was loaded from in the first place. This is called cross origins request, that's a new feature in HTML5. So, in this example, I have two different files, we have a Web page that will open up into a browser. And we have a Web server that's capable of supporting Ajax level 2, its actually a Python Web server. We are going to concentrate on the client side in this lesson, but obviously we still do need to run the Web server.
So, I'll show you how to do that first. Now, this is the command that you need to execute. On my machine, I've installed Python. If you don't already have it, then you can easily download it from the Internet. It's quite a simple install. And then, to run Python, by default, it installs into this folder, Python 2-7. So, I'm running Python, and I'm giving it the name of my server causeserver.py, that's this file over here. And it's going to run on port 9999. So, if I press enter, the Python server is now running on that port.
Now, I've already opened a Browser window and this Browser window shows the Client page. You'll notice, that it's been downloaded from My Domain 1. My Domain 1 is just a euphemism on my machine, for local hosts. And because its request then from port 9999 then its going to be downloaded from the Python server that we've just started. So, on this page I can choose a file going to uploaded asynchronously to the server and that illustrate the event model that we have in Ajax level 2.
So, first of all I need to choose a file, this is the new file control provided in HTML5. I'll choose the honeycomb.jpg, that's the downhill slope in Kitzbuhel. It's a fantastic place, quite a challenging one, you should have a go if you fancy skiing. And I'll click Open. So, I'm going to upload that file to the server, and when I click Start Upload, you'll see that we get progress reports to tell us how the upload is going. Now, this is a new feature, Ajax Level 2. With Ajax Level 1, you would never get progress reports when you were uploading data.
It would only raise ready state change event on downloads. But Ajax level 2 allows you to monitor the progress of an upload to the server. So, lets see how that code works. I've got the file in my edotir, cross Origin upload on HTML. And first of all, I'll just take you to the bottom of the code to show you what the page looks like, in terms of HTML. So, we have the Input control, that's the File control, provoded by HTML 5.
When we choose which file we want to upload. And then have a button here, when I click this button, it will actually start the upload process. And hten I have two different controls here that show progress. First of all, the Progress control, which is new in HTML5, that was the Progress bar that you saw increase from 0 to 100. And then, this is the span which outputs the percentage. So, if I run the application again, you can see. All right. Select honeycomb.jpg. Click Start Upload, that's the Progress bar.
And this here is the Span. Okay? So, those two areas here give me some visual indication of how it's going. When the page is loaded, I've got some start-up code here which handles the button. And just sets some global variables to point those two output controls. And when I click the button to start the upload, this is the function that gets called. So, in line19, you start upload. So, first of all, I clear the Progress bar and the message area, because this might be the second or the third time I've tried to run it. I get the File control, and if the user hasn't selected any files, I display an error message.
Otherwise, we display a message quickly to show that we are staring to load the file into memory. And then I use the new File Reader object that's provided in HTML5 and effectively I'm going to read, using that object and I'm going to read the file into memory. So, that happens synchronously, so I have to set up an event handler to know when the file has been loaded into memory. This is all climb side at the moment. So, when the file is completely loaded, it'll call this function to upload and we'll take a look at that in a moment.
So, that's my file reader object and I'm ready for it to start reading. And this function here will read a specified file. So, whichever file the user's chosen, it will read that file into an array of bytes, effectively, in memory. And when it's been completely loaded into memory, this function will be called. So, this is the function that's going to actually send the data asynchronously to the Web server. So, this is where all the Ajax stuff happens. Okay, so, first of all, we display message to say, okay, we are now going to start uploading that data to the server. And here, I create an XML HTTP Request object.
This is the Ajax object that you have to use. Now, the events that you have on this XMLHTTP object are different in HTML5. Starting from the bottom I guess is easier. You have an On Error event. So, if anything goes wrong, we have an error message. For example, you might try to contact an Ajax server that's not available at the moment. So, an error message gets displayed there. As in on load event, which is called when the whole upload or download is finished.
And then the two separate events which tell you how the progress is coming on depending on whether you turned upload data or whether you turn to download data. So, we're uploading data here from the client to the sever. So, in that case this is how you handle the event. The XML HTTP request object has an Upload on Progress event. That will be called continuously during the progress of your upload to tell you how far you've gone so far. And the parameter here for the event handler has two values. Hhow much has been loaded so far to the server and how much is expected to be loaded to the server.
So, there's a math here to figure out what the percentage is of the data that's been uploaded. Compared to what we need to upload in total. And I use that percentage to update the Focus bar. And to update the message area. Now if we were downloading data instead. Rather than handling the upload on progress. You would simply handle the on progress event like this. Okay? And this will tell me how much data has been downloaded from the server. So, we've set up the XML HTTP Request object, we've handled the new events that you get now, in XML HTTP Request level 2.
All that remains is to simply send the data now, this bit is the same as its always been. We open a request to the server, the target location, is a global variable that is set up above, so I'll just show you that, quickly, before we proceed. So, the target location, is the name of my server, local host 9999/upload, that's the Python server. So, we open an asynchronous, true means asynchronous request to that server, and we're going to post data to the Web server.
And the data that we're going to post is the contents of the file. So, this is looked at the client's side of Ajax level 2. We've seen how you can upload data from the client to the server. We've seen how you can handle events such as Upload Progress and the Download Progress. And we've seen how that looks when you actually run it. Both in terms of the server and the client.
There are currently no FAQs about HTML5 Power Workshop.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.