Lesson 57, Part 3: Ajax Basics

Loading...

From the course by Johns Hopkins University

HTML, CSS, and Javascript for Web Developers

3911 ratings

Johns Hopkins University

HTML, CSS, and Javascript for Web Developers

3911 ratings

Course 4 of 6 in the Specialization Ruby on Rails Web Development

Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones. In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.

From the lesson

Using Javascript to Build Web Applications

In this module, we are going to take all those newly learned Javascript language skills and learn how to utilize them within the context of a web page. We’ll start by learning how to properly manipulate the web page components using the Javascript Document Object Model API. We will then move on to learning one of the most popular ways of serving up data to a web site - Ajax. We'll learn about the protocol that the language of the web speaks in (HTTP), how to set up and handle Ajax requests and responses, as well as how to process JSON data. We'll finish the module by connecting our restaurant web site from Module 3 to a real backend service that will allow us to pull the data for the restaurant menu dynamically from the server without having to reload the entire page.

Lesson 56: HTTP Basics12:50

Lesson 57, Part 1: Ajax Basics5:43

Lesson 57, Part 2: Ajax Basics13:11

Lesson 57, Part 3: Ajax Basics6:45

Lecture 58: Processing JSON9:08

Meet the Instructors

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[SOUND] So in the previous part of this lecture,

we looked at ajaxUtils.js which is small library we wrote in order

to make Ajax request to the server and process the response at least

some what by being able to give our user the use of our library that is.

And then this case it's just us.

The use of our library to be able to give them the ability,

to give a function that he'll be able to pass to us and

will then get called when the server returns the response.

So right now I'm located in script.js which is located in lecture 57 folder.

So let's go ahead and close the file Explore of Sublime Text and

let's take a look at our script.js.

You can just as a very tiny review, ajax-utils.js is where we're defining

our ajaxUtils object to which we have one thing attached, which is send request.

And again send request is expecting a requestUrl and

it's also expecting a responseHandler function.

So we'll be passing in a value of the function and a request url.

So let's go ahead and go to script.js and see what we're doing here.

The first thing we're doing is we're adding an EventListener for

dumb content loaded.

So which means this is only going to execute when the page is loaded all

the HML content, but hasn't yet loaded all the CSS or pictures and so on.

Well we don't really have any pictures so either way.

And then what we're doing is if we take a look at our HTML we

have this button right here, and that's the only button in the entire HTML.

What we're doing is, we're unobtrusively attaching an event binding to that button.

So we're doing document.query select and we're saying the button.

And that's the only button in the document, so

therefore that's the only one should get returned.

And we're adding an EventListener waiting a click EventListener.

So when the user clicks that button,

we want this function right here to get executed.

So let's see what we're doing here.

Well first of all we're setting var self = this, and we've seen this before.

So and I'm setting up a name, at this point just going to be and empty string.

And then I'm using our agency tools to call the server to get that name.

So I'm saying agency tools, remember we set it to with a dollar sign.

Let's take a look at it we bound the dollar sign

global.$ajaxUtils to our ajaxUtils object.

So, the ajaxUtils.sendGetRequest and we're providing it the URL.

So we're giving it the URL of /data/name.txt, and

it wants a handler function.

Remember the response handler function?

That takes a request object is going to have in it our response from the server.

It's a little bit weird in JavaScript that the response object

is still called the request.

But it is, so we're just going to continue doing it.

So the function is, again, we're defining it line.

We're not providing a function value.

But it's a inline function expression.

And we're saying that this name right here should be returned self.name,

that's the name right here.

And we want to request that response text.

So request .responsetext or the response text property.

Of the request object is what holds the response from the server.

So we want to save that response straight inside self.name.

Once we called the ajaxUtils and sent this request, now that the name is set,

we're doing a query selector on the content and remember the content in

the dot HTML is just this empty div place holder, so we're calling this content.

And we are using the idea of the content.

And we're saying that innerHTML should be h2Hello plus self.name,

that's that name right here, plus the exclamation point.

So it should say Hello and the Yaakov Chaikin at the end.

So let's go ahead and save that and let's go to our page and

open up our Chrome developer tools so we can see the console, just in case.

And let's go ahead and click this button and see what happens.

Not quite what we expected, right?

It says hello and there's nothing there.

Well let's verify that the server communication worked.

Let's go ahead and print out the self as the console

.log and let's print out self.name to see and

make sure that self.name actually contains the words Yaakov Chaikin.

Let's save that, let's go here and we'll say Hello again.

And as you can see, Yaakov Chaikin is returned.

So what's going on, why isn't this outputting Hello Yaakov Chaikin?

Can you tell what we did wrong?

Well, what we did was forget that this is an asynchronous call.

So what's really going on is, when we're executing this call right here,

send request, it goes in and executes this call.

And it immediately returns and goes and executes this second line right here.

Remember that visual from the previous lecture that I showed you?

When the Ajax call gets made to the server,

the very next JavaScript line gets immediately executed.

It is not going to wait for the server to respond before it executes this next line.

That's because this call is asynchronous.

So what do we do in this type of case?

Well, what we do is we actually have to put all the functionality.

That is, functionality that's based on the response from the server

inside of our response handler.

So we will have to take this whole line out of here cut it out and

we'll go ahead and erase our console and we'll put it right here.

And that's a whole line is going to have to be right here.

And in this case we don't really need self anymore do we?

We don't really need to have kind of a global or

outside of this lexical scope name.

We can erase all this.

And we would just do var in here and say var name = request.responseText.

And then when we're just doing a query selector,

we don't even need self here either.

I can see if it actually fits on the next line, and it does.

So we're just saying Hello, name, exclamation point.

And that's really all that our function or

respond handler function is supposed to do.

So all right, let's go ahead and save that.

And now, when we go to our browser and click Hello,

we actually get Hello Yaakov Chaikin.

And this string, Yaakov Chaikin is coming now from the server.

So made the full round circle from setting up the ajaxUtils to making a call to it.

And remembering that is an asynchronous call, so

if we're expecting something from it, we really can't do this after the call,

we need everything to handle that response inside our call back function which is

what this handler call back was about.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play