1 00:00:02,400 --> 00:00:07,210 So, what is Ajax? What does this term mean? 2 00:00:07,210 --> 00:00:11,020 Ajax is a term which you will read quite a bit once 3 00:00:11,020 --> 00:00:13,620 you would dive deeper into Web Development. 4 00:00:13,620 --> 00:00:17,980 If you dive into sources like the MDN documentation 5 00:00:17,980 --> 00:00:22,080 or if you explore a lot of blog posts, for example. 6 00:00:22,080 --> 00:00:26,570 And Ajax is a bit of a dated term actually, 7 00:00:26,570 --> 00:00:31,570 but it stands for Asynchronous JavaScript And XML. 8 00:00:31,790 --> 00:00:33,230 And it's a bit dated. 9 00:00:33,230 --> 00:00:35,100 I wanna emphasize this 10 00:00:35,100 --> 00:00:39,600 because this XML part isn't too important anymore nowadays, 11 00:00:39,600 --> 00:00:41,540 as you will learn in a couple of minutes, 12 00:00:41,540 --> 00:00:45,330 but since you will encounter this term, Ajax, quite a bit, 13 00:00:45,330 --> 00:00:47,420 I wanted to include it in this course 14 00:00:47,420 --> 00:00:49,053 and explain what's up with it. 15 00:00:49,900 --> 00:00:51,310 But what's up with it? 16 00:00:51,310 --> 00:00:55,840 What is this Asynchronous JavaScript And XML thing? 17 00:00:55,840 --> 00:00:58,030 Well, in the end, it's a historic term, 18 00:00:58,030 --> 00:01:01,200 but it represents a concept, an idea, 19 00:01:01,200 --> 00:01:06,200 which is all about sending HTTP request via JavaScript. 20 00:01:06,560 --> 00:01:08,270 And that's very important. 21 00:01:08,270 --> 00:01:11,860 I'm talking about browser-side JavaScript. 22 00:01:11,860 --> 00:01:13,960 So not NodeJS, 23 00:01:13,960 --> 00:01:17,330 but instead JavaScript running in the browser. 24 00:01:17,330 --> 00:01:20,600 And I wanna emphasize that this is totally new 25 00:01:20,600 --> 00:01:22,890 at this point in the course. 26 00:01:22,890 --> 00:01:25,910 We have worked with requests quite a bit. 27 00:01:25,910 --> 00:01:29,750 For example, a request gets sent when you click a link, 28 00:01:29,750 --> 00:01:33,420 when you enter a URL or when you submit a form, 29 00:01:33,420 --> 00:01:36,750 but now I'm talking about requests which you will send 30 00:01:36,750 --> 00:01:40,350 on your own from inside your JavaScript code. 31 00:01:40,350 --> 00:01:43,293 And that is something we haven't done up to this point. 32 00:01:44,340 --> 00:01:48,650 Now, when it comes to adding this Ajax functionality 33 00:01:48,650 --> 00:01:51,390 to your JavaScript code, nowadays, 34 00:01:51,390 --> 00:01:54,950 you got two main options for doing so. 35 00:01:54,950 --> 00:01:58,820 There are two built-in browser side JavaScript features 36 00:01:58,820 --> 00:02:02,793 that help you tap into that Ajax functionality. 37 00:02:03,770 --> 00:02:07,100 There is the XML HTTP request 38 00:02:07,100 --> 00:02:08,169 object 39 00:02:08,169 --> 00:02:10,870 and there is the fetch function, 40 00:02:10,870 --> 00:02:13,120 which you can use in your code. 41 00:02:13,120 --> 00:02:16,260 And we're going to take a closer look at both here 42 00:02:16,260 --> 00:02:18,370 in this course and in this section, 43 00:02:18,370 --> 00:02:21,050 but these are two main constructs built 44 00:02:21,050 --> 00:02:23,460 into browser-side JavaScript, 45 00:02:23,460 --> 00:02:26,700 which you can use in your JavaScript code to configure 46 00:02:26,700 --> 00:02:31,530 and send HTTP requests from inside your JavaScript code 47 00:02:31,530 --> 00:02:32,853 to a server. 48 00:02:33,730 --> 00:02:37,840 Now, before we explore these constructs and how the code 49 00:02:37,840 --> 00:02:40,450 for sending such requests could look like, 50 00:02:40,450 --> 00:02:44,330 and before we explore what this XML thing here is 51 00:02:44,330 --> 00:02:48,820 and why this term is a bit dated, let's take a step back. 52 00:02:48,820 --> 00:02:52,290 Why would we wanna send HTTP requests 53 00:02:52,290 --> 00:02:54,250 from inside JavaScript? 54 00:02:54,250 --> 00:02:56,880 What could be the advantage of this? 55 00:02:56,880 --> 00:02:58,340 For this, let's keep in mind 56 00:02:58,340 --> 00:03:01,770 that we did already send a lot of HTTP requests 57 00:03:01,770 --> 00:03:04,670 without Ajax throughout this course. 58 00:03:04,670 --> 00:03:06,620 For example, as I mentioned before, 59 00:03:06,620 --> 00:03:08,770 whenever we entered a URL, 60 00:03:08,770 --> 00:03:12,370 then the browser automatically sent a get request 61 00:03:12,370 --> 00:03:14,450 to that URL. 62 00:03:14,450 --> 00:03:18,150 And we then for example, replied on the server 63 00:03:18,150 --> 00:03:21,950 with some HTML document or some HTML code, 64 00:03:21,950 --> 00:03:24,043 which can be displayed by the browser. 65 00:03:25,180 --> 00:03:28,320 The same would pretty much happen if you click a link, 66 00:03:28,320 --> 00:03:31,460 then the browser would also send a get request 67 00:03:31,460 --> 00:03:34,433 to that URL totally automatically. 68 00:03:35,320 --> 00:03:37,780 Or we talk about form submission. 69 00:03:37,780 --> 00:03:40,650 There, you'll learn that you as a developer, 70 00:03:40,650 --> 00:03:44,710 can control whether a get or a post request is sent. 71 00:03:44,710 --> 00:03:47,440 and very often it will be a post request, 72 00:03:47,440 --> 00:03:50,500 but here, the idea is also that the browser 73 00:03:50,500 --> 00:03:54,120 will send the request to some URL 74 00:03:54,120 --> 00:03:56,810 and then the server that serves that URL 75 00:03:56,810 --> 00:03:59,973 is able to do something in response to that request. 76 00:04:01,400 --> 00:04:04,050 Now, what all these methods have in common 77 00:04:04,050 --> 00:04:05,500 is that with them, 78 00:04:05,500 --> 00:04:08,360 they're absolutely fine and common to use, 79 00:04:08,360 --> 00:04:11,450 but in the end we always send a request 80 00:04:11,450 --> 00:04:14,080 and we get back a new HTML page. 81 00:04:14,080 --> 00:04:17,880 That is what happened all the time throughout this course. 82 00:04:17,880 --> 00:04:20,380 All the time in our servicer-side code, 83 00:04:20,380 --> 00:04:22,970 we replied by rendering a template 84 00:04:22,970 --> 00:04:26,490 or by sending an HTML code snippet or document 85 00:04:26,490 --> 00:04:29,190 or by redirecting to another page, 86 00:04:29,190 --> 00:04:31,890 which then rendered a template. 87 00:04:31,890 --> 00:04:35,300 So we all the time sent a request and got a new page, 88 00:04:35,300 --> 00:04:38,113 which will stand rendered and displayed by the browser. 89 00:04:39,650 --> 00:04:42,110 Now, as I said, there is nothing wrong with that, 90 00:04:42,110 --> 00:04:44,430 but there is one important use case 91 00:04:44,430 --> 00:04:47,610 that we can't really handle with this approach 92 00:04:47,610 --> 00:04:52,430 if we only had these methods for sending HTTP requests. 93 00:04:52,430 --> 00:04:55,160 And that's why we have this Ajax thing, 94 00:04:55,160 --> 00:04:57,670 which allows us to send HTTP requests 95 00:04:57,670 --> 00:05:00,840 with Ajax from inside JavaScript. 96 00:05:00,840 --> 00:05:02,730 From inside browser-side JavaScript, 97 00:05:02,730 --> 00:05:04,410 I really wanna emphasize this. 98 00:05:04,410 --> 00:05:06,460 And here, the idea then is, 99 00:05:06,460 --> 00:05:10,370 or the advantages that we don't just send the request, 100 00:05:10,370 --> 00:05:15,160 but we also handle the response in our JavaScript code. 101 00:05:15,160 --> 00:05:17,180 And that's a important difference. 102 00:05:17,180 --> 00:05:20,740 On the left side, where the browser sent the request, 103 00:05:20,740 --> 00:05:24,310 the browser then had to handle the response. 104 00:05:24,310 --> 00:05:27,820 That's why the response is typically an HTML document 105 00:05:27,820 --> 00:05:31,540 or some HTML code because the browser knows how to handle 106 00:05:31,540 --> 00:05:33,900 that and the browser is then able to display 107 00:05:33,900 --> 00:05:36,833 a page based on that HTML document. 108 00:05:37,750 --> 00:05:39,890 But now on the right side here, 109 00:05:39,890 --> 00:05:42,890 we actually send the request in JavaScript 110 00:05:42,890 --> 00:05:46,290 and then we can handle the response in JavaScript. 111 00:05:46,290 --> 00:05:49,700 And the implication of this is that we don't necessarily 112 00:05:49,700 --> 00:05:53,310 have to reload the page or load a new page, 113 00:05:53,310 --> 00:05:55,750 instead, we can just send data 114 00:05:55,750 --> 00:06:00,030 and maybe get back data as part of the response. 115 00:06:00,030 --> 00:06:03,650 So we might not get back a full HTML page, 116 00:06:03,650 --> 00:06:06,200 but maybe just a small data package 117 00:06:06,200 --> 00:06:08,410 with any data that we might need, 118 00:06:08,410 --> 00:06:10,740 which we can then use in JavaScript 119 00:06:10,740 --> 00:06:13,913 to update a part of the currently loaded page. 120 00:06:14,790 --> 00:06:17,340 And to make this a little bit more concrete, 121 00:06:17,340 --> 00:06:20,610 consider this use case where we have a blog, 122 00:06:20,610 --> 00:06:24,380 like the blog we built in the previous course sections, 123 00:06:24,380 --> 00:06:27,070 where below the posts in that blog, 124 00:06:27,070 --> 00:06:30,040 we also have a comments section. 125 00:06:30,040 --> 00:06:33,150 And maybe the comments are not loaded by default 126 00:06:33,150 --> 00:06:35,320 because we don't wanna load a bunch of comments 127 00:06:35,320 --> 00:06:38,390 that might not be interesting to the visitor at all. 128 00:06:38,390 --> 00:06:40,630 And therefore we have a button for loading 129 00:06:40,630 --> 00:06:42,980 those comments on the demand. 130 00:06:42,980 --> 00:06:45,230 If we only had the left side here, 131 00:06:45,230 --> 00:06:46,940 then whenever we clicked the button, 132 00:06:46,940 --> 00:06:50,220 we would have to fetch an entirely new page. 133 00:06:50,220 --> 00:06:52,470 So the entire page with the blog post 134 00:06:52,470 --> 00:06:55,070 and then also with the comments. 135 00:06:55,070 --> 00:06:58,390 That's possible but it wastes a bit of bandwidth 136 00:06:58,390 --> 00:07:00,420 and it means that for the user, 137 00:07:00,420 --> 00:07:04,610 the page actually reloads once this button is clicked 138 00:07:04,610 --> 00:07:07,600 so the scrolling position might also be reset 139 00:07:07,600 --> 00:07:08,803 or anything like that. 140 00:07:10,530 --> 00:07:14,390 With Ajax, we can instead get a behavior like this, 141 00:07:14,390 --> 00:07:16,740 where we click this button. 142 00:07:16,740 --> 00:07:19,670 and now instead of reloading the entire page 143 00:07:19,670 --> 00:07:22,950 and fetching all the HTML code for the page, 144 00:07:22,950 --> 00:07:26,300 we only get the comments data behind the scenes 145 00:07:26,300 --> 00:07:28,670 in JavaScript and once it's there, 146 00:07:28,670 --> 00:07:32,800 we use JavaScript to update only a part of the page, 147 00:07:32,800 --> 00:07:35,450 the comments section here. 148 00:07:35,450 --> 00:07:37,550 So we didn't load a brand new page, 149 00:07:37,550 --> 00:07:42,010 we updated the existing page, the currently loaded page 150 00:07:42,010 --> 00:07:44,410 because you learned that that is something you can do 151 00:07:44,410 --> 00:07:46,570 with JavaScript in the browser. 152 00:07:46,570 --> 00:07:50,240 You can change the page that's currently on the screen. 153 00:07:50,240 --> 00:07:52,340 And we use this to our advantage here 154 00:07:52,340 --> 00:07:53,660 to send the request, 155 00:07:53,660 --> 00:07:57,230 get back some data and then update what the user sees. 156 00:07:57,230 --> 00:08:00,640 And we could do the same for sending our own comment instead 157 00:08:00,640 --> 00:08:02,253 of just loading the comments. 158 00:08:03,180 --> 00:08:04,720 When we submit a comment, 159 00:08:04,720 --> 00:08:07,720 sure, we could then reload this page and so on, 160 00:08:07,720 --> 00:08:09,350 but why would we do that? 161 00:08:09,350 --> 00:08:12,170 We can just send our comment behind the scenes 162 00:08:12,170 --> 00:08:14,050 and once we know that it arrived 163 00:08:14,050 --> 00:08:16,280 and that it was handled by the server, 164 00:08:16,280 --> 00:08:19,280 we just show a little success message to the user, 165 00:08:19,280 --> 00:08:22,980 by again, updating the currently loaded page. 166 00:08:22,980 --> 00:08:25,440 And this is a super useful feature, 167 00:08:25,440 --> 00:08:28,690 which you can use for a lot of use cases. 168 00:08:28,690 --> 00:08:32,010 You can use it in some administration dashboard 169 00:08:32,010 --> 00:08:34,250 where you will have a list of blog post 170 00:08:34,250 --> 00:08:36,150 and you wanna quickly delete one item 171 00:08:36,150 --> 00:08:39,250 from that list without reloading the entire page. 172 00:08:39,250 --> 00:08:42,293 There are an endless amount of possibilities. 173 00:08:43,200 --> 00:08:45,680 Now this does all not mean that Ajax 174 00:08:45,680 --> 00:08:49,280 and this behind the scenes request thing replaces 175 00:08:49,280 --> 00:08:51,200 the approaches on the left side here. 176 00:08:51,200 --> 00:08:55,330 Instead, it's simply is an additional tool in your toolbox, 177 00:08:55,330 --> 00:08:59,060 which you can use for sending requests behind the scenes 178 00:08:59,060 --> 00:09:01,940 whenever you only wanna update a part 179 00:09:01,940 --> 00:09:03,870 of the currently loaded page. 180 00:09:03,870 --> 00:09:07,880 So whenever you wanna avoid reloading the entire page 181 00:09:07,880 --> 00:09:10,280 or loading a new page. 182 00:09:10,280 --> 00:09:11,960 That's not always what you want, 183 00:09:11,960 --> 00:09:13,650 but sometimes what you want. 184 00:09:13,650 --> 00:09:18,180 And with this Ajax behind the scenes request functionality, 185 00:09:18,180 --> 00:09:19,890 you can do that. 186 00:09:19,890 --> 00:09:21,930 That's why you might wanna use it. 187 00:09:21,930 --> 00:09:24,833 That's the idea behind Ajax here in the end.