1
00:00:00,600 --> 00:00:07,980
This lesson is all about Ajax calls, so making fetch and zaatar requests, so before fetch we had one

2
00:00:07,980 --> 00:00:14,070
option and that was X Emelle HTP request or X our requests.

3
00:00:14,340 --> 00:00:19,950
In order to interact with servers, we could retrieve data from another Eurail without having to do

4
00:00:19,950 --> 00:00:21,150
a page refresh.

5
00:00:21,450 --> 00:00:23,250
So this is what's known as Ajax.

6
00:00:23,370 --> 00:00:26,940
There's a quick example of it here and there's a bunch of different ready states.

7
00:00:27,420 --> 00:00:30,840
So do a quick run through of what's available at the Mozilla documentation.

8
00:00:31,020 --> 00:00:36,270
So we've got our event target, we've got our request and then we've got the request object coming back

9
00:00:36,450 --> 00:00:37,740
so we can construct that.

10
00:00:37,860 --> 00:00:43,800
And it's got a bunch of different properties that we utilize, such as status and then the response

11
00:00:43,800 --> 00:00:45,160
text as well.

12
00:00:45,270 --> 00:00:47,550
So this is what comes back from the request.

13
00:00:47,730 --> 00:00:52,560
And these are all read only as there's different ready states that the request will go through.

14
00:00:52,830 --> 00:01:00,120
So at first it's unsent and then it's opened headers received loading and done so already.

15
00:01:00,120 --> 00:01:05,510
State four is a completed request and that's the one that we're looking for when we've got our requests.

16
00:01:05,810 --> 00:01:08,190
You can also check the different ready states.

17
00:01:08,550 --> 00:01:14,670
So using the different methods, we create the X H.R. object and at first it's unsent.

18
00:01:14,670 --> 00:01:15,900
So state will be zero.

19
00:01:16,260 --> 00:01:19,290
Then we use open and this opens up.

20
00:01:19,470 --> 00:01:21,170
This is where we specify the URL.

21
00:01:21,360 --> 00:01:25,800
So this updates the state and this is the state opened next.

22
00:01:25,800 --> 00:01:26,970
We've got loading.

23
00:01:27,450 --> 00:01:33,300
So when we've got our progress method that we're using and we can do stuff here as well at this point

24
00:01:33,300 --> 00:01:36,120
and in this case, we're outputting to the console log that's loading.

25
00:01:36,390 --> 00:01:40,080
And then lastly, but of course, not least is done.

26
00:01:40,230 --> 00:01:44,400
And this is the last ready states ready state for where we're looking for.

27
00:01:44,400 --> 00:01:46,620
And we've got the response back from the server.

28
00:01:46,890 --> 00:01:52,980
And you can also, of course, you need to send it in order to go through the different ready states

29
00:01:53,160 --> 00:01:58,290
because it's not going to move past the first one unless you actually have the H.R. object sent.

30
00:01:59,610 --> 00:02:06,000
Also, status is important because status and the status codes that are returned back and you might

31
00:02:06,000 --> 00:02:08,600
be familiar with some of them, like two hundred is OK.

32
00:02:08,790 --> 00:02:15,150
That means that you had a successful request and one of them that often comes up is four or four.

33
00:02:15,150 --> 00:02:19,020
So that means that the URL is not found and you've probably seen that on webpages.

34
00:02:19,260 --> 00:02:21,460
So these are the error codes that are typically seen.

35
00:02:22,200 --> 00:02:23,340
So let me show you how this works.

36
00:02:24,270 --> 00:02:31,740
So the first thing we do is we set up our our object and we define a new XML http request object.

37
00:02:32,160 --> 00:02:37,980
So within itself, if you go into the console and if you output into the console, you're going to see

38
00:02:37,980 --> 00:02:39,180
that this is the request.

39
00:02:39,330 --> 00:02:42,840
And here's all the ready states and all the different methods that are available.

40
00:02:43,020 --> 00:02:46,350
So we had the onload and everything that can get invoked.

41
00:02:46,530 --> 00:02:50,520
And as well this is that ready state values we're sitting at ready state zero.

42
00:02:50,970 --> 00:02:56,640
The next thing that we want to do, we want to actually set up a URL so this can be a const and setting

43
00:02:56,640 --> 00:02:57,450
up a Eurail.

44
00:02:57,660 --> 00:03:00,610
So there's a number of different Web APIs that you can use.

45
00:03:01,080 --> 00:03:04,350
This one is going to be called Chuck Norris Jokes.

46
00:03:04,350 --> 00:03:06,480
So it's an API, it's an open API.

47
00:03:06,650 --> 00:03:09,210
It's great for testing as well as entertainment.

48
00:03:09,210 --> 00:03:10,530
So you've got API.

49
00:03:10,530 --> 00:03:15,510
Chuck Norris jokes eyehole and we go to jokes and random joke.

50
00:03:16,290 --> 00:03:21,820
You can also load this within your browser and you can see that you're going to get a response back.

51
00:03:22,290 --> 00:03:27,860
So this is going to be within JSON format and see that we get the joke being returned back.

52
00:03:28,020 --> 00:03:28,920
So that's what we're after.

53
00:03:29,070 --> 00:03:32,880
When we do our request, we want to get some information from the server.

54
00:03:33,980 --> 00:03:41,720
So next to that we want to do is we want to excite China and open this and specify the method that we

55
00:03:41,720 --> 00:03:47,260
want to use or using the method and we're posting to the URL that we're specifying.

56
00:03:47,780 --> 00:03:52,790
So when we do that, we see that our state has changed those of you that saw that.

57
00:03:52,800 --> 00:03:54,510
So we state ready, state one.

58
00:03:54,860 --> 00:04:00,420
So that's where we're opening up the request and then the next one is going to be send.

59
00:04:00,680 --> 00:04:04,720
So we're going to send the request and we see the ready state change to four.

60
00:04:04,760 --> 00:04:08,420
So it went through all the ready states and everything was good as well as status.

61
00:04:08,420 --> 00:04:08,990
Two hundred.

62
00:04:09,140 --> 00:04:13,310
So that's another one that you can look for just to make sure that you do have everything ready.

63
00:04:13,940 --> 00:04:15,470
There's another one that you can track.

64
00:04:15,480 --> 00:04:17,750
So that's on ready state change.

65
00:04:18,030 --> 00:04:23,570
And this is expecting a function parameter and this is the one that's commonly used in order to track

66
00:04:23,570 --> 00:04:24,840
the ready state changes.

67
00:04:25,190 --> 00:04:32,070
So if I output the ready state value into the console, you're going to see that once we do the requests,

68
00:04:32,090 --> 00:04:37,130
we start out at 1:00 and then we're outputting that console information and then we're completing the

69
00:04:37,130 --> 00:04:37,580
request.

70
00:04:37,590 --> 00:04:42,440
So we've got information and it's the request has been sent and then we've got the connection to the

71
00:04:42,440 --> 00:04:44,830
server and we've got our response back.

72
00:04:45,080 --> 00:04:45,890
So that was great.

73
00:04:45,980 --> 00:04:51,140
And before you try to use the response, it's always a good idea to make sure that you do have that

74
00:04:51,140 --> 00:04:52,090
response data.

75
00:04:52,250 --> 00:04:55,760
So make sure that the ready state is equal to for.

76
00:04:56,030 --> 00:05:04,940
And also you can also check to make sure that you can also do another one that exceeds our status is

77
00:05:04,940 --> 00:05:11,660
also equal to two hundred, because that means that you have a successful return on the content and

78
00:05:11,660 --> 00:05:17,180
then now you can output into the console your XIKAR response object.

79
00:05:18,050 --> 00:05:23,240
So make sure that's double equal signs, so this is our response back from the server, and then that

80
00:05:23,240 --> 00:05:30,140
means that we can also utilize this within our code so we can get that information sent and using the

81
00:05:30,140 --> 00:05:36,520
JSON pass, because this is a string value that gets returned so you can use and create an object.

82
00:05:37,310 --> 00:05:44,060
So I just call that the joke and we're going to use JSON pass because we've got a string and we're trying

83
00:05:44,060 --> 00:05:44,900
to pass it through.

84
00:05:45,380 --> 00:05:49,310
And what we have is that response value.

85
00:05:50,720 --> 00:05:56,570
And I can console logout the joke, because now it's within an object format and now you can output

86
00:05:56,570 --> 00:05:59,540
that information so you can output the value if you want.

87
00:05:59,930 --> 00:06:03,370
So if you just want to see the joke, you can see the value of its output there.

88
00:06:03,560 --> 00:06:07,490
And this every time the page reloads, it's going to be a different joke because, again, it's connected

89
00:06:07,490 --> 00:06:08,510
to the server for this one.

90
00:06:08,720 --> 00:06:11,510
And you can use any of the information that's coming back here.

91
00:06:11,690 --> 00:06:16,270
So you can also use the image icon if you wanted to and update the HTML.

92
00:06:16,640 --> 00:06:23,540
So selecting the document object and using query selector, we do have a div on the page, so I'm going

93
00:06:23,540 --> 00:06:30,630
to select that div and update the inner html of that div with content that's been returned back.

94
00:06:30,800 --> 00:06:34,460
So we've got our joke value, so I'll put the joke there.

95
00:06:34,700 --> 00:06:41,390
So see that joke gets output into the console and the content and we can also add in and create an image

96
00:06:41,390 --> 00:06:42,380
to that if we want to.

97
00:06:43,130 --> 00:06:44,130
And the source of this.

98
00:06:44,130 --> 00:06:45,350
So to break out of the string.

99
00:06:45,370 --> 00:06:49,300
So I got a single code that and this is a joke, you URL.

100
00:06:49,310 --> 00:06:55,580
So this will be dependent on what the server is returning back and close off that string to see we get

101
00:06:55,850 --> 00:07:02,120
the image being returned back as well and then also the content so you can pause the video and try the

102
00:07:02,490 --> 00:07:03,410
char object.

103
00:07:03,410 --> 00:07:04,490
That's the request.

104
00:07:04,640 --> 00:07:09,260
You can use the same API or connect to any of the other APIs that are available.

105
00:07:10,010 --> 00:07:13,460
And coming up next, we're going to cover fetch to go ahead and try this.

106
00:07:13,700 --> 00:07:17,990
And coming up next, we're going to do fetch within the same format and collecting the same API.

107
00:07:18,140 --> 00:07:19,580
Actually see the difference between the two.