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.