RESTful and HTTP APIs in Pyramid Transcripts
Chapter: Calling services with Python and JavaScript
Lecture: Calling services with JavaScript clients
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
For our final client, let's create a client side Javascript client, so this is very, very common, you're going to create a website,
0:09
it's going to serve up some HTML, you might put something like angular or Aurelia, or one of those types of front end frameworks into your web app,
0:19
and it does a lot of the work talking to services that you're creating just like we're learning in this course,
0:24
so let's real quickly see how that goes, we're just going to use something super basic like jquery
0:29
but you could use one of the more interesting front end frameworks, for sure.
0:32
Now, this is going to start out to seem totally straightforward and easy— until it's not.
0:38
So let's look at our little HTML, now this is crazy simple HTML, so that's great, we've got an input and you can input the car id
0:48
that you're interested in, and click the search button. Then, some javascript is going to catch that click event
0:54
and it's going to come down here and fill out the details of name, price, year and whatnot.
0:58
So we are going to use jquery and we're including our little site js where we're writing our code. It seems straightforward, it's not totally done
1:06
so if we come over here let's look, when the document is ready we're grabbing the form, we're hooking the submit
1:11
and we're telling it don't actually submit, we got this handled in javascript and we're handling it by calling load car details, that's cool
1:19
so there's a couple of things we need to do here in order to get this start, but let's just run it so we can see what we got so far;
1:26
so you can right click on this in PyCharm and say run if you're familiar with web storm, basically PyCharm has
1:31
all the web store and features built as part of it. All right, so there it goes, now it's off to run, it doesn't do anything yet when I click this
1:38
because there is at least three two dos we still have to fill out right, okay so this seems pretty straightforward,
1:44
and it's good idea to always show the javascript console while you're doing these types of things,
1:50
it's a little upset that I didn't set the encoding to whatever; so we're going to input some kind of id here
1:58
and see what happens, so let's go write the code first first thing we have to do is get the car id, so they're going to type that into this thing here,
2:06
this input box that has the name car id I'm going to kind of cheat and say well there's only one input box so we're going to grab the value out of that
2:15
so also car id is going to be, we'll just do a little jQuery thing, we'll say give me the input and I would like it a val for input boxes
2:23
and things like that you get the val, for raw like red only elements you get the text.
2:29
So let's just alert car id, so let's run this, go over here and say abc, click, not yet, we haven't hooked click yet, have we, okay
2:42
or we're doing something wrong, let's look at the console real quick. Actually, so make sure to click here, let's just say click,
2:50
all right so we're capturing the click, oh great, great there we go, abc, I think it's the caching, caching, caching,
2:57
all right so we hit this, all right it's clicked, we're learning abc very, very good
3:01
so we don't need our little clicked anymore, it looks like we're getting the abc that we typed in correctly, okay, so let's get rid of the to do
3:08
and just say get the car id, the next thing we need to do is actually build the url, right, so var url,
3:15
remember if we have the car car id the url is going to be well what we had in Python, so let's just snatch it here
3:21
like that, so it looks like this, except there is no format there's less rules in Javascript so we're just going to go down here
3:28
and say plus car id, all right. Again, not too much error handling, so we built the url it's all good,
3:38
now, the last thing we need to do is we're going to use jQuery to go and talk to the server, so we'll say $get there's get post delete whatever,
3:47
I want to give it the url, and then we want to give it 2 call back functions, so we're going to say done, and when you're done
3:54
we want to have a function here that has the results. And if you fail, we want to have a function here that has the error, like so.
4:03
Alright, so let's just say alert success, alert fail. Now, this might look like it's going to work, but I do not think it's going to work
4:16
so let's go over here, refresh again, show the console, and let's try. So everything's clear, if we hit click, all right abc great,
4:28
we can get rid of that thing in a moment, now it failed, this url looks right and actually I guess it could have failed
4:35
because of 404 but that's not why it failed, that's why I didn't pay attention to what the id was, look down here cross origin request blocked,
4:44
the same origin policy disallowed reading of the remote resource, so here you have to decide, how is your service going to be used
4:52
in this case, we have one site granted they're both on local host but different ports, they are different applications;
5:00
this one is our service here, that returns this data, at this address. We have this effectively entirely different web app
5:08
running over here running some javascript, if this was running as a page on the same server, this would have worked fine,
5:15
but because our service is running and wants to be contacted from outside of the web app, right,
5:21
hopefully you want to build services that many people consume,right and if that's the case, you need to allow web applications
5:27
javascript apps outside of your domain to talk to it; you want to be very careful here, if you've got like private data
5:35
and sessions and all sorts of stuff, also on that same web app
5:38
you don't want to do it, you probably want to separate your service or something like that,
5:41
but if it's just a pure raw service and it's meant to be consumed from anywhere, you need to find a way to get over this, right.
5:47
So what we're going to do next, is we're going to make a minor change to pyramid to basically enable what's called cores,
5:55
cross origin site scripting, cross origin request security, I think. Yeah, so you can see down here, reason course header, okay.
6:04
So we need to enable cores in particular we need to enable access control allow origin on our service
6:10
so that then the browsers will let our javascript client or someone else's javascript client talk to you our service.