1
00:00:02,420 --> 00:00:10,730
So how can you send a HttpRequest then? It all starts with creating a new XMLHttpRequest object and

2
00:00:10,730 --> 00:00:12,040
I'll name it xhr,

3
00:00:12,070 --> 00:00:13,330
that's the name of my constant

4
00:00:13,810 --> 00:00:18,440
and with new XMLHttpRequest you create such an object.

5
00:00:18,440 --> 00:00:19,690
So that's the starting point,

6
00:00:19,700 --> 00:00:26,780
this object will allow you to send HttpRequests, it is built into the browser and all browsers support

7
00:00:26,810 --> 00:00:27,590
this object,

8
00:00:27,590 --> 00:00:33,850
it has a really good browser support. Now to send a request or to get started,

9
00:00:33,860 --> 00:00:40,130
we need to configure the request and the first step for that is to use our object, so xhr, this constant

10
00:00:40,130 --> 00:00:43,710
which holds the object and call the open method there.

11
00:00:43,850 --> 00:00:50,390
Now open sounds like it opens a connection or anything like that, actually does not do that, by calling

12
00:00:50,450 --> 00:00:51,650
open alone,

13
00:00:51,680 --> 00:00:54,170
no network activity will be started,

14
00:00:54,170 --> 00:01:01,490
it's just a first step towards configuring the request. Open takes at least two arguments here and the

15
00:01:01,490 --> 00:01:04,610
first one describes the HTTP method

16
00:01:04,610 --> 00:01:10,670
you want to use. Now here that's get because you want to send a get request, so you pass a string with

17
00:01:10,670 --> 00:01:15,800
the value get as a first argument to open to send a get request

18
00:01:15,800 --> 00:01:20,510
and as you saw if we send a request to this URL, I said the browser would automatically send a

19
00:01:20,510 --> 00:01:22,900
get request, we get back this data

20
00:01:22,910 --> 00:01:26,670
and this actually looks like a list of posts we could work with,

21
00:01:26,810 --> 00:01:29,180
so let's send a get request.

22
00:01:29,180 --> 00:01:33,830
Now we need an additional argument here and that's the URL to which we want to send that

23
00:01:33,830 --> 00:01:35,160
request.

24
00:01:35,240 --> 00:01:36,700
So here, that's another string

25
00:01:36,710 --> 00:01:38,300
and here you can paste in

26
00:01:38,330 --> 00:01:41,090
that URL to which the request should be sent,

27
00:01:41,090 --> 00:01:47,680
so in this case the URL we just used in the browser. With that we basically configured the request,

28
00:01:47,710 --> 00:01:53,620
we informed the xhr object which kind of requests we want to send to which address.

29
00:01:54,100 --> 00:02:02,470
Now in order to send it, we have to call xhr send, this will send the request.

30
00:02:02,470 --> 00:02:07,750
Now if we save that and we go back to our page and we reload,

31
00:02:08,050 --> 00:02:09,060
huh,

32
00:02:09,070 --> 00:02:10,850
did something happen?

33
00:02:10,870 --> 00:02:16,180
Well we can find out in the developer tools by going to the network tab there,

34
00:02:16,180 --> 00:02:20,210
if you go there, you will see any network requests that are sent.

35
00:02:20,210 --> 00:02:25,450
Now if you clear that and you reload, you see here we got a bunch of requests being sent and if we have

36
00:02:25,450 --> 00:02:29,950
a look at the requests that were sent, we see the index.html file,

37
00:02:29,980 --> 00:02:31,820
that makes sense because that was loaded,

38
00:02:31,840 --> 00:02:34,090
we see the CSS file, also makes sense,

39
00:02:34,090 --> 00:02:37,950
we need to that, that was loaded as part of the HTML file.

40
00:02:37,960 --> 00:02:43,990
Same for app.js, this script also needed to be loaded but then we have this request here at the bottom

41
00:02:44,080 --> 00:02:51,220
and this was not to a file but this was to this URL we entered and if we click on that, we can

42
00:02:51,220 --> 00:02:59,260
inspect this request and here we actually see, wait, shrink this a little bit, here we see the data that

43
00:02:59,260 --> 00:03:04,750
was returned by the request which in this case is a list of dummy post data.

44
00:03:05,110 --> 00:03:10,010
If we click on headers, we see the configuration of the request, we see it was a get request to this

45
00:03:10,030 --> 00:03:16,900
URL, we see the headers that were attached to the response, these are attached by the server when it

46
00:03:16,900 --> 00:03:18,610
sends back a response and

47
00:03:18,820 --> 00:03:20,650
we also have the request headers,

48
00:03:20,650 --> 00:03:23,710
these are the headers that were attached to our request.

49
00:03:23,710 --> 00:03:29,230
Now of course, we didn't specifically add our own headers but the browser attaches some default headers,

50
00:03:29,350 --> 00:03:37,390
like the user agent for example. So the request indeed was sent and we get back some data.

51
00:03:37,390 --> 00:03:43,000
Now we just need to find out how to use that data and for that, we first of all have to understand the

52
00:03:43,000 --> 00:03:44,080
data format.