1 00:00:02,070 --> 00:00:04,620 So, now we explored the "Why?" 2 00:00:04,620 --> 00:00:07,100 We will soon dive into the code for 3 00:00:07,100 --> 00:00:09,300 sending these requests on our own. 4 00:00:09,300 --> 00:00:10,870 But before we do that, 5 00:00:10,870 --> 00:00:13,940 let's come back to these two possible ways of 6 00:00:13,940 --> 00:00:17,770 adding this behind the scenes requests functionality, 7 00:00:17,770 --> 00:00:21,920 XMLHttpRequest and the fetch function. 8 00:00:21,920 --> 00:00:25,080 And let's also explore why it's called Ajax. 9 00:00:25,080 --> 00:00:29,120 What the idea behind this XML thing here is. 10 00:00:29,120 --> 00:00:31,253 Well let's start with the XMLHttpRequest. 11 00:00:32,689 --> 00:00:34,830 Because there we also have the XML 12 00:00:34,830 --> 00:00:37,880 in the name of this thing, of this object, 13 00:00:37,880 --> 00:00:40,400 which is built into JavaScript. 14 00:00:40,400 --> 00:00:44,020 And this simply is a built-in object, 15 00:00:44,020 --> 00:00:46,740 which is available in the browser in JavaScript, 16 00:00:46,740 --> 00:00:47,960 just like that, 17 00:00:47,960 --> 00:00:50,770 which in the end gives you a bunch of utility methods 18 00:00:50,770 --> 00:00:53,040 for sending HttP requests 19 00:00:53,040 --> 00:00:56,500 and handling responses for those requests. 20 00:00:56,500 --> 00:01:01,360 Now, it was originally developed for sending XML data. 21 00:01:01,360 --> 00:01:03,890 And we'll explore what XML data is 22 00:01:03,890 --> 00:01:06,540 and why it's not used anymore in a second. 23 00:01:06,540 --> 00:01:09,460 But that is what it was originally developed for 24 00:01:09,460 --> 00:01:12,243 and that's why it's called XMLHttpRequest. 25 00:01:13,980 --> 00:01:17,560 Now this object works, you can use it, 26 00:01:17,560 --> 00:01:19,640 but it's a bit clunky to use. 27 00:01:19,640 --> 00:01:21,620 We won't use it from the ground up 28 00:01:21,620 --> 00:01:23,220 like this in this course 29 00:01:23,220 --> 00:01:25,160 because it's too complex to use 30 00:01:25,160 --> 00:01:29,190 and typically almost no one uses it these days, 31 00:01:29,190 --> 00:01:31,780 at least not in the raw form. 32 00:01:31,780 --> 00:01:33,660 It is very commonly used 33 00:01:33,660 --> 00:01:36,860 in the form of some third party packages though. 34 00:01:36,860 --> 00:01:38,580 Some third party libraries 35 00:01:38,580 --> 00:01:40,910 which you can add to your project. 36 00:01:40,910 --> 00:01:45,910 The most popular XMLHttpRequest based library 37 00:01:46,120 --> 00:01:49,640 is the Axios library which you can use for free, 38 00:01:49,640 --> 00:01:50,920 it's open source, 39 00:01:50,920 --> 00:01:53,180 which you can include in your project, 40 00:01:53,180 --> 00:01:56,100 so which you can add to your project. 41 00:01:56,100 --> 00:01:59,160 Check out that third-party libraries section 42 00:01:59,160 --> 00:02:00,690 way early in the course 43 00:02:00,690 --> 00:02:03,160 if you need to dive back into how to use 44 00:02:03,160 --> 00:02:05,240 such third-party libraries, 45 00:02:05,240 --> 00:02:06,350 but you can use that. 46 00:02:06,350 --> 00:02:09,720 And this then is basically a wrapper around 47 00:02:09,720 --> 00:02:13,830 this clunky built in XMLHttpRequest object 48 00:02:13,830 --> 00:02:18,510 and it's then way easier and way more comfortable to use. 49 00:02:18,510 --> 00:02:20,830 So this is a library which is commonly used 50 00:02:20,830 --> 00:02:23,630 and which would be absolutely fine to be used 51 00:02:23,630 --> 00:02:28,260 for sending HTTP requests from inside JavaScript 52 00:02:28,260 --> 00:02:31,993 and for then handling the responses of those requests. 53 00:02:32,920 --> 00:02:35,490 But there also is an alternative 54 00:02:35,490 --> 00:02:38,173 and this alternative is this fetch function. 55 00:02:39,100 --> 00:02:40,920 However, before we dive into that, 56 00:02:40,920 --> 00:02:43,580 let's come back to this XML thing. 57 00:02:43,580 --> 00:02:46,710 Why is it called XMLHttpRequest 58 00:02:46,710 --> 00:02:49,130 and what is the XML in Ajax 59 00:02:49,130 --> 00:02:53,470 and why is this all a bit dated and still used? 60 00:02:53,470 --> 00:02:57,750 Well, XML stands for Extensible Markup Language, 61 00:02:57,750 --> 00:02:59,720 and it looks like this. 62 00:02:59,720 --> 00:03:04,080 This is basically some raw text following a certain format 63 00:03:04,080 --> 00:03:06,850 where we have opening and closing text 64 00:03:06,850 --> 00:03:09,890 which look a lot like HTML. 65 00:03:09,890 --> 00:03:11,940 And indeed that's the idea here. 66 00:03:11,940 --> 00:03:15,160 XML is a data format for formatting 67 00:03:15,160 --> 00:03:17,130 or a structuring text data 68 00:03:17,130 --> 00:03:19,420 in a machine readable way. 69 00:03:19,420 --> 00:03:22,560 So if we would want to send some data to the server 70 00:03:22,560 --> 00:03:24,820 behind the scenes with JavaScript 71 00:03:24,820 --> 00:03:25,683 to tell the server 72 00:03:25,683 --> 00:03:28,350 that a new post comment should be stored, 73 00:03:28,350 --> 00:03:31,530 we could send a text file or a piece of text 74 00:03:31,530 --> 00:03:33,770 that's formatted like this. 75 00:03:33,770 --> 00:03:37,280 Why like this instead of just two lines of text? 76 00:03:37,280 --> 00:03:40,600 Well, because this format is easier to read for machines 77 00:03:40,600 --> 00:03:43,350 and the server, the code on the server 78 00:03:43,350 --> 00:03:45,640 would have an easier time finding out 79 00:03:45,640 --> 00:03:47,420 what should be the title of the comment 80 00:03:47,420 --> 00:03:50,540 and what should be the main text of the comment, 81 00:03:50,540 --> 00:03:54,500 it wouldn't need to guess which line of text is what. 82 00:03:54,500 --> 00:03:57,400 So this is easier to parse for machines. 83 00:03:57,400 --> 00:03:59,470 And it looks a lot like HTML 84 00:03:59,470 --> 00:04:03,060 because HTML is basically based on XML. 85 00:04:03,060 --> 00:04:06,860 It is just XML in the end but very important, 86 00:04:06,860 --> 00:04:11,260 HTML is standardized, XML is not. 87 00:04:11,260 --> 00:04:16,260 So HTML is a standardized version of XML, you could say. 88 00:04:16,290 --> 00:04:19,110 So when you use XML for your own data 89 00:04:19,110 --> 00:04:22,190 for sending your own data to your own server, 90 00:04:22,190 --> 00:04:24,350 you can structure it however you want 91 00:04:24,350 --> 00:04:27,320 and you can invent any XML tags 92 00:04:27,320 --> 00:04:29,420 because you will also write the code 93 00:04:29,420 --> 00:04:32,070 for parsing this on the server. 94 00:04:32,070 --> 00:04:34,870 So as long as you know which text you're using 95 00:04:34,870 --> 00:04:36,510 for rapping your data, 96 00:04:36,510 --> 00:04:38,893 you can invent them just as you want. 97 00:04:39,910 --> 00:04:42,860 So XML actually is quite useful 98 00:04:42,860 --> 00:04:46,040 for turning unstructured text data 99 00:04:46,040 --> 00:04:49,013 into a structured machine readable form. 100 00:04:49,990 --> 00:04:53,360 However, XML is quite verbose. 101 00:04:53,360 --> 00:04:55,920 XML isn't really used anymore therefore 102 00:04:55,920 --> 00:04:57,970 because it's too verbose. 103 00:04:57,970 --> 00:04:59,790 Adding all these extra text 104 00:04:59,790 --> 00:05:02,670 and wrapping all of that around the main content 105 00:05:02,670 --> 00:05:06,000 is a lot of unnecessary work in the end. 106 00:05:06,000 --> 00:05:09,003 It would work, but it's simply a bit too much. 107 00:05:09,960 --> 00:05:12,720 That's why instead the ecosystem 108 00:05:12,720 --> 00:05:14,860 and the world of web development 109 00:05:14,860 --> 00:05:17,170 moved towards a different data format, 110 00:05:17,170 --> 00:05:18,463 which is called a JSON, 111 00:05:19,360 --> 00:05:22,133 which stands for JavaScript Object Notation. 112 00:05:23,420 --> 00:05:25,620 Now JSON looks like this 113 00:05:25,620 --> 00:05:27,390 and as you can already tell, 114 00:05:27,390 --> 00:05:29,960 this is way more condensed. 115 00:05:29,960 --> 00:05:32,350 It's way easier to read for humans 116 00:05:32,350 --> 00:05:36,070 and still totally machine readable as well, 117 00:05:36,070 --> 00:05:39,590 because it also has this key value format 118 00:05:39,590 --> 00:05:42,950 just as we have it in JavaScript objects. 119 00:05:42,950 --> 00:05:46,160 And we did actually already work with JSON before 120 00:05:46,160 --> 00:05:48,870 in this course when we stored the data 121 00:05:48,870 --> 00:05:52,200 in JSON files on the server for example. 122 00:05:52,200 --> 00:05:54,600 There, we didn't explore it too much, 123 00:05:54,600 --> 00:05:55,433 but in the end here, 124 00:05:55,433 --> 00:05:59,430 we also already used this data format for storing data 125 00:05:59,430 --> 00:06:03,773 in a machine readable yet concise way in text files. 126 00:06:04,850 --> 00:06:07,210 Now, the idea behind JSON is simple. 127 00:06:07,210 --> 00:06:08,470 In the end this really looks 128 00:06:08,470 --> 00:06:10,760 a lot like JavaScript objects, 129 00:06:10,760 --> 00:06:13,060 it follows the structure you would use 130 00:06:13,060 --> 00:06:14,850 for JavaScript objects 131 00:06:14,850 --> 00:06:17,860 and the key difference is that all these keys, 132 00:06:17,860 --> 00:06:21,500 all these property names like title or comment texts 133 00:06:21,500 --> 00:06:24,040 are wrapped between double quotes 134 00:06:24,040 --> 00:06:26,500 and you have to use double quotes here 135 00:06:26,500 --> 00:06:28,890 and you must not omit them. 136 00:06:28,890 --> 00:06:33,890 And text values, strings also are wrapped by double quotes. 137 00:06:34,380 --> 00:06:36,170 So unlike in JavaScript, 138 00:06:36,170 --> 00:06:38,750 single quotes are not allowed, 139 00:06:38,750 --> 00:06:40,730 because this is not JavaScript, 140 00:06:40,730 --> 00:06:42,870 this is a text file, a text format, 141 00:06:42,870 --> 00:06:47,170 and it's just a special way of structuring text content. 142 00:06:47,170 --> 00:06:49,070 And other values like numbers, 143 00:06:49,070 --> 00:06:51,410 booleans or also nested arrays 144 00:06:51,410 --> 00:06:55,330 or nested objects are also supported in JSON. 145 00:06:55,330 --> 00:06:56,730 So therefore it is actually 146 00:06:56,730 --> 00:06:59,430 a good way of structuring text content 147 00:06:59,430 --> 00:07:01,010 in a machine readable way 148 00:07:01,010 --> 00:07:02,890 with all the features you would need 149 00:07:02,890 --> 00:07:07,210 for describing any piece of data to a computer. 150 00:07:07,210 --> 00:07:09,913 And that's why we typically use JSON these days. 151 00:07:10,760 --> 00:07:12,740 Now that was a little bit of extra history, 152 00:07:12,740 --> 00:07:17,210 but it explains why XML is a solution to a problem 153 00:07:17,210 --> 00:07:20,613 which we can now solve in a more convenient way with JSON. 154 00:07:21,620 --> 00:07:23,360 And despite its name, 155 00:07:23,360 --> 00:07:26,120 the XMLHttpRequest object 156 00:07:26,120 --> 00:07:28,720 which you can still use in your JavaScript code 157 00:07:28,720 --> 00:07:31,460 does not just work with XML, 158 00:07:31,460 --> 00:07:34,360 it also works perfectly fine with JSON 159 00:07:34,360 --> 00:07:36,040 and that is the data format 160 00:07:36,040 --> 00:07:38,770 which is therefore typically chosen these days 161 00:07:38,770 --> 00:07:41,210 for sending data behind the scenes 162 00:07:41,210 --> 00:07:44,670 from inside your JavaScript code to a server, 163 00:07:44,670 --> 00:07:47,323 for example, with the XMLHttpRequest. 164 00:07:48,350 --> 00:07:52,440 But that is all why the term Ajax is a bit dated. 165 00:07:52,440 --> 00:07:54,780 It stands for the general concept, 166 00:07:54,780 --> 00:07:59,550 not for the exact words that make up this Ajax term. 167 00:07:59,550 --> 00:08:02,670 The asynchronous part still is correct 168 00:08:02,670 --> 00:08:04,250 because it's asynchronous, 169 00:08:04,250 --> 00:08:06,950 we send a request which can take a couple of seconds 170 00:08:06,950 --> 00:08:08,470 and we wait for the response 171 00:08:08,470 --> 00:08:11,440 before we continue with this request specific code, 172 00:08:11,440 --> 00:08:14,070 but the XML part in the Ajax term 173 00:08:14,070 --> 00:08:15,920 simply doesn't matter anymore, 174 00:08:15,920 --> 00:08:19,440 instead there we typically send JSON data. 175 00:08:19,440 --> 00:08:22,800 But Ajax describes the idea of sending requests 176 00:08:22,800 --> 00:08:25,990 behind the scenes with JavaScript. 177 00:08:25,990 --> 00:08:28,080 Now that was a lot of theory 178 00:08:28,080 --> 00:08:29,930 we're almost done with it, 179 00:08:29,930 --> 00:08:32,570 but there still is the fetch function left, 180 00:08:32,570 --> 00:08:33,990 which we can also use 181 00:08:33,990 --> 00:08:37,280 and which I mentioned before is an alternative 182 00:08:37,280 --> 00:08:40,763 to the built in XMLHttpRequest object. 183 00:08:41,600 --> 00:08:44,850 The fetch function is also built into the browser 184 00:08:44,850 --> 00:08:47,540 and just like XMLHttpRequest, 185 00:08:47,540 --> 00:08:49,620 it's a functionality built into 186 00:08:49,620 --> 00:08:51,570 browser-side JavaScript code 187 00:08:51,570 --> 00:08:54,360 that allows you to send HTTP requests 188 00:08:54,360 --> 00:08:55,600 from inside your code 189 00:08:55,600 --> 00:08:59,370 and to then handle the responses for those requests. 190 00:08:59,370 --> 00:09:02,050 The difference is that the fetch function 191 00:09:02,050 --> 00:09:05,740 was only added to JavaScript a couple of years ago, 192 00:09:05,740 --> 00:09:08,120 and therefore it's a way more modern 193 00:09:08,120 --> 00:09:09,803 than XMLHttpRequest. 194 00:09:10,950 --> 00:09:15,070 It uses modern JavaScript features like promises for 195 00:09:15,070 --> 00:09:19,330 handling the asynchronous nature of this function, 196 00:09:19,330 --> 00:09:22,810 so for defining the code that should eventually run 197 00:09:22,810 --> 00:09:25,467 once you got a respond sensor on. 198 00:09:25,467 --> 00:09:28,020 XMLHttpRequest out of the box 199 00:09:28,020 --> 00:09:30,640 does not support promises. 200 00:09:30,640 --> 00:09:32,410 The access library, 201 00:09:32,410 --> 00:09:35,930 which is based on XMLHttPRequests on the other end 202 00:09:35,930 --> 00:09:37,490 would support promises, 203 00:09:37,490 --> 00:09:39,530 so you still can get that feature there 204 00:09:39,530 --> 00:09:41,690 if you use an extra library. 205 00:09:41,690 --> 00:09:42,880 For the fetch function, 206 00:09:42,880 --> 00:09:44,680 promise support is built in 207 00:09:44,680 --> 00:09:48,440 and promises simply make handling asynchronous code 208 00:09:48,440 --> 00:09:52,160 and asynchronous operations a bit more convenient 209 00:09:52,160 --> 00:09:54,900 as discussed in the more advanced JavaScript 210 00:09:54,900 --> 00:09:57,203 core section earlier in this course. 211 00:09:58,440 --> 00:10:01,930 Now it's easier to use than XMLHttPRequest, 212 00:10:01,930 --> 00:10:04,100 it's actually relatively straightforward 213 00:10:04,100 --> 00:10:05,920 to use I would argue. 214 00:10:05,920 --> 00:10:08,500 And it's therefore is a great alternative 215 00:10:08,500 --> 00:10:11,350 to this XMLHttPRequest object 216 00:10:11,350 --> 00:10:14,120 or libraries like Axios. 217 00:10:14,120 --> 00:10:15,060 In the end though, 218 00:10:15,060 --> 00:10:16,750 you can use either approach 219 00:10:16,750 --> 00:10:19,390 and if you consult 10 different tutorials 220 00:10:19,390 --> 00:10:21,790 or blog posts out there in the world, 221 00:10:21,790 --> 00:10:23,580 you will see a lot of blog posts 222 00:10:23,580 --> 00:10:25,920 or tutorials that use Axios 223 00:10:25,920 --> 00:10:27,862 and a lot of blog posts and tutorials 224 00:10:27,862 --> 00:10:30,470 that use the fetch function. 225 00:10:30,470 --> 00:10:32,560 In this course in this section however, 226 00:10:32,560 --> 00:10:34,150 we'll use this fetch function 227 00:10:34,150 --> 00:10:35,440 since we don't need to use 228 00:10:35,440 --> 00:10:38,200 an extra library to get started with that. 229 00:10:38,200 --> 00:10:41,460 And with all of that, that was the theory. 230 00:10:41,460 --> 00:10:43,440 Now to make things clear up, 231 00:10:43,440 --> 00:10:46,380 we'll leave the theory and dive into decode, 232 00:10:46,380 --> 00:10:48,290 dive into an example project 233 00:10:48,290 --> 00:10:51,150 and see how we can use this fetch function 234 00:10:51,150 --> 00:10:53,540 to send such behind the scenes requests 235 00:10:53,540 --> 00:10:56,533 and how we can then handle the responses we get back.