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.
Code Walkthrough: JSON Chat
Loading...
來自 University of Michigan 的課程
JavaScript, jQuery, and JSON
110 個評分
從本節課中
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).
與講師見面
Charles SeveranceAssociate Professor
School of Information
So let's talk about an application that is going to make use of some of this.
So this is one that I really like.
It's basically a chat with asynchronous updating of the chat data.
Okay. Let's just play with it first.
So here is this application running and basically the idea is I can say
hi and it says hi back to me and I
can actually open this in a second window as a different person.
So I've got two windows now and both windows
are going to see so I can come over to this window and say
window two and I hit chat and I come over
here to window one and it sees that from window two right.
So this guy, they are asynchronously updating and getting each other's chats,
and the way to see this is the developer console.
And what's happening is it's using JSON to get all of the,
if I go to network here,
it's calling chatlist.php and it's getting a list of the current chats.
And so when I change the current chats,
another in window two,
a moment later it goes and grabs it.
So with another chatlist.php and so there's
a third chat and so it's using JSON and jQuery and
a timer loop to sort of keep
all these windows simultaneously up and going at the same time.
Okay, so it's this asynchronous chat.
And I can reset all the chats and then this guy will reset as well.
I don't have to hit the reset both sides because a couple of seconds later.
So that's what's going on with this chat.
So let's examine some of what's going to happen here.
So, the first thing we've got is the standard posting request response cycle stuff.
And if it's a reset,
we're going to store that chats as
just an array in the session because we won't use the database quite yet.
And so if we get the reset button set
which we can just say isset post reset because we named
the reset button reset in the HTML
and then we change the session and then we redirect back to ourselves.
If there's a message,
it actually creates either an empty array if it needs to but then it puts in the date
and the actual message that came in and redirects so that
this post will take this array of chats.
And so if we see that in the code,
you know we see this array of
chats that comes back.
There are no chats in this array, it is an empty array because I just reset it.
Okay, so that is the top part of this file.
Then down here in the middle we load jQuery and then we go down and we see the chat code.
And here we got a basic form and post back to ourselves.
We have a text field.
We have a submit.
I've got a little link to chatlist.php in here as well.
And then we got a reset button and then we have
a div and it's called chatcontent with an ID chatcontent.
We stick this ID in because we can grab that with jQuery, right?
And we put a spinner in there.
So that shows loading
with an alt text of loading so the spinner is there while it is loading.
Then continuing down, we have
a function called update messages.
And what this basically does is it will start on a timer every four seconds.
We'll talk about how the timer works.
It does a log, it does an ajax call to get this URL called chatlist.php.
Cache equals false keeps your browser
from only retrieving it once and believing that it already has the data.
It does this by adding a get parameter of the time,
so it forces the browser to get a new one every time.
And if we have a success,
then we get the JSON data back and we log it.
We log the actual data.
We empty out the chatcontent and you will see that this is on a list.
It's a list of an array of arrays with the message, date on it.
And so we write a for loop.
This is a JavaScript for loop, right.
And so for var equals i less than data.length i++.
That's going to loop through
all the chat messages and then it pulls out the chat message and
the sub-0 entry is the actual message and the sub 1 entry is the date of the message.
And then once that's all done,
so once we have cleared out the chat content and read the data from
the returned JSON and stuck it into the chatcontent of div,
we empty it out and then we append each of these things as a separate paragraph.
And then we do a set time out.
This is a JavaScript call,
not a jQuery call.
That says wait four seconds and then call ourselves again.
So update message sort of grabs the data,
empties out the chat div and then puts
all the chats in the chat div and then says call me again in four seconds.
And then it defines the function.
And so startup complete and then it calls update message once at
the beginning of the program to get the whole thing started.
So it retrieves the messages right away.
Now, one of the things I should probably do
here is I should probably just put this sleep in all the time.
In chatlist.php all it does is it sends back JSON to
our application and sleep (5) makes the thing moves
slowly enough so we can see what's happening and I
should probably leave the sleep (5) in all the time.
And so we put a content type header and this is good hygiene.
Everything we've done so far,
it's been application text content type.
But by telling it is real JSON that's good.
So this is a good thing to put in before any data has been sent.
It's another header just like location header except this is
a Content-Type header saying what I'm about to send you is not just HTML,
it's not text, it's not a jpeg image,
it is actual JSON and it's going to be an UTF character set.
So I just checked to see if I had any chats yet.
If I don't I create an empty array.
But then I simply echo using JSON code,
the variable that's in session chats which is an array of
two item arrays where the message and the date.
And so it just takes this whole thing JSON and code,
turns that into a string and echos it up.
So we will see chatlist.php.
So let me show you again how that works.
Let me go in first.
So in chatlist.php, I'm going to uncomment
this five second sleep just because it makes it easier to see what's going on.
So I'm going to clear the console log and then sort of start fresh.
I am going to hit index.php and what we see
is we see the spinner because we haven't yet overwritten what's in the chat content div.
There is a chat content. Go back and take a look.
There is a chat content div.
Now, we asked for chatlist but chatlist is taking a long time,
but finally chatlist came back and so we got
no chat messages but we did overwrite the spinner so the spinner has gone now.
So now I'm going to go over into the other window and I'm going to type
yo and then I'm going to come
back and we're waiting and at some point our 4-second timer is going to expire,
but remember it sleeps five seconds so it's going to be around nine seconds,
so at some point down here, there we go.
So at some point we did this JSON request.
It's going to happen every four seconds now.
We do this JSON request and we emptied out that chat content
div and then we got back an array of arrays.
So this is the first element of this is the message.
The second element is the date of the message.
So we loop through this little list.
We wiped this out.
And then we loop through the list and put it in.
So I am going to go over in the other screen and I put a second message
in. So I am going to hit chat.
Now I will come over here in a moment it's going to do
another four second timeout and then five second delay.
And then it will get another one.
So here we go, we just got another one.
Oh, it's waiting.
It's not done yet. It's starting.
Now we got a response. That was the five seconds.
So now you see, we have two messages.
The whole JavaScript for loop clears this whole div out and then loops through
and prints out the message and the date of the first one and the message
and the date of the second one and it puts that thing out.
And so that's how we achieve this.
It's basically if we take a look at the code,
we are having every four seconds call this function and then we get some JSON.
We ask for the URL chatlist.php and when this is done,
it calls our success function after it's passed the data.
So it's really in JavaScript as an array at this point.
So we write a little for loop and make a little paragraph for each of the entries and
the zero entry is the message and the one entry is the date.
So again this is all pretty simple stuff but you can
kind of see how you can compose these things to have jQuery,
cause JavaScript to happen with a timer,
to use JSON and then change the dom.
So we're sort of flipping between JavaScript and jQuery and eventually we're
changing the document object model without a full request response cycle.
