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.

Talk Python's Mastodon Michael Kennedy's Mastodon