1
00:00:00,210 --> 00:00:06,000
This lesson is going to provide a quick overview of the difference between making an extra request and

2
00:00:06,000 --> 00:00:12,420
fetch, and at the point that we're going to be connecting to is a random user taught me first class

3
00:00:12,420 --> 00:00:17,040
API and then questionmark results equaling how many results you want to turn back.

4
00:00:17,340 --> 00:00:19,040
So we're just going to go with 10 results.

5
00:00:19,320 --> 00:00:19,950
So let's go ahead.

6
00:00:19,950 --> 00:00:21,030
Open up the ED.

7
00:00:21,630 --> 00:00:29,910
And I've just got a file called Test, create a new file called Ajax Start HTML.

8
00:00:30,480 --> 00:00:38,460
And then this can just be a blank HTML page that will connect to the JavaScript file where we're going

9
00:00:38,460 --> 00:00:46,980
to be making our Ajax request so within head and then just give it a title and I'll just call that Ajax

10
00:00:48,090 --> 00:00:51,870
and we're not going to do any staling, which is kind of a simple file here.

11
00:00:52,110 --> 00:00:58,380
Add in a couple buttons, give the first one a class of BTN one.

12
00:00:59,520 --> 00:01:11,760
And so this will be the X H.R. request and the second button, give it a label of fetch request and

13
00:01:11,760 --> 00:01:13,700
a class of button two.

14
00:01:14,250 --> 00:01:21,630
So this will just be using JavaScript Futch and then lastly, set the script file, connect to a source

15
00:01:21,900 --> 00:01:25,380
and the source is going to also be stutt, James.

16
00:01:25,830 --> 00:01:27,990
So it's going to be the file that we're going to be connecting to.

17
00:01:28,320 --> 00:01:31,380
So let's go ahead and we'll create that Ajax touch as well.

18
00:01:33,000 --> 00:01:40,770
So Ajax Dutch's same directory so that we're just simply linking to that file from the main Ajax HTML

19
00:01:40,770 --> 00:01:44,940
file so that we can look at connecting it with JavaScript.

20
00:01:45,210 --> 00:01:48,710
And this is the one that we're going to actually run within the live server.

21
00:01:48,960 --> 00:01:53,790
So go ahead and select open live server and you should see the page being output.

22
00:01:53,970 --> 00:02:00,720
Also open up the dev tools so we can see the console content and we've got the two buttons and the console

23
00:02:00,720 --> 00:02:04,710
content and make this minimize it fairly small.

24
00:02:04,950 --> 00:02:10,860
Also have the code here on the left hand side so you can easily see what's going on within the browser

25
00:02:11,790 --> 00:02:13,710
and going into Ajax.

26
00:02:14,070 --> 00:02:20,180
So first of all, let's make connections to the first to the first buttons so that we can access them.

27
00:02:20,790 --> 00:02:29,220
So using the query selector, we're going to select the element with a class of BTN one and then we'll

28
00:02:29,220 --> 00:02:32,010
also do the same for button two.

29
00:02:32,850 --> 00:02:38,940
So button two and then adding that listeners to these elements.

30
00:02:39,510 --> 00:02:45,780
So out of that listener that we're listening for is going to be the click event surpassing in the event

31
00:02:45,780 --> 00:02:46,350
object.

32
00:02:46,980 --> 00:02:50,760
And we can have a function that's going to run here.

33
00:02:51,330 --> 00:02:57,870
So this one will be just doing the request and that's going to be a feature.

34
00:02:58,590 --> 00:03:07,710
So we'll run a function for that and create the function, request access to the campus in the event

35
00:03:07,710 --> 00:03:08,220
object.

36
00:03:08,760 --> 00:03:13,950
So whenever that button gets clicked, we're going to run that function and whenever the second button

37
00:03:13,950 --> 00:03:20,790
gets clicked, then we're going to request and this is going to request fetch and we'll create a second

38
00:03:20,790 --> 00:03:27,840
function that can handle the Thach request when it gets invoked and we're connecting to the same URL.

39
00:03:28,440 --> 00:03:31,020
So let's set up the URL for that.

40
00:03:31,260 --> 00:03:34,740
And that's going to be the content coming from the random user endpoint.

41
00:03:36,180 --> 00:03:39,240
So it's going to be our base URL that we're going to be connecting to.

42
00:03:39,720 --> 00:03:42,810
So first, let's do this with the CHAR request.

43
00:03:43,290 --> 00:03:54,290
So let's create a new char object and by using new and that's XML, HDP request object that we're creating.

44
00:03:54,780 --> 00:04:02,910
So it's going to be referenced with variable name of X and then for X feature we're going to listen

45
00:04:02,910 --> 00:04:09,990
for the ready state and whatever the state changes, then we're going to invoke the anonymous function.

46
00:04:11,400 --> 00:04:14,890
And what this function will do is this will check the ready state.

47
00:04:15,660 --> 00:04:23,040
So right now we're just log out the current ready state so we can take the X HRR object and get the

48
00:04:23,040 --> 00:04:27,940
ready state value and we're going to be looking for the ready state value of four.

49
00:04:28,320 --> 00:04:32,400
So right now, what's going to happen is it's going to change through all the different ready states.

50
00:04:32,580 --> 00:04:38,850
And then once we meet and hit ready state for that, we know that we've got and a successful connection

51
00:04:39,000 --> 00:04:41,750
and that we're able to retrieve back the information.

52
00:04:42,150 --> 00:04:49,020
So let's also open the object and we're using the get method.

53
00:04:49,500 --> 00:04:54,030
And the world is going to be the base URL that we've got for the random user.

54
00:04:54,270 --> 00:04:58,650
So using that in order to retrieve back that object information.

55
00:04:59,570 --> 00:05:06,740
And then lastly, in order to initiate it, we do have to send and use the send function in order to

56
00:05:06,740 --> 00:05:07,320
initiate it.

57
00:05:07,640 --> 00:05:12,740
So refresh the page, click the XIKAR and we've got all of the ready states.

58
00:05:13,070 --> 00:05:17,780
So at this point, when we're hitting ready state for, then that's where we know that we've actually

59
00:05:17,780 --> 00:05:23,360
got access to the data so that it's been complete and we've hit all of the ready states.

60
00:05:23,750 --> 00:05:26,690
So we're checking to see if it's ready state for.

61
00:05:27,020 --> 00:05:33,590
And we can also just to ensure that we do have a status value of two hundred.

62
00:05:33,740 --> 00:05:37,150
That means that we also have a successful connection to the server.

63
00:05:38,090 --> 00:05:43,160
So once we meets these criteria, then we're ready to interact with the data and the data is coming

64
00:05:43,160 --> 00:05:44,980
back as response text.

65
00:05:45,350 --> 00:05:54,110
So for now, what we can do is we'll take the char object and get the response text and we'll put that

66
00:05:54,110 --> 00:05:54,900
into the console.

67
00:05:55,130 --> 00:05:58,000
So this is going to be returned back within a string format.

68
00:05:58,520 --> 00:06:01,820
So we've got this whole long string format that's coming here.

69
00:06:02,180 --> 00:06:05,870
And what we want to do is we want to pass it into a usable object.

70
00:06:06,200 --> 00:06:12,020
So let's take one more step and take it and set it as a variable called data.

71
00:06:13,550 --> 00:06:26,930
And using the JSON method, we're going to pass the response text as data and then we can use that as

72
00:06:26,930 --> 00:06:28,850
needed within our application.

73
00:06:30,060 --> 00:06:35,350
And the results array is the results are actually contained within an array format.

74
00:06:35,810 --> 00:06:38,390
So that's going to be contained within data results.

75
00:06:39,000 --> 00:06:40,290
So let's try that one more time.

76
00:06:40,520 --> 00:06:47,960
So now we've got an array and if we want to loop through the array, so the data results we can use

77
00:06:47,960 --> 00:06:55,070
for each because this is going to be an array pulled that element and we can console logout each one

78
00:06:55,070 --> 00:06:58,510
of the elements that are within the results array.

79
00:06:59,540 --> 00:07:02,030
So that returns back to them all as objects.

80
00:07:02,160 --> 00:07:05,480
And then we can also use that and output it to the page.

81
00:07:05,810 --> 00:07:13,760
So let's create one more area here or just create a diff, give it a class of output.

82
00:07:15,050 --> 00:07:23,990
And then within the JavaScript, we're going to select the element using the query selector, select

83
00:07:23,990 --> 00:07:29,480
the element with a class of output and this is where we can populate the information.

84
00:07:29,630 --> 00:07:32,510
Take one more look at what we've got for the output here.

85
00:07:32,780 --> 00:07:40,010
And as we launch this, we can can add to the output element.

86
00:07:40,220 --> 00:07:45,380
So taking that output and inner HTML.

87
00:07:46,190 --> 00:07:49,220
So we're just going to add to the contents of that object.

88
00:07:50,780 --> 00:07:57,410
And using a template, literals sets those back ticks that are to the left of the one key on the keyboard

89
00:07:57,680 --> 00:08:00,350
and that allows us to bring in the content.

90
00:08:00,770 --> 00:08:05,980
So want to bring in the element and let's double check what the path is going to be.

91
00:08:06,260 --> 00:08:12,050
So we're and results, we want to take the user information.

92
00:08:12,260 --> 00:08:17,240
So it's going to be contained within name object.

93
00:08:18,170 --> 00:08:21,080
And we've got the first and last.

94
00:08:21,080 --> 00:08:27,290
So, so looking at element and then name and then first.

95
00:08:27,890 --> 00:08:30,530
And what I'm going to do is I'm going to shorten this.

96
00:08:31,760 --> 00:08:34,880
So we're going to just take the person.

97
00:08:35,270 --> 00:08:40,200
So just call it piece and that will be the element name.

98
00:08:40,220 --> 00:08:44,570
So using that same object path, we're selecting it.

99
00:08:44,570 --> 00:08:50,020
So that just shortens our path to get to the name so we can do first.

100
00:08:50,030 --> 00:08:52,400
I would not have to type in element name.

101
00:08:52,430 --> 00:09:02,660
We can just simply type in that value and then also let's do one for last and we could also do one for

102
00:09:02,660 --> 00:09:10,120
the title as well and then add to the end and we can get rid of the console message.

103
00:09:10,220 --> 00:09:11,420
So let's see what that looks like.

104
00:09:12,380 --> 00:09:17,090
So now whenever we click the button, we're appending to the list.

105
00:09:17,090 --> 00:09:22,250
So we're continuously adding to the list the new items that have come in through that list.

106
00:09:23,270 --> 00:09:27,950
So once again, this is coming from the Web application, from this Web you URL.

107
00:09:29,000 --> 00:09:37,790
So we can also use Thach in order to request data from the endpoint and fetches newer format for JavaScript,

108
00:09:37,790 --> 00:09:39,050
its promise based.

109
00:09:39,740 --> 00:09:46,010
So you can see more and more of fach being used and the syntax is a whole lot simpler.

110
00:09:46,010 --> 00:09:51,560
It's got some built-In methods that you can make use of, especially when you're connecting to a JSON

111
00:09:51,980 --> 00:09:53,000
data endpoint.

112
00:09:53,720 --> 00:09:59,270
So let's set up the FUTCH request and the fetch by default will use the get.

113
00:10:00,060 --> 00:10:05,250
So same idea here, but by default, it's using the get method, so we don't have to include any further

114
00:10:06,210 --> 00:10:07,800
methods or any other parameters.

115
00:10:07,800 --> 00:10:12,660
If we are using the post, then we can add in headers and there's a bunch of parameters that we can

116
00:10:12,660 --> 00:10:13,530
use with Fach.

117
00:10:14,850 --> 00:10:20,700
So once it makes a connection to the URL, then it's going to move on to the next part of the promise,

118
00:10:20,880 --> 00:10:25,440
and that's going to be where it's returning back the response data.

119
00:10:25,800 --> 00:10:29,890
And depending on how this data's coming back, it can be a number of different formats.

120
00:10:30,090 --> 00:10:33,690
So this is going to come back within a JSON format.

121
00:10:35,010 --> 00:10:36,960
So that's the response object.

122
00:10:36,960 --> 00:10:38,960
And I'm going to use the arrow functions.

123
00:10:39,360 --> 00:10:46,670
So we're simply going to be returning back the response object and doing a return on it.

124
00:10:46,830 --> 00:10:53,010
So that's going to move it to the next part of the promise where now this is going to be responded back.

125
00:10:53,130 --> 00:11:00,540
And because this is JSON, there's a special method that converts the JSON data into JavaScript object

126
00:11:00,780 --> 00:11:05,220
within fetch, and that's just going to be by the JSON and the rounded brackets.

127
00:11:06,540 --> 00:11:09,780
So next up, we're retrieving it back as data.

128
00:11:10,500 --> 00:11:14,970
And then from here, what we'll do right now is we'll just console log out the data.

129
00:11:15,240 --> 00:11:21,020
So we'll be roughly at the same point where we are here, where we've got the response text value.

130
00:11:21,450 --> 00:11:26,340
So let's see how Futch works and we're returning back the results array.

131
00:11:27,510 --> 00:11:30,990
So this is the same point that we have here.

132
00:11:31,920 --> 00:11:38,910
And because this is going to be all the same going forward, what we can do is we can create a function

133
00:11:39,120 --> 00:11:40,730
that will add the text.

134
00:11:41,820 --> 00:11:51,900
So this will add in whatever the new object data is and just call that data and it can loop through

135
00:11:52,020 --> 00:11:54,180
the data results.

136
00:11:54,990 --> 00:11:56,900
And we can even shorten this as well.

137
00:11:56,910 --> 00:12:06,420
We can pass it in as the data results so that we'll just whatever it retrieves back the data results,

138
00:12:06,660 --> 00:12:11,790
it can output those into the output area.

139
00:12:13,230 --> 00:12:21,690
So let's also add that here we've got the data results and now we've got the two requests, methods.

140
00:12:21,960 --> 00:12:27,050
They're both connecting to the same function that's going to output the content onto the page.

141
00:12:27,360 --> 00:12:28,260
Let's refresh.

142
00:12:28,710 --> 00:12:32,990
Just make sure that they're both working and they should both be working actually the same way.

143
00:12:33,510 --> 00:12:34,470
And so there we go.

144
00:12:34,500 --> 00:12:38,460
We've got ability to list out and connect to an endpoint.

145
00:12:38,880 --> 00:12:42,320
So one other thing that I want to do before we conclude.

146
00:12:42,570 --> 00:12:50,000
So if for whatever reason the endpoint isn't working, we can also run with local JSON file.

147
00:12:50,610 --> 00:12:54,650
So let's go ahead and we're going to create our user JSON file.

148
00:12:55,080 --> 00:13:01,410
So I'm saving it on the same folder directory as I've got my other files, my JavaScript files and my

149
00:13:01,590 --> 00:13:02,190
HTML file.

150
00:13:02,820 --> 00:13:08,100
And what I'm going to do is I'm going to go over to the endpoint, just select everything from that

151
00:13:08,100 --> 00:13:09,620
endpoint and save it.

152
00:13:10,290 --> 00:13:16,470
So now instead of using the endpoint and of course I'm going to always have the same data.

153
00:13:17,460 --> 00:13:19,260
So that's one of the disadvantages.

154
00:13:19,260 --> 00:13:24,900
But this is another option in case the random user isn't working.

155
00:13:25,360 --> 00:13:33,420
So you can create your own random user JSON file and that will still work within the file.

156
00:13:33,540 --> 00:13:38,130
But as we can see, the data's always going to be the same because it's just pulling it in from this

157
00:13:38,130 --> 00:13:39,230
JSON file.

158
00:13:39,870 --> 00:13:41,280
So that's an alternative.

159
00:13:41,460 --> 00:13:47,490
If for whatever reason, you can't reach the endpoint, that you can always have the JSON file locally

160
00:13:47,640 --> 00:13:53,550
and make your requests or your fetch requests to those local files as well.