1
00:00:00,730 --> 00:00:04,280
Now that you have an understanding of what
Ajax is and why we,

2
00:00:04,280 --> 00:00:09,240
as web developers, find it exciting and
useful, let's dig into some details.

3
00:00:09,240 --> 00:00:12,290
I'll show you a simple example using plain
JavaScript to

4
00:00:12,290 --> 00:00:16,360
load a chunk of HTML into a page using
Ajax.

5
00:00:16,360 --> 00:00:18,240
If you'd like to follow along, I've set up

6
00:00:18,240 --> 00:00:20,329
a workspace that has all the files you'll
need.

7
00:00:21,580 --> 00:00:23,440
You can open the workspace by clicking the

8
00:00:23,440 --> 00:00:26,600
launch workspace button to the right of
this video.

9
00:00:26,600 --> 00:00:29,070
If you're watching this video on our iPad
app, you'll

10
00:00:29,070 --> 00:00:32,520
have to use a laptop or desktop computer
to access workspaces.

11
00:00:33,620 --> 00:00:36,990
I've also included the project files if
you want to work locally.

12
00:00:36,990 --> 00:00:40,860
However, AJAX requests only work through a
web server.

13
00:00:40,860 --> 00:00:43,050
In other words, you can't just preview a
local

14
00:00:43,050 --> 00:00:46,850
file on your computer and expect your Ajax
to work.

15
00:00:46,850 --> 00:00:48,890
You'll need to either set up a local web

16
00:00:48,890 --> 00:00:51,650
server running on your computer and view
your pages

17
00:00:51,650 --> 00:00:54,730
through it, or upload your project files
to a

18
00:00:54,730 --> 00:00:57,800
web server and view those files through
the web.

19
00:00:57,800 --> 00:01:01,930
Honestly, Workspace is, is the easier way
to go if you want to follow along.

20
00:01:01,930 --> 00:01:03,480
So let's program.

21
00:01:03,480 --> 00:01:08,110
As I mentioned in the last video, AJAX
programming is a four-step process.

22
00:01:08,110 --> 00:01:12,800
Step one, create an XMLHTTP Request
object.

23
00:01:12,800 --> 00:01:16,460
This step tells the web browser to get
ready for AJAX.

24
00:01:16,460 --> 00:01:22,110
You create an XMLHTTP Request object, or
XHR object for short.

25
00:01:22,110 --> 00:01:23,940
With one simple line of JavaScript.

26
00:01:25,060 --> 00:01:28,160
I'm going to open the index.html file from
my workspace.

27
00:01:29,450 --> 00:01:32,760
As you can see there's already script tags
for adding JavaScript.

28
00:01:32,760 --> 00:01:36,670
So I'll click in between them and type a
line of code.

29
00:01:37,940 --> 00:01:41,180
What I'm doing here is creating a variable
named xhr.

30
00:01:42,550 --> 00:01:46,590
Which contains a new XMLHttpRequest
object.

31
00:01:46,590 --> 00:01:50,640
The variable name doesn't have to be xhr,
it's just a variable.

32
00:01:50,640 --> 00:01:55,720
So you could name it ajax or request or
even bob for that matter.

33
00:01:55,720 --> 00:01:57,880
But I'm gonna leave it as xhr.

34
00:01:59,000 --> 00:02:02,320
The new XMLHttpRequest part

35
00:02:02,320 --> 00:02:04,410
tells the web browser to get ready to work
with

36
00:02:04,410 --> 00:02:08,300
ajax, and is required any time you'd like
to use ajax.

37
00:02:08,300 --> 00:02:13,020
In fact, for each ajax request, you should
create a new XHR object.

38
00:02:13,020 --> 00:02:16,190
For example, if you wanted to use ajax
twice on a page, to

39
00:02:16,190 --> 00:02:21,230
request data for a sidebar, and another to
process a form submission for example.

40
00:02:21,230 --> 00:02:25,920
You will need two variables, each with
their own XHR object.

41
00:02:25,920 --> 00:02:28,480
Step two, create a callback function.

42
00:02:28,480 --> 00:02:31,600
This is the most complicated part of the
AJAX process.

43
00:02:31,600 --> 00:02:34,900
That's because the callback function is
the programming you want

44
00:02:34,900 --> 00:02:38,760
the browser to run when the server sends
back its response.

45
00:02:38,760 --> 00:02:42,670
For example, in the case of Twitter's
endless list of tweets the

46
00:02:42,670 --> 00:02:47,500
callback function adds the newly retrieved
tweets to the end of the webpage.

47
00:02:47,500 --> 00:02:51,130
The callback function is the heart of your
Ajax program, all the

48
00:02:51,130 --> 00:02:54,880
fun stuff you can think to do with the web
server's response.

49
00:02:54,880 --> 00:02:57,140
Think of a callback like a note you leave

50
00:02:57,140 --> 00:03:00,000
the web browser, give me a 
call when you're ready.

51
00:03:00,000 --> 00:03:04,850
When the web browser sends off its ajax
request it continues doing other things.

52
00:03:04,850 --> 00:03:07,720
This is the asynchronous part of ajax.

53
00:03:07,720 --> 00:03:10,180
When a browser sends in a synchronous
request,

54
00:03:10,180 --> 00:03:12,660
it doesn't just wait until it gets a
response.

55
00:03:12,660 --> 00:03:15,400
If it did then the browser would freeze
and the user wouldn't

56
00:03:15,400 --> 00:03:19,050
be able to do anything until the response
returned from the server.

57
00:03:19,050 --> 00:03:21,660
Which could take seconds, or if the server
is down or

58
00:03:21,660 --> 00:03:25,820
there's a problem with the internet, the
server might never respond.

59
00:03:25,820 --> 00:03:30,450
Instead, after the browser sends the
request, it continues doing other things.

60
00:03:30,450 --> 00:03:33,260
Handling other JavaScript programming,
responding to

61
00:03:33,260 --> 00:03:35,920
actions by the user, and so on.

62
00:03:35,920 --> 00:03:39,540
But, when the browser finally gets a
response from the webserver,

63
00:03:39,540 --> 00:03:43,180
it looks for that note, your callback, and
gives it a call,

64
00:03:43,180 --> 00:03:46,770
executing all of the programming you set
up inside that callback.

65
00:03:47,850 --> 00:03:52,110
There's another strange thing about the
asynchronous nature of AJAX.

66
00:03:52,110 --> 00:03:54,450
If you make multiple AJAX requests, you'll

67
00:03:54,450 --> 00:03:57,120
never know which request will be handled
first.

68
00:03:57,120 --> 00:03:59,820
You might send off four AJAX requests and
for whatever

69
00:03:59,820 --> 00:04:03,970
reason the web server can handle that
fourth request quickly.

70
00:04:03,970 --> 00:04:07,350
The callback for that fourth request will
run first.

71
00:04:07,350 --> 00:04:12,390
In other words, you can never tell in
which order your AJAX callbacks will run.

72
00:04:13,680 --> 00:04:17,390
To trigger the callback, we use a special
browser event.

73
00:04:17,390 --> 00:04:21,220
If you've programmed JavaScript before,
you should know all about events.

74
00:04:21,220 --> 00:04:24,740
An event is something that happens in the
web browser, an action

75
00:04:24,740 --> 00:04:28,840
a user takes like clicking the mouse
button or submitting a form.

76
00:04:28,840 --> 00:04:31,660
For example, when a user submits a form,
you

77
00:04:31,660 --> 00:04:34,360
can check to see if they filled it out
correctly.

78
00:04:34,360 --> 00:04:37,020
The event here is submitting the form.

79
00:04:37,020 --> 00:04:41,520
Checking the form data is the program that
runs in reaction to the event.

80
00:04:41,520 --> 00:04:42,530
The event's callback.

81
00:04:43,650 --> 00:04:45,690
There are events for mouse clicks, key

82
00:04:45,690 --> 00:04:48,416
presses, scrolling, and even closing a
window.

83
00:04:48,416 --> 00:04:51,420
AJAX comes with its own set of events.

84
00:04:51,420 --> 00:04:54,260
We can add programming to respond to those
events.

85
00:04:54,260 --> 00:04:58,230
The most important is the
onreadystatechange event.

86
00:04:58,230 --> 00:05:02,370
This event is triggered whenever there's a
change in an AJAX request.

87
00:05:02,370 --> 00:05:05,950
Like opening a new request, sending it, or
receiving a response.

88
00:05:05,950 --> 00:05:09,010
We create our callback to respond to that
request.

89
00:05:15,080 --> 00:05:17,890
This programming sets up a function that
runs each time

90
00:05:17,890 --> 00:05:21,130
there is a change in the state of the Ajax
request.

91
00:05:21,130 --> 00:05:23,830
Each step in the Ajax process, like
opening a new

92
00:05:23,830 --> 00:05:27,938
request or sending out that request
triggers a change of state.

93
00:05:27,938 --> 00:05:32,270
For this callback function we're only
interested in the final change of state.

94
00:05:32,270 --> 00:05:34,980
That's when the server sends back its
response.

95
00:05:34,980 --> 00:05:37,880
We want to get that response and then
update our webpage.

96
00:05:37,880 --> 00:05:41,300
The XML http request object keeps track of

97
00:05:41,300 --> 00:05:45,470
the state using a special property named
readyState.

98
00:05:45,470 --> 00:05:48,540
That property contains a number including
the current state

99
00:05:48,540 --> 00:05:51,370
of the request and that property holds the
number four.

100
00:05:51,370 --> 00:05:55,020
Then the request is done and the server
has sent back a response.

101
00:05:55,020 --> 00:05:57,472
Let's add a conditional statement to test
for that state

102
00:05:57,472 --> 00:06:02,684
[BLANK_AUDIO]

103
00:06:02,684 --> 00:06:04,728
[BLANK_AUDIO]

104
00:06:04,728 --> 00:06:07,710
So here, we're checking if the ready state
is equal to 4.

105
00:06:07,710 --> 00:06:09,910
That means we've got the response back.

106
00:06:09,910 --> 00:06:13,710
We'll take the full AJAX response and
place it into the web page.

107
00:06:13,710 --> 00:06:16,040
The data we get back is going to be a
chunk of HTML.

108
00:06:16,040 --> 00:06:20,330
And we'll place it inside a div tag that
has the ID of ajax.

109
00:06:21,610 --> 00:06:25,690
You can see that div down here and there
is the id, ajax.

110
00:06:25,690 --> 00:06:28,310
First thing you need to do is select that
div.

111
00:06:31,810 --> 00:06:33,990
We can do that using standard document

112
00:06:33,990 --> 00:06:36,630
manipulation methods that are built into
web browsers.

113
00:06:36,630 --> 00:06:38,670
In this case we are selecting

114
00:06:38,670 --> 00:06:41,460
an element that has the ID of ajax.

115
00:06:41,460 --> 00:06:47,380
The next thing we do is set its innerHTML
property.

116
00:06:47,380 --> 00:06:52,100
innerHTML is a property that contains all
the HTML inside an element.

117
00:06:52,100 --> 00:06:56,138
By changing its value, we can change the
HTML that appears inside it.

118
00:06:56,138 --> 00:07:00,230
[BLANK_AUDIO]

119
00:07:00,230 --> 00:07:06,380
Every XMLHttpRequest object has 
a property called responseText.

120
00:07:06,380 --> 00:07:10,030
This is the information that the web
server sends back.

121
00:07:10,030 --> 00:07:13,720
Here we're taking the responseText, and
we're storing it inside of the div.

122
00:07:13,720 --> 00:07:16,670
In this case, we have a simple callback.

123
00:07:16,670 --> 00:07:21,210
Remember the programming doesn't run until
the response comes back from the server.

124
00:07:21,210 --> 00:07:24,580
In fact, we have two more steps to
complete the AJAX request.

125
00:07:25,740 --> 00:07:27,820
Step three, open a request.

126
00:07:27,820 --> 00:07:31,829
An XHR object has a method or function
called open.

127
00:07:31,829 --> 00:07:35,510
[BLANK_AUDIO]

128
00:07:35,510 --> 00:07:39,180
This function prepares the browser for
sending the request.

129
00:07:39,180 --> 00:07:42,120
You give the function two pieces of
information.

130
00:07:42,120 --> 00:07:46,250
The first is the HTTP method that you're
going to use.

131
00:07:46,250 --> 00:07:49,630
The most common methods are GET and POST.

132
00:07:49,630 --> 00:07:52,150
But there are others, such as PUT and
DELETE.

133
00:07:52,150 --> 00:07:54,210
You'll use GET if you want to send a request for data

134
00:07:54,210 --> 00:07:57,750
a request for data and POST if you're
sending the data.

135
00:07:57,750 --> 00:08:01,780
Like information from a form, for the
server to save in the database.

136
00:08:01,780 --> 00:08:05,080
I'll talk more about these two methods in
the next video.

137
00:08:05,080 --> 00:08:08,260
The URL is where the request is going.

138
00:08:08,260 --> 00:08:12,470
This could point to a file or a
server-side program on your web server.

139
00:08:12,470 --> 00:08:16,250
On our example, I'm just pointing to a
file in the workspace.

140
00:08:16,250 --> 00:08:18,560
We'll load that file into the page.

141
00:08:18,560 --> 00:08:20,890
Now the open function just gets the
browser ready

142
00:08:20,890 --> 00:08:24,020
to make a request, but it doesn't send
that request.

143
00:08:24,020 --> 00:08:25,720
That's the last step of the process.

144
00:08:27,350 --> 00:08:29,880
Step 4, sending the request.

145
00:08:29,880 --> 00:08:33,880
The previous three steps gave the web
browser all the information it needs.

146
00:08:33,880 --> 00:08:37,120
So we can finally send off the request to
the web server.

147
00:08:37,120 --> 00:08:39,784
Sending off the request takes just a
simple bit of code.

148
00:08:39,784 --> 00:08:43,855
[BLANK_AUDIO]

149
00:08:43,855 --> 00:08:46,315
In our case since we're requesting a chunk
of

150
00:08:46,315 --> 00:08:48,841
html we don't provide the send method with
any

151
00:08:48,841 --> 00:08:51,949
information, but when you need to submit
information to

152
00:08:51,949 --> 00:08:55,170
the server like the user's input from a web form,

153
00:08:55,170 --> 00:08:57,770
you can pass the send method that data.

154
00:08:57,770 --> 00:08:59,480
Alright, let's see this in action.

155
00:08:59,480 --> 00:09:01,845
I'm gonna save the page, and preview it.

156
00:09:01,845 --> 00:09:05,690
Ta-dah, ajax.

157
00:09:05,690 --> 00:09:06,040
Okay.

158
00:09:06,040 --> 00:09:07,770
Well this doesn't look like much.

159
00:09:07,770 --> 00:09:09,790
But let's take a peek under the hood,

160
00:09:09,790 --> 00:09:13,240
i'll open the JavaScript console, and
reload the page.

161
00:09:13,240 --> 00:09:15,370
In Chrome I can go, to the tools.

162
00:09:16,720 --> 00:09:20,160
Open up the JavaScript console, make sure
I've got

163
00:09:20,160 --> 00:09:25,720
a Log XMLHttpRequests option selected
and reload the page.

164
00:09:27,840 --> 00:09:31,690
There you can see the ajax request that
was made.

165
00:09:31,690 --> 00:09:32,840
So, we've done it!

166
00:09:32,840 --> 00:09:34,490
But, it's not that interactive.

167
00:09:34,490 --> 00:09:37,620
Let's make this a bit more interactive by
adding a button, that

168
00:09:37,620 --> 00:09:41,230
when you click, sends the request and
loads the data to the page.

169
00:09:50,610 --> 00:09:52,980
I'll place a button down here below the H1
tag.

170
00:09:55,840 --> 00:09:57,760
I've added an ID to this button.

171
00:09:57,760 --> 00:10:00,510
I've also added an onclick to it.

172
00:10:00,510 --> 00:10:04,610
When the button is clicked, there's a
function, called sendAJAX, that runs.

173
00:10:04,610 --> 00:10:05,883
I'll create that function now.

174
00:10:05,883 --> 00:10:15,883
[BLANK_AUDIO]

175
00:10:18,054 --> 00:10:21,580
Now I wanna make sure that that function
triggers the send method.

176
00:10:21,580 --> 00:10:23,970
So I'll put the send method inside of the
function.

177
00:10:23,970 --> 00:10:26,470
The last step is we'll make the button
disappear.

178
00:10:27,820 --> 00:10:31,400
After it's clicked and the Ajax loads, the
button goes away.

179
00:10:36,560 --> 00:10:37,070
All right.

180
00:10:37,070 --> 00:10:37,920
Let's check this out.

181
00:10:37,920 --> 00:10:45,780
I save the file, reload the preview,
there's the button, and there's our Ajax.