1 00:00:01,060 --> 00:00:09,590 Welcome back in the previous videos we learned about HTTP and JSON. We learned that we can send requests 2 00:00:09,650 --> 00:00:14,830 and get responses. But there's one issue. Up until now 3 00:00:14,920 --> 00:00:23,720 every time we need to communicate with the server we make that request then the browser when it receives 4 00:00:23,870 --> 00:00:29,930 the response does a page refresh. Originally 5 00:00:30,810 --> 00:00:35,710 page loading on the web was simple you'd send a request for a web site to a server. 6 00:00:35,940 --> 00:00:43,350 And as long as nothing went wrong the assets would be downloaded by the web page and displayed on your 7 00:00:43,350 --> 00:00:44,150 computer. 8 00:00:45,280 --> 00:00:51,820 The trouble with this model is that whenever you want to update any parts of the page for example display 9 00:00:51,820 --> 00:00:59,390 a new set of products like on Amazon. Well you'll have to load the entire program again, 10 00:00:59,510 --> 00:01:09,050 even the outline, even the navigation bar at the top. Everything had to get reloaded- a complete page refresh. 11 00:01:09,080 --> 00:01:16,070 This is extremely wasteful and results in a poor user experience especially as pages get larger and more 12 00:01:16,070 --> 00:01:17,770 complex. 13 00:01:17,930 --> 00:01:20,220 You can think of it on the Udemy website. 14 00:01:20,810 --> 00:01:34,640 If we go to Udemy, well if I click on let's say marketing, The top bar you will remain. Did you see that? 15 00:01:34,640 --> 00:01:37,230 It's a nice user experience. 16 00:01:37,520 --> 00:01:41,500 I can click on tabs and I won't get a complete page refresh. 17 00:01:41,510 --> 00:01:48,630 It's -well it loads data automatically on the page. 18 00:01:48,640 --> 00:01:55,450 Now this issue that we had here led to creation of technologies that allow web pages to request small 19 00:01:55,450 --> 00:02:04,520 chunks of data such as HTML, XML, plain text, JSON and display them only when needed. 20 00:02:05,740 --> 00:02:07,990 Helping to solve this refresh problem. 21 00:02:09,340 --> 00:02:14,010 And the technology was called AJAX. 22 00:02:14,040 --> 00:02:22,470 It allows you to read from a web server after the page has loaded and update a web page without reloading 23 00:02:22,470 --> 00:02:31,610 the page. And finally send data in the background while the user is interacting with the Website. 24 00:02:31,660 --> 00:02:40,000 It was actually pioneered by Google in 2006 and now is what we expect of websites and any web app you 25 00:02:40,000 --> 00:02:42,790 see online uses Ajax now. 26 00:02:42,800 --> 00:02:50,920 You see Google had this big problem when we're searching something, well, you would initially type 27 00:02:50,920 --> 00:02:56,430 in 'apple' and it would do a complete page refresh. 28 00:02:56,430 --> 00:03:03,270 But now with this I can maintain the top bar and have this loaded. 29 00:03:03,410 --> 00:03:05,050 I can even have suggestions 30 00:03:07,980 --> 00:03:09,190 Brought up from the server. 31 00:03:09,300 --> 00:03:17,070 And this is all a response from the server saying these are some of the suggestions based on 32 00:03:17,080 --> 00:03:18,200 Apple store. 33 00:03:18,650 --> 00:03:24,410 So it was a big problem for Google and they were able to solve it with Ajax but now we all have this 34 00:03:24,410 --> 00:03:25,650 ability. 35 00:03:25,670 --> 00:03:27,530 So how are we able to do this. 36 00:03:27,530 --> 00:03:37,430 "What is Ajax?" AJAX is just a technology- a method of combining pieces together to achieve this. 37 00:03:37,590 --> 00:03:46,280 And it was achieved using a tool that browsers built and it was called XML HTTP request. 38 00:03:46,620 --> 00:03:49,670 It looked something like this. 39 00:03:50,130 --> 00:03:58,110 You created a new XML HTTP request object. As you can see it looks a little bit tough. 40 00:03:58,980 --> 00:04:08,810 You make a request -you make a get request at this URL you say onload when it loads. If the 41 00:04:08,810 --> 00:04:15,200 status the response is greater than 200 or less than 400. 42 00:04:15,200 --> 00:04:16,300 It's a success. 43 00:04:16,310 --> 00:04:25,880 We're going to parse the response text remember because we're receiving a string from the server. If it's 44 00:04:25,880 --> 00:04:36,640 not a success well we can return an error and we then send our request and also listen for any errors. 45 00:04:37,320 --> 00:04:44,440 It looks pretty tough but it is things that we've gone over. But don't worry we actually don't do this 46 00:04:44,440 --> 00:04:44,770 anymore. 47 00:04:44,770 --> 00:04:49,560 This was the old way of doing it when Ajax was first introduced. 48 00:04:49,570 --> 00:04:52,980 jQuery came along and said well this is kind of tough to do 49 00:04:52,980 --> 00:04:58,320 every time. We'll make it easy for you by just doing this. 50 00:04:58,550 --> 00:05:01,820 And that was another part of the reason that jQuery was popular. 51 00:05:01,820 --> 00:05:05,700 We can just do Ajax requests doing this method. 52 00:05:06,050 --> 00:05:11,690 But now there's actually an even nicer newer way that we've used actually when we build our react 53 00:05:11,690 --> 00:05:17,220 app and it's supported by the browsers and that is called fetch. 54 00:05:17,510 --> 00:05:26,930 As you remember it was fetch at the URL and then we did this '.then(response)' and we received a response. 55 00:05:26,930 --> 00:05:31,790 Now this is a really good thing because page updates are a lot quicker and you don't have to wait for 56 00:05:31,790 --> 00:05:33,140 the page to refresh. 57 00:05:33,140 --> 00:05:36,660 Meaning that the site feels faster and more responsive. 58 00:05:38,390 --> 00:05:44,250 Also less data is downloaded on each update, meaning less wasted bandwidth. 59 00:05:44,750 --> 00:05:50,840 And this is a major, major issue especially on mobile devices where internet connection might not be 60 00:05:50,840 --> 00:05:52,460 as good. 61 00:05:52,580 --> 00:06:03,370 Ajax allows web pages and by extension web applications to change content dynamically and it is everywhere. 62 00:06:04,080 --> 00:06:06,510 It is something that is just very nice. 63 00:06:06,510 --> 00:06:14,140 It looks intimidating but it's just a matter of doing this fetch that does HTTP for you and all you 64 00:06:14,140 --> 00:06:21,090 do is say if you want to do a GET, a POST and add some JSON data to that request. 65 00:06:21,220 --> 00:06:29,460 So let's review again what happens with Ajax. An event occurs on a web page such as logging in and I 66 00:06:29,460 --> 00:06:34,200 click sign in. XML HTTP request object- 67 00:06:34,290 --> 00:06:41,280 Again something that web browsers have implemented is created and that's created using javascript. 68 00:06:41,560 --> 00:06:49,800 XML HTTP request object sends a request to the web server the server processes the request and then the 69 00:06:49,920 --> 00:06:54,500 server sends a response back to the web page. 70 00:06:54,590 --> 00:07:03,650 The response is read by javascript and the user is able to login. At the same time only updating a small 71 00:07:03,650 --> 00:07:06,490 portion of the window. 72 00:07:06,530 --> 00:07:12,380 That is what a single page application is and its a word that you've probably heard before and it's a trend 73 00:07:12,410 --> 00:07:21,770 in how to make web apps. Where you load a base an almost empty page and build the content on the fly 74 00:07:21,770 --> 00:07:25,010 based on the data fetched from the server. 75 00:07:25,010 --> 00:07:27,790 Let's go back to you Udemy. 76 00:07:27,900 --> 00:07:36,270 When I click on a course, let's do 'public relations' you see that this is loading one at a time. I had 77 00:07:36,810 --> 00:07:38,040 the top bar loaded. 78 00:07:38,160 --> 00:07:41,350 Then I had a pause and then the rest loaded. 79 00:07:41,400 --> 00:07:45,900 If I click on 'Explore course' you'll see again that top bar loaded. 80 00:07:45,930 --> 00:07:50,540 Other parts of the web slowly dynamically load. 81 00:07:50,620 --> 00:07:59,820 And again if I go back to 'photography' for example again parts of the web page load dynamically and that's 82 00:07:59,820 --> 00:08:06,890 the beauty. These applications nearly never do a full reload they destroy the previous content all or 83 00:08:06,890 --> 00:08:12,270 a part of it and we build it based on new data - new page. 84 00:08:12,470 --> 00:08:14,760 And this might sound familiar to you. 85 00:08:15,720 --> 00:08:19,350 Do you remember how we built our 'robofriends' app. 86 00:08:19,740 --> 00:08:24,950 We fetched this URL that gave us users. 87 00:08:25,330 --> 00:08:30,260 So now that we understand these concepts let's go line by line and see what happens. 88 00:08:30,280 --> 00:08:34,789 I used fetch -based on what I said, Fetch should be part of the window object right? 89 00:08:34,990 --> 00:08:41,500 Let's check. If I open up the console and I do 90 00:08:41,730 --> 00:08:43,870 'window.fetch' yeah 91 00:08:43,940 --> 00:08:53,520 fetch is a function that we can use and this URL if you remember returns for us- 92 00:08:53,620 --> 00:08:54,200 What is that? 93 00:08:54,220 --> 00:08:56,540 Yeah, a JSON object. 94 00:08:56,800 --> 00:09:05,500 And this JSON object, fetch allows us to do something called response - 'response.json()'. 95 00:09:05,840 --> 00:09:08,800 Well let's just do this for now and see what happens. 96 00:09:08,810 --> 00:09:14,750 I'm going to copy and paste this. I'm going to open up the console and you know I'm going to open up 97 00:09:14,750 --> 00:09:17,180 a new tab to show you that you can do this from anywhere. 98 00:09:18,170 --> 00:09:25,770 If I copy and paste this fetch I get something called a promise and this is something in javascript 99 00:09:26,040 --> 00:09:27,630 that you'll get used to. 100 00:09:27,750 --> 00:09:34,050 Promise is saying "hey I'm making a request to somewhere over the Internet and I promise to let you know 101 00:09:34,050 --> 00:09:37,160 when I have this value returned." 102 00:09:37,650 --> 00:09:42,310 So the way you access promise is - so you have this: 'once this is returned 103 00:09:42,360 --> 00:09:43,540 give me the value'. 104 00:09:43,620 --> 00:09:45,540 You do '.then' 105 00:09:45,660 --> 00:09:51,600 and it gives you the response. If I add to my previous request .then 106 00:09:51,920 --> 00:10:05,520 And I do 'response console.log(response)'. 107 00:10:05,690 --> 00:10:11,510 Look at that I get a response. Status 200 we'll remember this. 108 00:10:11,720 --> 00:10:12,520 OK that's good. 109 00:10:12,530 --> 00:10:19,690 And we also get this body but it says breathable stream. And fetch- 110 00:10:19,850 --> 00:10:25,930 I mean we learned about JSON.parse to parse JSON. 111 00:10:26,340 --> 00:10:32,300 But fetch actually comes with its own method called well "json". 112 00:10:32,450 --> 00:10:39,770 So on this response if we do "json" it will actually convert it for us. 113 00:10:39,770 --> 00:10:49,310 Let's see. If I go back to that request again I get a response. If instead of console logging, I say 114 00:10:49,380 --> 00:10:51,320 'response.json()' 115 00:10:51,530 --> 00:10:55,800 In that case, I get a promise again. 116 00:10:55,800 --> 00:11:03,300 So that means we need to do .then to receive whenever this returns the promise which is the value. 117 00:11:03,680 --> 00:11:07,440 So again I go up and do .then 118 00:11:07,600 --> 00:11:13,780 And in this case let's see what data we receive we get data and we'll console.log data. 119 00:11:17,680 --> 00:11:31,800 If i press enter. Look at that we receive our users- the same users that were here. 120 00:11:31,880 --> 00:11:40,160 So you see now that we simply use the fetch API which allows us to do an AJAX call after the component 121 00:11:40,160 --> 00:11:40,740 mounted. 122 00:11:40,880 --> 00:11:48,830 So once our robo friends app was loaded we made an Ajax request using the fetch API. 123 00:11:49,100 --> 00:11:53,350 We got a response which was a promise. 124 00:11:53,360 --> 00:12:01,190 So we had to do that then and this response and this is just standard that anytime you do fetch you'll 125 00:12:01,190 --> 00:12:03,420 just remember doing .json 126 00:12:03,710 --> 00:12:11,270 I converted this into something that well we can use in javascript and because this returned a promise 127 00:12:11,270 --> 00:12:21,440 we did .then we got the users and now we have the users object and we never had to refresh the page. 128 00:12:21,510 --> 00:12:29,870 And by the way if you want this JSON whenever you're accessing it to look prettier and be a little 129 00:12:29,870 --> 00:12:36,560 bit more readable I am using a Chrome extension called 'JSONView'. 130 00:12:36,590 --> 00:12:37,130 It's free. 131 00:12:37,130 --> 00:12:39,580 You just add it Chrome it automatically does it for you. 132 00:12:39,590 --> 00:12:43,000 I highly recommend it. Okay 133 00:12:43,460 --> 00:12:46,030 let's go back to this 134 00:12:46,040 --> 00:12:47,450 -this should make sense now. 135 00:12:47,810 --> 00:12:56,670 We now have the ability to dynamically load our web pages make single page applications using AJAX and 136 00:12:56,750 --> 00:13:07,640 Ajax is a combination of tools of using the fetch API, using HTTP, using JSON to communicate with 137 00:13:07,640 --> 00:13:08,630 servers. 138 00:13:09,080 --> 00:13:20,000 And now we have a complete picture of our front end. Our front end can have HTML, CSS, javascript, react. 139 00:13:20,000 --> 00:13:31,670 We can use AJAX to communicate with servers and we use JSON data to send data over the wire. Really 140 00:13:31,670 --> 00:13:33,660 excited for the next couple of videos. 141 00:13:34,500 --> 00:13:35,470 So I'll see in that one. Bye-Bye.