Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Intermediate
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.