1 00:00:02,120 --> 00:00:04,570 Now, that's it for this course section 2 00:00:04,570 --> 00:00:06,680 about Ajax requests. 3 00:00:06,680 --> 00:00:09,660 Again, a lot of new pieces of knowledge. 4 00:00:09,660 --> 00:00:10,493 In the end, 5 00:00:10,493 --> 00:00:13,810 Ajax requests are just behind the scenes requests 6 00:00:13,810 --> 00:00:15,210 which you send directly 7 00:00:15,210 --> 00:00:18,560 from inside your browser side JavaScript code. 8 00:00:18,560 --> 00:00:21,900 And they call them behind the scenes because they happen 9 00:00:21,900 --> 00:00:25,410 without the user necessarily noticing them. 10 00:00:25,410 --> 00:00:27,010 The page doesn't reload. 11 00:00:27,010 --> 00:00:28,980 Instead, you send your own request 12 00:00:28,980 --> 00:00:31,230 and you handle the response manually 13 00:00:31,230 --> 00:00:33,380 in your browser side code then 14 00:00:33,380 --> 00:00:35,793 just as we did it in this course section. 15 00:00:37,350 --> 00:00:40,350 Now, you did learn that there is the fetch function, 16 00:00:40,350 --> 00:00:42,450 which we used in this course section, 17 00:00:42,450 --> 00:00:47,060 but I also mentioned the XML HTTP request object. 18 00:00:47,060 --> 00:00:49,130 And even though we didn't use it here, 19 00:00:49,130 --> 00:00:50,740 and even though the object itself 20 00:00:50,740 --> 00:00:52,470 is a bit more clunky to use, 21 00:00:52,470 --> 00:00:54,770 I absolutely wanna highlight 22 00:00:54,770 --> 00:00:57,410 that Axios is a very popular library 23 00:00:57,410 --> 00:01:01,550 based on XML HTTP request which is being used a lot 24 00:01:01,550 --> 00:01:05,440 and which is a great alternative to the fetch function. 25 00:01:05,440 --> 00:01:07,860 So you absolutely might wanna check out 26 00:01:07,860 --> 00:01:09,510 this library as well, 27 00:01:09,510 --> 00:01:13,060 explore the official documentation to learn how it works, 28 00:01:13,060 --> 00:01:16,390 to see how you could use that instead of the fetch function 29 00:01:16,390 --> 00:01:19,320 for sending requests, handling responses, 30 00:01:19,320 --> 00:01:21,350 handling errors and so on. 31 00:01:21,350 --> 00:01:23,453 It's also really, really good. 32 00:01:24,300 --> 00:01:26,430 Nonetheless here, we focused on fetch 33 00:01:26,430 --> 00:01:29,740 and we learned how we can send get requests with it, 34 00:01:29,740 --> 00:01:33,410 but how we can then also send post requests. 35 00:01:33,410 --> 00:01:37,390 There, it's important to include a body in JSON format 36 00:01:37,390 --> 00:01:40,120 and that we should set the appropriate header 37 00:01:40,120 --> 00:01:42,310 to make sure that on the server side, 38 00:01:42,310 --> 00:01:44,983 we're parsing that incoming data correctly. 39 00:01:45,850 --> 00:01:49,500 And speaking of JSON, that is simply just a data format. 40 00:01:49,500 --> 00:01:51,210 It's, in the end, just text, 41 00:01:51,210 --> 00:01:53,630 but text formatted in a certain way 42 00:01:53,630 --> 00:01:56,660 which is both human and machine readable. 43 00:01:56,660 --> 00:01:57,493 It looks like this 44 00:01:57,493 --> 00:02:00,970 and therefore very much like JavaScript objects, 45 00:02:00,970 --> 00:02:03,300 but it isn't a JavaScript object. 46 00:02:03,300 --> 00:02:07,490 It's just text looking like one with slight differences, 47 00:02:07,490 --> 00:02:10,350 like the double quotes around the key names 48 00:02:10,350 --> 00:02:12,530 and the double quotes around strings. 49 00:02:12,530 --> 00:02:14,623 Single quotes aren't allowed here. 50 00:02:15,490 --> 00:02:18,510 Now, we did all the talk about handling responses, 51 00:02:18,510 --> 00:02:21,060 which we get back because that's a key thing 52 00:02:21,060 --> 00:02:23,160 when working with Ajax requests. 53 00:02:23,160 --> 00:02:24,940 You typically wanna do something 54 00:02:24,940 --> 00:02:27,310 once the request succeeded. 55 00:02:27,310 --> 00:02:30,120 We learned how we can check whether it succeeded 56 00:02:30,120 --> 00:02:32,900 and how we can then run different pieces of code 57 00:02:32,900 --> 00:02:34,940 based on the request result 58 00:02:34,940 --> 00:02:38,233 and based on the response being successful or not. 59 00:02:39,140 --> 00:02:41,260 We learned that we can update the DOM 60 00:02:41,260 --> 00:02:43,670 and for example output our comments there 61 00:02:43,670 --> 00:02:46,900 if we got comments successfully, 62 00:02:46,900 --> 00:02:49,750 and we also learned that we can differentiate 63 00:02:49,750 --> 00:02:52,220 between response errors 64 00:02:52,220 --> 00:02:54,410 where something went wrong on the server 65 00:02:54,410 --> 00:02:56,640 but we got a response in the end, 66 00:02:56,640 --> 00:03:00,270 and technical errors where for example the request 67 00:03:00,270 --> 00:03:02,620 doesn't even leave our machine. 68 00:03:02,620 --> 00:03:04,500 And that we wanna handle both, 69 00:03:04,500 --> 00:03:08,670 the latter category of errors can be handled with try-catch 70 00:03:08,670 --> 00:03:10,900 when using async await. 71 00:03:10,900 --> 00:03:13,580 And that's also important we use async await 72 00:03:13,580 --> 00:03:16,670 because the fetch function gives us a promise. 73 00:03:16,670 --> 00:03:19,250 It does not give us a response instantly 74 00:03:19,250 --> 00:03:23,050 because sending a request is not an instant option. 75 00:03:23,050 --> 00:03:25,340 It's an asynchronous task instead. 76 00:03:25,340 --> 00:03:28,260 And promises, as we learned before in the course, 77 00:03:28,260 --> 00:03:32,930 are a common thing, a common solution in JavaScript 78 00:03:32,930 --> 00:03:36,030 for dealing with asynchronous code. 79 00:03:36,030 --> 00:03:38,800 The fetch function embraces this solution. 80 00:03:38,800 --> 00:03:40,630 It embraces promises. 81 00:03:40,630 --> 00:03:43,610 And therefore, we can also use async await 82 00:03:43,610 --> 00:03:47,050 to handle these promises in a more convenient way. 83 00:03:47,050 --> 00:03:51,530 Last but not least, we learned about these new HTTP methods, 84 00:03:51,530 --> 00:03:55,690 which we actually didn't use in this course section, 85 00:03:55,690 --> 00:03:57,700 but which you will see later in the course. 86 00:03:57,700 --> 00:04:00,420 And therefore, you should already be aware of them 87 00:04:00,420 --> 00:04:02,680 as mentioned in the last lecture. 88 00:04:02,680 --> 00:04:04,180 And with all of that, 89 00:04:04,180 --> 00:04:08,510 we now have another very powerful and very important tool 90 00:04:08,510 --> 00:04:11,760 in our toolbox because Ajax requests, 91 00:04:11,760 --> 00:04:14,970 so these JavaScript-driven HTTP requests, 92 00:04:14,970 --> 00:04:17,399 are also something which you will see a lot 93 00:04:17,399 --> 00:04:20,130 in web development in this course, 94 00:04:20,130 --> 00:04:21,920 and therefore something you have to know 95 00:04:21,920 --> 00:04:23,193 as a web developer.