Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 a communication API which allows webpages to make (INAUDIBLE) requests to a different server by the webpage was first downloaded from. This is called cross origin requests and we'll see in this lesson how to implement the server side. So, we have a client web page which will open in a browser, and the web server this implemented in Python. And first of all, well see how to start that run in. I've opened up a command window here into the Video Brain Project folder and this is how you start the Python to run the web server.
I've installed Python on my machine and it runs in this folder by default, Python27. So the Python engine will be running, it will run my web server, cause server, costofjimmyquestserver.py, and it will run on port 9999. So, I'll press Enter and the web server is now running. Now, I've already opened a browser window, and the browser window, as you can see is the client page, crossoriginupload.html. Important thing for this lesson is the domain.
When I run this example, first of all, I'll be running it from a domain called my domain 1.9999. And when I click the choose file button to say which file I want to upload, I'll choose my (INAUDIBLE) JPEG picture here, and I'll click the start upload button. This will start an asynchronous Ajax request to upload the data, and it will tell me how the data upload is going. On the server here, you can see here I've got some diagnostic print messages to show what's happening. Now, the interesting thing is with Ajax level two, when you have a web page which was downloaded from one Euro.
When it makes a request to the server, there's an initial HTTP request that get end over caught an option request. And the options request gives the web server an opportunity to say which clients it will accept requests from. So, we'll have a look at how that's implemented and then we'll see how the actual post handler is implemented itself in the Python server. The code for this I've opened already in Komodo Edit. This is a Python application, If you haven't done any Python programming before, then you don't need to worry too much.
It's quite a familiar concept, it's an object-oriented language, and what I've implemented here is a class, that's the name of my class. And this is the base class that it implements. This is a standard base class, it's almost like a server that the class for a job application. And in this class I've implemented two methods. I have a method which will handle options headers. This is similar to the do get and do post type methods you might have on a Java server.
So, when the web server runs, any options requests which are sent from the browser to say, will you communicate with me? They would be handled here, and as you can see, first of all, it prints out a message on the console to say that it's received an options request. And I'll just remind you what that looked like. That was this year, received an options request. And what we send back is a status code of 200 to say okay, and then critically these headers get sent back to the client as well.
This indicates which the means are allowed to communicate with the server. In other words, the server is saying I will allow you to talk to me if this is your origin. The origin can specify the schema, and the domain, and the port number, okay? So, if the client was anything other than that, then it wouldn't be allowed to talk to me. We also send back another header to say, I can let you send me post messages. And that's what the client does, the client posts the file to the server.
When it does so, a post message arrives in here. This is how we implement post handling in Python. The details aren't entirely critical. It prints out a message to say, that it's received a post request and we saw that here. And then, it loops through to read all of the data sent over from the client. So that would be the entire contents of the JPEG file. And finally, when that's been read it prints out this message and it sends back another response to the client just so they can send more data the next time around.
So, the key point here with Ajax level 2, in order to support requests from various different clients, you have to be ready to handle the options request. The options request gives you an opportunity to send back headers to say who you will allow to communicate with you? So, it would be interesting to see what would happen, if the client tried to request from a different you allow. So, let's say you had a client, from a Euro other than MyDomain 1. Now, as it happens, I can do that in my web page, as well as MyDomain 1. I have another domain set up, called MyDomain 2. It's actually just a euphemism for localhost.
So, watch what happens if I try to make a request now. First of all, I'll choose which file to upload, (INAUDIBLE) JPEG. And now, see what happens when I try to start an upload. An error occurred, this is because it sent an initial options request to the server, and the options request returned an HTTP response to say I will accept your request as long as you were a file downloaded from this domain. But of course, the client wasn't downloaded from MyDomain 1, 9999, it was downloaded from MyDomain 2, 9999. Therefore, the Ajax request was abandoned.
So, this is quite a robust mechanism. It gives you flexibility, but it also gives you security. A browser can attempt to have an Ajax conversation with any back end server it wants to. At the back end server, you have the opportunity to say, I will only accept these requests if you're coming from a particular domain. So, that concludes the lesson, we've seen how you implement a server in a language such as Python to implement Ajax level two requests that come from different browsers, upload, or download data.
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.