WEBVTT 0 00:00.290 --> 00:01.680 Welcome back. 1 00:01.700 --> 00:03.680 This is such a cool example, isn't it? 2 00:03.710 --> 00:05.000 Let's go to our index file. 3 00:05.180 --> 00:05.990 And here we are. 4 00:05.990 --> 00:08.600 We've literally got a very, very simple index file. 5 00:08.690 --> 00:12.340 We've got no action attribute on the form because remember, we're going to be using AJAX. 6 00:12.350 --> 00:18.170 We've coded up our server side file that's going to give us error messages or success messages depending 7 00:18.170 --> 00:20.510 on whether the form is valid or not. 8 00:21.380 --> 00:22.340 So how do we type AJAX? 9 00:23.090 --> 00:23.840 How does it work? 10 00:23.840 --> 00:24.650 What do we do? 11 00:25.100 --> 00:27.060 Well, it is JavaScript, right? 12 00:27.080 --> 00:33.020 AJAX stands for Asynchronous JavaScript and XML and we know all JavaScript has to be included within 13 00:33.020 --> 00:33.860 script tags. 14 00:33.890 --> 00:39.290 The first thing I want to do is I want to grab our form and inputs. 15 00:39.470 --> 00:42.560 That's the first thing I want to do. I just want to grab them and put them in variables 16 00:42.560 --> 00:44.240 so if we need them later, we can use them. 17 00:44.240 --> 00:50.960 So for example, let's grab our form, let's access our document, querySelector() 18 00:52.250 --> 00:53.660 and we want to grab our form. 19 00:53.990 --> 00:54.590 There we go. 20 00:54.770 --> 00:57.750 We've literally got our form. And we can also grab our inputs, right? 21 00:57.770 --> 01:02.960 We can grab our username input, do the same thing, document, 22 01:03.050 --> 01:05.190 but this time, let me just mix things up. 23 01:05.210 --> 01:06.770 Let me say getElementById(), 24 01:07.160 --> 01:09.440 remember we gave it an ID of ... 25 01:12.180 --> 01:13.920 ID of name. 26 01:17.740 --> 01:22.570 The reason we can't use, by the way, querySelector() is that only selects one element. 27 01:23.190 --> 01:27.360 And as you can see, we've got two input elements. 28 01:28.170 --> 01:32.070 That's why I didn't access the querySelector(), I accessed getElementById(). 29 01:32.520 --> 01:37.050 We can do exactly the same thing now for the food input. 30 01:37.080 --> 01:43.110 We can access our document object. On here, getElementById() and we gave it an ID of food. 31 01:43.950 --> 01:44.490 If I scroll up, 32 01:44.550 --> 01:49.020 I know I'm going slow, but you need to stay with me here because we're going to get more complex soon. 33 01:49.590 --> 01:51.330 We gave it an ID of food. 34 01:52.210 --> 01:52.750 So there we go. 35 01:52.750 --> 01:59.590 We've got both of our input elements, but I also want to grab our wrappers, our two div wrappers. 36 02:01.290 --> 02:09.060 Let's grab the one called divName. That we can just document.getElementById(), and we gave it an ID 37 02:09.090 --> 02:12.120 of usernameWrapper. 38 02:13.210 --> 02:17.980 You can do exactly the same thing, but now we can say divFood, 39 02:18.820 --> 02:22.480 document.getElementById() and ID we gave 40 02:22.480 --> 02:25.000 it was foodWrapper. 41 02:25.540 --> 02:26.710 And I think that's it for now. 42 02:26.710 --> 02:29.770 I mean, if I've missed something, we can always, always grab it later. 43 02:29.770 --> 02:31.120 So how do we kick everything off? 44 02:31.120 --> 02:32.950 Well, we need to listen for an event. 45 02:32.950 --> 02:35.200 I only want to start executing code 46 02:35.200 --> 02:39.010 when the user clicks on this, "Send my details" button. 47 02:39.010 --> 02:42.610 In other words, when the submit event has been fired on the form. 48 02:42.610 --> 02:48.790 So in order to listen for the submit event on the form, we grab our form variable, we then add an 49 02:48.790 --> 02:49.690 event listener. 50 02:50.050 --> 02:52.750 The event we want to listen for is the submit event. 51 02:52.750 --> 02:56.050 And then of course we want to execute our callback, right? 52 02:56.230 --> 03:00.010 And just to show you it's working, we can console log 53 03:00.990 --> 03:01.470 "hi". 54 03:01.650 --> 03:02.340 Here we go. 55 03:03.030 --> 03:04.830 Let's access the console. 56 03:08.970 --> 03:11.130 And let's just click submit and we get "hi". 57 03:11.160 --> 03:12.510 So we know it's working. 58 03:12.510 --> 03:17.490 But you'll notice every time the user clicks on submit, we get a browser refresh. 59 03:17.910 --> 03:19.410 And I don't want that to happen. 60 03:21.970 --> 03:23.440 We've done this before as well, 61 03:23.440 --> 03:32.020 but when you use the addEventListener() method, we get given a object, specifically the event object. 62 03:32.140 --> 03:34.990 Usually it's common practice to put it in a variable called "e". 63 03:35.170 --> 03:36.850 We could call it anything we want. 64 03:36.850 --> 03:41.350 And on this event object we've got a method called preventDefault(). 65 03:41.380 --> 03:46.600 It's basically going to prevent the default behavior of the browser, and that is, it's going to prevent 66 03:46.600 --> 03:48.400 the browser from doing its refresh. 67 03:48.400 --> 03:51.960 In fact, it's going to prevent the browser from even sending the data to a server. 68 03:51.970 --> 03:58.630 So if we just refresh now and now the user clicks submit, we don't get a refresh. 69 03:58.780 --> 04:06.160 In fact, we don't even get things appended to the URL. Let me just make it very clear, 70 04:06.160 --> 04:10.630 there is data in each of the input elements, user clicks submit, but nothing happens. 71 04:10.690 --> 04:16.930 This is brilliant because we are now in complete control as to what happens next. What should happen 72 04:16.930 --> 04:17.260 next? 73 04:17.260 --> 04:20.470 Well, the next thing I want to do is I want to grab all of our form data. 74 04:21.280 --> 04:23.380 And we could start doing it ourselves. 75 04:23.380 --> 04:27.890 But I want to use the FormData API given to us by the web. 76 04:27.910 --> 04:33.520 In other words, I want to define our form data in a variable called formData 77 04:34.560 --> 04:38.610 and I want to access a web API called FormData. 78 04:39.420 --> 04:44.550 The FormData is a constructor that just creates a new form data object. 79 04:44.580 --> 04:50.340 When we use it, that object is going to be populated with the form's current key:values using 80 04:50.340 --> 04:56.310 the name property of each element for the keys and their submitted value for the values. 81 04:56.340 --> 04:58.020 And it's super easy to use. 82 04:58.020 --> 05:04.950 We just use a "new" keyword because it is a constructor and of course we access this FormData, 83 05:05.040 --> 05:07.270 you can see my IDE already tells you what it is. 84 05:07.290 --> 05:10.230 We can use it easily with an AJAX request. 85 05:10.230 --> 05:14.400 And of course it takes one argument and the one argument it takes is our entire form. 86 05:14.400 --> 05:17.040 So that's all our form data in this variable. 87 05:17.050 --> 05:21.000 And like I mentioned, we're doing this because we're going to be using AJAX, and the object we're 88 05:21.000 --> 05:26.670 using in AJAX is going to require this form data object when we submit it to the server. 89 05:26.700 --> 05:28.260 Let me just write a comment here. 90 05:28.440 --> 05:31.440 Grabbing our form data. 91 05:32.330 --> 05:37.970 Now what I want to do is, for the first time, I want to set up our AJAX query. 92 05:38.800 --> 05:41.830 They are a few different ways to set up an AJAX query. 93 05:41.830 --> 05:45.160 We could use the new Fetch API but don't want to do that. 94 05:45.160 --> 05:50.920 I want to just show you the old-school way of setting up an XMLHttpRequest object. 95 05:50.950 --> 05:55.390 The reason I want you to know that way is because once you know that way, the Fetch API is going to 96 05:55.390 --> 05:56.950 be super easy for you. 97 05:57.040 --> 06:00.310 Okay, so I'm going to be using the XHR object. 98 06:00.370 --> 06:01.420 Let me show you what I mean. 99 06:03.300 --> 06:07.320 The first thing I want to do, though, before I set up AJAX is I want to define two things. 100 06:07.320 --> 06:11.880 I want to define the URL, aka, where are we going to send the form data to? 101 06:11.880 --> 06:13.770 And I want to define its method. 102 06:14.070 --> 06:17.940 Is it POST, is it DELETE, is it PUT, is it UPDATE, etc etc. 103 06:17.970 --> 06:20.840 So let's define a variable called URL. 104 06:20.880 --> 06:26.820 Let's submit it to the same directory we are in, right, but the php-server-file.php. 105 06:26.940 --> 06:29.580 So that's where we're going to send our form data to. 106 06:29.580 --> 06:34.430 It's almost equivalent if we were on our form element here and we had the action attribute, it's the 107 06:34.440 --> 06:40.020 same thing, but we just putting it now into an AJAX request in a URL. 108 06:40.260 --> 06:43.080 Then let's define its method as POST. 109 06:43.110 --> 06:49.860 It could have easily just have been GET, but I decided to use POST. And now we can actually set up our AJAX. 110 06:49.890 --> 06:57.270 Let's put our AJAX query in a variable called XHR. In order to set up an AJAX query, we accessing the 111 06:57.300 --> 07:01.620 XMLHttpRequest constructor, so we have to use the new keyword. 112 07:01.650 --> 07:07.150 We access this XMLHttpRequest() constructor function. 113 07:07.150 --> 07:12.550 That's nothing we've defined - that's provided to us straight out of the box by the browser. 114 07:13.000 --> 07:13.630 So there we go. 115 07:13.630 --> 07:15.610 We've got our XHR object. 116 07:15.610 --> 07:22.480 Now in order to open and send an AJAX request, we have to first open the request. 117 07:22.510 --> 07:28.690 We then have to define what happens on a successful response and then we have to actually send the request 118 07:28.690 --> 07:29.260 to the server. 119 07:29.260 --> 07:35.080 So let's deal now with opening up our AJAX request. 120 07:35.470 --> 07:36.520 This is step one. 121 07:37.440 --> 07:39.520 Remember these 3 steps, right? 122 07:39.540 --> 07:46.440 Opening up our AJAX request is step 1. To open it up, we access our xhr object, and on here there's a method 123 07:46.440 --> 07:47.460 called open(). 124 07:47.670 --> 07:50.850 And you can see it takes two arguments at least. 125 07:50.850 --> 07:52.410 The first is the method. 126 07:52.410 --> 07:55.230 And we've already defined the method in a variable called method. 127 07:55.230 --> 07:59.070 We've defined our URL in a variable called URL. 128 07:59.720 --> 08:06.800 And then the last argument we can give this open method is whether we want it to be asynchronous or 129 08:06.800 --> 08:07.400 synchronous. 130 08:07.430 --> 08:10.160 We want it to be asynchronous so we can just pass a value of true. 131 08:11.370 --> 08:12.510 Very, very simple. 132 08:13.690 --> 08:16.180 But we've literally opened up our AJAX request. 133 08:16.330 --> 08:24.640 Step two is define what happens on a successful response. 134 08:25.600 --> 08:28.510 Again, there are many ways to do things when it comes to coding. 135 08:28.510 --> 08:32.380 How do I want to now define what happens on a successful response? 136 08:32.410 --> 08:37.720 Well, something you need to bear in mind is that there's an "onreadystatechange" property that's fired through 137 08:37.720 --> 08:39.120 the whole process. 138 08:39.130 --> 08:41.920 You know, when AJAX makes a call to the server, there's an event fired. 139 08:41.920 --> 08:45.040 When the server receives it, there's an event fired ... through the whole chain. 140 08:45.040 --> 08:48.130 Eventually, when it comes back, another event is fired. 141 08:48.370 --> 08:52.900 So what I'm saying is I'm going to be listening for the onreadystatechange, but I'm only really 142 08:52.900 --> 08:57.430 care about when the readyState is 4. And when the readyState is 4, 143 08:57.460 --> 09:02.620 it basically just means the AJAX call has been successful and we have received a response. 144 09:03.230 --> 09:07.550 And I'm going to be listening for when the status is 200, so when everything has been successfully 145 09:07.550 --> 09:08.810 completed, in other words. 146 09:10.040 --> 09:10.910 So let's do that. 147 09:11.090 --> 09:15.890 Like I mentioned, all I want to do is I want to access our AJAX object. 148 09:15.890 --> 09:23.450 I then want to listen for the "onreadystatechange" events that are fired consistently and every time 149 09:23.450 --> 09:27.320 it's fired, we're going to implement a function and execute a function. 150 09:27.320 --> 09:29.510 But we only really care about the one state. 151 09:29.510 --> 09:37.970 And the one state is if this XHR object has a readyState of 4 because we know then it's all complete 152 09:38.270 --> 09:47.390 and I want its status to be 200 because now in this block of code we know that everything has been successfully 153 09:47.390 --> 09:47.870 completed. 154 09:47.870 --> 09:49.190 We know we've got the response. 155 09:49.190 --> 09:50.990 So this is kind of where the meat happens. 156 09:50.990 --> 09:54.590 This is where all the interesting stuff happens. In our server file, 157 09:54.590 --> 10:01.820 if we scroll to the bottom, we know that we've given back the browser this data in JSON format. 158 10:01.820 --> 10:07.700 So when we grab it, I actually want to convert it into a JavaScript object, a nice object that we 159 10:07.700 --> 10:08.420 can work with. 160 10:08.420 --> 10:11.910 So let's define a variable called response. 161 10:11.940 --> 10:16.170 We are going to access this JSON object. 162 10:16.170 --> 10:17.760 This is given to us by the browser. 163 10:17.760 --> 10:25.410 It has a method called parse(), and we want to pass in the actual response. And to access the actual response, 164 10:25.410 --> 10:30.720 we grab our AJAX XHR object and on here there's a property called response. 165 10:32.520 --> 10:33.350 (sneeze. Oh, excuse me). 166 10:33.360 --> 10:34.050 So there we go. 167 10:34.050 --> 10:35.010 We've got our response. 168 10:35.010 --> 10:38.310 And then what do we want to do with this response? 169 10:38.490 --> 10:41.430 Well, let's define the success case. 170 10:41.700 --> 10:43.740 If the response 171 10:44.950 --> 10:47.500 is in a success state. 172 10:47.620 --> 10:51.100 Now, remember, we have the success property on our response, right? 173 10:51.190 --> 10:54.970 If we go here in our response, aka in that data array, 174 10:55.210 --> 10:57.310 we've got a property called success. 175 10:57.310 --> 11:01.150 And if it's in a successful state, we know it's going to be true. 176 11:01.810 --> 11:06.040 So in other words, we're going to say, if this is true, what do we want to happen? 177 11:06.040 --> 11:07.180 Well, very, very easy. 178 11:07.180 --> 11:14.650 We want to access our entire form and change its innerHTML and assign it the value of the message property. 179 11:14.650 --> 11:20.950 Because if we go to our PHP file, we've given our response, our data, a message property and that 180 11:20.950 --> 11:22.270 is our success message. 181 11:23.540 --> 11:25.850 And maybe I should stop here. 182 11:25.880 --> 11:28.370 Yeah, well, you know what I'm going to do? 183 11:28.400 --> 11:29.660 Let me say, 184 11:30.840 --> 11:31.860 failure case. 185 11:32.310 --> 11:34.110 Okay, but I'm not going to code anything yet. 186 11:34.810 --> 11:37.930 What I want to do is I want to send this and let's just test our code. 187 11:38.170 --> 11:39.810 Let's don't go too far before we test. 188 11:39.820 --> 11:41.980 In other words, I want to send our AJAX request. 189 11:41.980 --> 11:47.890 So outside here, I want to do step 3, send our AJAX request. 190 11:48.400 --> 11:50.140 And this is very, very simple. 191 11:50.140 --> 11:56.170 All we have to do is access our AJAX XHR object and of course, access the send() method. 192 11:56.170 --> 12:01.600 And remember, we defined all our form data in the formData variable. 193 12:02.170 --> 12:02.340 Remember? 194 12:02.410 --> 12:03.480 That's why we did it. 195 12:03.490 --> 12:05.620 So what are we sending to the PHP file? 196 12:05.620 --> 12:07.900 We are sending the formData. 197 12:08.810 --> 12:09.800 Let's save this. 198 12:09.830 --> 12:14.300 Now, in order to for this to work, we need a server running. 199 12:14.370 --> 12:16.790 If we go to the browser now, let's just go to the console. 200 12:17.150 --> 12:20.960 If the user types something and click send, it's not going to work. 201 12:21.560 --> 12:22.490 Go to the console. 202 12:22.490 --> 12:24.590 We've got a 405 error - method not allowed. 203 12:24.590 --> 12:32.030 In fact, if we go to the Network tab and hit our post request, our server is not running, so nothing will happen. 204 12:32.030 --> 12:34.660 But what's really cool is we've got this formData, right? 205 12:34.700 --> 12:38.860 So we already know that the form data is being sent in the body correctly. 206 12:38.870 --> 12:42.500 It's just the case that this PHP server file is not found. 207 12:42.590 --> 12:43.850 So why don't we go here, 208 12:43.880 --> 12:48.390 let's kill this current server, which is what I've done, right? 209 12:48.410 --> 12:49.910 And let's start our own server. 210 12:49.910 --> 12:55.190 So let's open up the terminal. And all you have to do is once you've got PHP installed on your device, 211 12:55.190 --> 12:58.610 you can start up your own PHP server on a localhost. 212 12:58.610 --> 13:05.270 All you do is you write the keyword PHP, dash capital S for server, and then we can tell our server 213 13:05.300 --> 13:07.250 on which port to listen to. 214 13:07.280 --> 13:11.100 Here I want to listen to port localhost:8000. 215 13:11.490 --> 13:13.800 We do this and we're done. 216 13:13.800 --> 13:19.950 So now what we can do is we can go to our browser type localhost:8000 and here we go. 217 13:19.950 --> 13:20.910 Here's our form. 218 13:20.910 --> 13:22.230 We literally listening 219 13:24.200 --> 13:24.980 to our form here. 220 13:25.280 --> 13:26.210 Let's go to the console. 221 13:26.240 --> 13:28.460 Clear everything. If we now 222 13:29.440 --> 13:32.050 type in a value in each field and click submit, 223 13:32.080 --> 13:33.130 what do you think will happen? 224 13:35.120 --> 13:36.400 Unexpected token. 225 13:36.460 --> 13:37.420 That shouldn't happen. 226 13:39.610 --> 13:40.050 All right. 227 13:40.050 --> 13:42.720 There's an unexpected curly bracket. 228 13:43.680 --> 13:44.610 Oh, you know why? 229 13:44.850 --> 13:46.800 PHP is very, very picky. 230 13:46.920 --> 13:50.640 We have to end each statement with a semicolon. 231 13:51.120 --> 13:51.900 Silly me. 232 13:52.380 --> 13:53.000 So here we go. 233 13:53.010 --> 13:54.120 Here we go. 234 13:54.150 --> 13:56.010 Else, there should be one here. 235 13:56.190 --> 13:56.800 This looks fine. 236 13:56.810 --> 13:58.050 Let's save this. 237 13:58.090 --> 14:00.540 Right, let's refresh this. 238 14:00.810 --> 14:03.240 Say the user types in each box 239 14:03.240 --> 14:04.200 so we shouldn't get errors. 240 14:04.200 --> 14:05.060 Click submit. 241 14:05.070 --> 14:07.200 And there's our success message. 242 14:07.290 --> 14:08.670 How awesome is that? 243 14:08.850 --> 14:09.850 So there we go. 244 14:09.870 --> 14:10.860 It's all working. 245 14:11.520 --> 14:15.230 And what's really, really cool is that it's all coming from this, right? 246 14:16.780 --> 14:17.130 Cool. 247 14:17.180 --> 14:20.920 Okay. Now I want to deal with this failure case.