Eve: Building RESTful APIs with MongoDB and Flask Transcripts
Chapter: Consuming the service
Lecture: JavaScript and websites
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
How the we consume our Rest service from Javascript? Well, let's see, we have a web page here, super simple,
0:08
just a simple button and we expect that when we press this button an asynchronous call is made to the service and the result will be printed here.
0:19
We want to hit the people endpoint of our web service and we get one single person, the first name of that person appears here,
0:28
let's go and see the code. Here we are, we have a webpage.htm file, it is a single page and it is just plain HTML as you can see.
0:43
Just for convenience this file is saved alongside our server code but it could be stored anywhere, of course. We now need to add the Javascript
0:56
I will just be pasting some code so you don't have to look at me as I type all this stuff,
1:01
it isn't going to be a lot of code, but better safe than sorry. So let me start by adding a head section
1:09
and within the script tag we're going to add our functions. The first one, the most important, is the asynchronous call,
1:19
here it is, so let's give a look at this function, it is going to perform an asynchronous get request
1:26
as you can see here in the first line, we are creating an instance of the xml http request class,
1:34
and then in line seven we're hooking a function to the on readystatechange event. The content of the function is actually very simple.
1:47
All we have to do is make sure that the ready state is 4 which means done, so the request has been performed, and we got a response back.
2:00
And also, the status of the response was okay, 200 So when this is true, when we got back a response and the response is ok,
2:12
we call our callback, which we get as an argument, you can see that here. We call our callback function, and we pass the response text,
2:23
by the way, the URL we hit with our request, this is again an argument which is passed to the function. so once we have hooked a function to our event,
2:38
we go and open our URL and send a request so it is actually very simple. If you're working with some kind of Javascript framework
2:51
like Jquery, Angular or what have you, probably you're going to perform the request in some alternative way.
2:58
This code here is going to work with the pure Javascript, if something like that actually exists. Right now, we need to add our call back function,
3:08
the function which will be in work once the response has been received and can be processed. So let's add a new function here, we call it first name
3:18
and it gets a text, some kind of text, it is playing text from the response body. So the first thing we need to do is parse it as Json.
3:26
And once we have the Json where this is your old classic dom manipulation, we get some HTML element which goes by the id of first time
3:36
and we change its inner HTML to the content of the first name field within our Json string. Of course, we already know that this is where
3:48
the Json string will appear, I only need to fix this. All right, so this paragraph here has an id of first name and our callback function which will be
4:02
invoked by our asynchronous request code will update it with the Json coming from the web service.
4:10
Alright, last thing we need to do is link our button to our code and this is easy to do because I already know
4:19
the URL of the person I want to hit, yes, I'm playing it smart here. Let me see if we can make it more readable by doing this
4:30
well kind of, so you see that on click we call the http get async, we pass the URL to the person we want to hit, to retrieve
4:41
and then we pass the name of the callback function, this should be it, let me save, and then go back to Safari, refresh the page,
4:52
and we're ready to try our code. It doesn't work, and this is actually expected. The reason it isn't working is CORS
5:03
you might know about it already if you're working with the websites and Javascript, you've probably heard about it
5:09
if you didn't, you can go to this excellent reference online at mozilla.org and read about it.
5:18
Every time a browser needs to perform a request to a domain which is different than the one where the web page is hosted it will perform a CORS request
5:30
this is essentially a mechanism to make sure that servers are serving domains and web pages which are well known. I'm not going into the details here,
5:43
you can read the documentation at this a page link on this slide. So the point about CORS is that the server needs to authenticate and authorize
5:54
the web page making the request. Luckily for us, Eve has full support for CORS so let's go and see what we need to do on the server side
6:04
to allow a web page to perform a request to our server. Back to our settings file, let's add a new keyword and it is x_domains.
6:17
Now this defaults to none, and this is why it didn't work when we tried the first time, so basically, this tells our Eve instance
6:26
that it should not accept the requests coming from web pages which are not in the same domain as the server, which is usually not the case.
6:38
So if you want to allow requests from browsers you go here and change this default setting to something like
6:45
example.com this is a list, so you can add that whatever you want here but if you have a public server,
6:59
you want to accept incoming requests from anybody all you have to do is use a star, save, relaunch
7:10
and now it works just fine as expected, John is our man. Let's go back for a moment into our settings file,
7:21
I want to show you an alternative to x_domains and it is x_domain but with regular expressions
7:30
you can use both of these settings together if you want to, of course this one right now doesn't make sense
7:37
because with the first one, you're opening up your server to any web page, and then here we are only accepting the example.com
7:46
or any subdomain within example.com but we might for example, have something like this,
8:01
so here we will accept requests coming from web pages hosted at talkPython.com or web pages hosted at example.com or subdomains within example.com.
8:15
There are actually several more settings you can use to fine tune your course configuration on the server. If you're interested, you can look them up
8:25
at the configuration page at Python-eve.org.