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