In this course, we'll look at the JavaScript language, and how it supports the Object-Oriented pattern, with a focus on the unique aspect of how JavaScript approaches OO. We'll explore a brief introduction to the jQuery library, which is widely used to do in-browser manipulation of the Document Object Model (DOM) and event handling. You'll also learn more about JavaScript Object Notation (JSON), which is commonly used as a syntax to exchange data between code running on the server (i.e. in PHP) and code running in the browser (JavaScript/jQuery). It is assumed that learners have already taken the Building Web Applications and Building Database Applications in PHP courses in this specialization.
JSON Chat
Loading...
From the course by University of Michigan
JavaScript, jQuery, and JSON
91 оценки
From the lesson
JSON - JavaScript Object Notation
In this section we look at JavaScript Object Notation (JSON). JSON is commonly used as a syntax to exchange data between code running on the server (i.e. in PHP) and code running in the browser (JavaScript/JQuery).
Meet the Instructors
Charles SeveranceAssociate Professor
School of Information
So now we're going to do is kind
of put this all together and do something useful with it.
So we're going to write a simple chat application.
Ok? And so what we're going to do,
well a chat application that can asynchronously poll to see the messages.
And I've used the example of like Facebook saying something happened,
and so that's the fun,
and I'll demonstrate this as well and so you
can see it working but I want to walk through the code.
And then, in a separate video,
I will demonstrate how it works.
So index dot php in this JSON chat,
we're going to use the session.
If there is a reset,
have a reset button out here,
throws the chats away that just sessions of chats.
Our data model is not a database,
we're just going to put an array of chat messages in our php session.
And like any post,
we're going to redirect back to ourselves.
And then we're going to have a message box blah blah blah and then send.
And if the message has been sent,
we're going to just initialize our chats.
Otherwise, we're going to add a new item,
that's the message and the date that it was sent and then redirect back.
And so this is sort of the model code for
our chat application that both resets our chats and we're using
session under the key of chats
which is nothing more than array of chats so it's very simple database.
Then we're going to include jQuery,
you know simple enough, and you should be
downloading this code so you can look at this code while I'm talking.
And then we can have some HTML, now we're in the view.
Right. So we have some html,
we've got a form.
That's going to give us our message, our message box,
our submit button that says chat and our submit button that says reset.
And we saw the processing of both chat and reset up there above,
and all we're going to do is take this and stick it into session.
Chats are going to be in session.
Then, we're going to have a div.
So I showed you in the earlier one
the div result where there was nothing between the div.
This is also a common thing because we're going to actually load the initial chat.
So we do is put as a spinner out and this one is displayed.
Yes, it's not hidden.
Underneath here, you'll see it animated GIFs that that that
that that that that that until we wipe it out.
So what we're going to do is we're going to wipe it out
once we get the first batch of chats,
and so that's that that that that that that.
So it's a common- One thing you do is you hide.
You start with a hidden spinner and then you start doing something
and then you show the spinner and when that thing is done, you hide the spinner.
In this case, we're going to start by start by showing the spinner and then get rid of
it as a way of what if everything goes
wrong later in the jQuery code that we're going to write.
What if everything goes wrong.
So this is a pattern of your static HTML comes out and you
put the spinner there and if everything goes well in a half a second or so,
you're going to wipe that out with a dot empty and we'll see how that works.
And then we go on a low jQuery and now,
we're going to go to the code that is now to some degree our application code.
We still have a little tiny bit of code in the server.
This code in the server that does our model.
Our model is still in the server, right.
We tend to keep the model in the server,
we're just moving so the model is going to stay in
the server especially when we start doing
databases but we're certain to move the controller.
Most of the controller into
the browser and certainly the view is all going to be in the browser.
The view is coming out statically,
just coming out as HTML.
And then the updates of the view,
the changing of the view,
that is going to be done in the browser.
And that's what we're going to do next.
OK. So we're going to make a function in this function here.
It's called update message.
It's not running, we're just defining this function.
We're going put a cancel message out,
we're going to call chatlist.php.
So that's going to be a bit of php code.
It's going to take the chats and return JSON.
So we're going to call JSON and then this is going to be an array of
chats and that's going to be deserialized into this variable called rowz with a Z.
And then if this works,
we're going to say JSON received and then we're on a console log it just so we
can debug it and then we're going to take that chat content and empty it.
And so if you recall chat content is
this div right here and empty just as wiping this part out.
And because we're going to do this over and over and over again every few seconds,
whatever eventually this will be the chats themselves and then we'll
empty it and grab a new copy of that chats Now right now we're going to wipe it all out.
A smart thing like Facebook would only get the new chats and append to the end.
That's a little too much work. We're going to keep our lives simple in
this one just so we can kind of get through the basic notion.
So we're going to empty it and then we're going to loop through.
And the thing that came back in rowz is an array.
It's really an array. It's been deserialized,
it's already been deserialized for us.
So it's an array of chat messages.
And the chat messages themselves are a two-item array where the first one
is the chat text and the second one is the chat date.
And so we're going to write a for loop.
This gonna loop through all the rowz that we got back.
And, you know, i equals zero, i rowz then length,
length as a method of arrays because that's an array at this point.
We grab the entry and that chat content append.
We've got this div up here.
It starts out empty because we emptied
it and then we're going to append the paragraph to it.
So we're going to just append P and the entry zero which
happens to be the message and then entries of one which is the date.
And so you see like hi there,
I throw a couple of blank spaces in and then it puts the date down there.
And however many that are,
it goes around and it just depends.
And as we're appending to the Dom,
the view that we have in the windows singing tot tot to to tot.
Right. So we don't know how this is going to be called yet but when it's called,
it starts a process to retrieve the messages,
wipes out the chat div then puts
the messages that came back from the server into the chat div.
Now, how are we going to cause this to run every few seconds.
Well, there is a javascript.
Now, this is not a jQuery so
this is just plain old javascript and so sometimes we use jQuery,
sometimes we use old javascript.
Set timeout says run this code.
Literally we put code in a string and then every four seconds, that's 4000 milliseconds.
So the way this works is we're going to call this set timeout once
but we're only going to call it so this code right here is the success code.
So that get request goes in, the php runs,
the JSON comes back and we are sort of waiting here in our success code.
This code right here is our success code.
And so, the JSON comes back and then success code runs.
And at the very end the success code,
we say okay and four seconds from now, do it again.
So this basically registers kind of
an a timer event that says in four seconds, do this again.
But we only do it at the end of the success code.
So it turns out if this blows up then at least we're not trying it
over and over for every 4000 milliseconds.
So that still doesn't get it started.
That just tells us,
once it started do it again in four seconds, 4000 milliseconds.
So that's the defining the function that is going to run
every four seconds and causing once it's
run because when it runs it resets the timer to reset the time.
You can't say every 4000 or every four seconds, you just have to say,
OK now, four seconds from now,
four seconds are now, four seconds from now.
OK. But then, we're going in the javascript,
we're going to say, OK, when the document is ready.
Again, that's the idiom.
As the jQuery idiom that says when the document's ready run these two pieces of code.
So this little cut line of code is Ajax set up cache false and
that basically means that the browser might cache this response.
So you would do a get and it wouldn't actually- oh shoot,
I didn't mean to hide that but that's okay I know what it said, yet.
That's the php, that comes the Jason. Then we run our code.
So let's draw- this is the Internet right.
That's the Internet here That's a cloud.
So caching is the notion that
the browser without you telling it might say, you know what?
I've already got a copy of this,
you asked for that four seconds ago.
I've already got a cache, locally cache copy, and it short circuits.
It doesn't actually do it and gives you back the old JSON for seconds ago.
That's not what you want.
You really and truly want to go to the server every time.
You want to go the server every time.
And so what you say is cache equals false.
So that suppresses this short circuiting that the browser might do on your behalf saying,
I'm saving us a little bit of network bandwidth by not actually
retrieving it because it's the same URL that you've asked for.
And it actually just adds a get parameter,
that's how the caching works like
time equals and then the current time and then there's always changes.
So then the caching, it goes past it because
you don't have the document that's with this get parameter.
So if you watch it you see a get parameter get added and that's the caching.
That's just something you set once and then update message.
And so what update message does is it runs this code which grabs it,
grabs it and then runs the success code and then runs the timer again.
So the first time we just call it when the document has finished loading,
it runs, it fills the chats in and then it
sets itself up to run again four seconds later.
So four seconds.
It goes and does it again.
Update thing, set it four seconds.
Wait wait wait wait wait.
Update. And so that is kind of our way of writing a loop.
Now, this again goes back to asynchronous code.
The fact that we can't just sit in a loop and say,
go wait for seconds,
go wait four seconds.
We say, do something,
set a timer to cause me to be called back again in four seconds.
So you have to always think async.
And, again, this is the reason why I don't like teaching javascript as the first language
because asynchronous programming is something that takes
a while for you to kind of get and understand.
It's super powerful and it's
necessary so that the browser can be doing lots of things at the same time.
You can't have the browser stop and wait because then it can't do the other things.
Cause you might have one thing that's
running on a four second clock that's updating the chat message.
You might have another thing that's running some other thing which is
a little red thing that pops up with needs software updates or something.
So all these things are running simultaneously.
And so there's asynchronous code pattern of you know start something and then record code
that runs when it's all said and done and if you start looking at things
like no dot js which is javascript in the server,
you just realize that this is kind of the javascript thing because it was necessary.
It's called cooperative multitasking where you're giving
up the control and saying call me back later.
It's a powerful powerful pattern but it takes a little bit of getting used to.
So if we just take a look at what's inside the server, it's pretty straightforward.
So this is the code that's listening to the thing coming in the server, chatlist.php.
We start the session so we can read it.
We sleep five so that little spinny thing waits for a while.
We tell it that we're going to send JSON back.
And we just simply JSON and code sessions of chats which gives us
JSON bit that looks like that because it's an array of arrays.
Two element arrays with a date and a time, two strings.
And that's what comes back and that's what we parse and that's what
produces the output for our chat application.
So the next thing is how to build a credit application.
And I'm not even going to bother going through that in slides.
We'll just wait until I'm going to actually demonstrate
that code for you by showing you how the code works.
So I take you back to the very beginning of this.
JSON code, in a very few lines of code
we can have amazing cooperation between the browser and the server.
With a few lines of code, we're doing stuff,
you know pulling all the stuff across,
rendering it into the browser,
creating all this wonderful interactivity, setting timeouts.
It's really beautifully simple and it kind of- the hard parts of
the serialization deserialization and the JSON kind of get out your way after a while.
And what you find is you're writing more and more code in
the browser and less and less code in the server.
And in the programming assignments
as we go forward you'll see that where we're just moving
different ways of thinking about how to
best use code in the browser and then the server code kind of drops down to this,
really focusing on the model and some of the business rules.
OK. So I hope you find this helpful and I look forward to
showing you some of the demonstrations of this actual code when it's working.
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
