Start learning with our library of video tutorials taught by experts. Get started

HTML5 Power Workshop
Illustration by

Implementing XMLHttpRequest Level 2 clients


From:

HTML5 Power Workshop

with Andy Olsen

Video: Implementing XMLHttpRequest Level 2 clients

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
HTML5 Power Workshop
3h 9m Intermediate May 31, 2012

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.

Topics include:
  • Using the Communications API
  • Understanding geolocation
  • Getting and watching the current position
  • Using web workers and WebSockets
  • Implementing mobile web user interfaces
  • Managing data in a mobile web application
  • Working offline
  • Using Web SQL
  • Using drag-and-drop
Subjects:
Developer Web Web Design Web Development video2brain
Software:
HTML
Author:
Andy Olsen

Implementing XMLHttpRequest Level 2 clients

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 Power Workshop.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.