Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Implementing XMLHttpRequest Level 2 servers

From: HTML5 Power Workshop

Video: Implementing XMLHttpRequest Level 2 servers

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.

Implementing XMLHttpRequest Level 2 servers

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.

Show transcript

This video is part of

Image for HTML5 Power Workshop
HTML5 Power Workshop

22 video lessons · 3930 viewers

Andy Olsen
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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 "Already a member? Log in

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

Your file was successfully uploaded.

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.