WEBVTT 0 00:00.290 --> 00:03.080 Ah, I love doing this stuff. 1 00:03.530 --> 00:05.380 What is it I want to show you now? 2 00:05.390 --> 00:10.700 Well, as I mentioned, there are 2 ways we can submit data to a server via a form, 3 00:10.700 --> 00:11.030 right? 4 00:11.030 --> 00:15.080 We can do it on the form wrapper itself by using the action attribute, 5 00:15.080 --> 00:16.160 the method attribute. 6 00:16.190 --> 00:21.890 We've done this many times before. But I've also now mentioned that we can use AJAX. 7 00:21.920 --> 00:22.610 (sound effect: What?) 8 00:22.640 --> 00:23.780 Whaaat? 9 00:23.810 --> 00:26.030 What is AJAX all about? 10 00:26.030 --> 00:29.570 Well, I don't want you to get bogged down in all of the detail. 11 00:29.690 --> 00:34.730 AJAX just stands for Asynchronous JavaScript and XML - 12 00:35.000 --> 00:37.130 AJAX. And AJAX is pretty cool. 13 00:37.130 --> 00:44.180 It allows us to basically submit data to servers and retrieve data without implementing a page refresh. 14 00:44.180 --> 00:45.670 So it's very, very useful. 15 00:45.680 --> 00:48.890 We also not limited by the types of methods. 16 00:48.890 --> 00:54.410 Remember, when we're dealing with the method attribute on forms, we can only have GET or POST. 17 00:54.530 --> 00:56.090 That's not the case with AJAX. 18 00:56.090 --> 01:00.060 If you need to update something in a database, you can send it via the update method, 19 01:00.060 --> 01:01.320 put, delete, 20 01:01.320 --> 01:01.770 etc 21 01:01.770 --> 01:02.280 etc. 22 01:02.280 --> 01:03.840 "But Clyde, these are just words." 23 01:03.840 --> 01:05.100 And you are 100% right. 24 01:05.130 --> 01:06.930 Nothing beats an example. 25 01:06.930 --> 01:09.030 So why don't I hop over to the editor, 26 01:09.030 --> 01:10.710 why don't we start up a server? 27 01:11.070 --> 01:12.780 I think I might use PHP here. 28 01:13.050 --> 01:15.180 I could have used Node.js, but I'm just going to use PHP. 29 01:15.420 --> 01:19.590 And then why don't we use AJAX. And I'm not going to use the new Fetch API. 30 01:19.620 --> 01:24.090 I'm just going to stick with the traditional AJAX because once you understand that just me picking up 31 01:24.090 --> 01:26.250 the new Fetch API will be very, very simple. 32 01:26.250 --> 01:27.660 So we're going to use AJAX. 33 01:27.750 --> 01:29.230 Let's code up a form. 34 01:29.250 --> 01:33.870 Let's start up a server, and let's submit our data to a server. 35 01:33.870 --> 01:40.770 It's going to be super exciting. But we're going to use AJAX! Sit back, grab a coffee and enjoy. 36 01:40.800 --> 01:41.390 See you now. 37 01:43.280 --> 01:47.930 Before we start coding, I just want to show you exactly what it is we're going to create. 38 01:47.930 --> 01:49.120 It's going to be really fun. 39 01:49.130 --> 01:51.350 You can see here we've got a very simple form. 40 01:51.380 --> 01:55.040 I know it looks ugly, but I don't care about the CSS. 41 01:55.040 --> 02:00.530 I want to show you how AJAX works and I want to submit this form to a PHP server. 42 02:00.530 --> 02:03.120 So, what do I want to create with you right now? 43 02:03.140 --> 02:04.790 Well, let's try and submit this form. 44 02:05.600 --> 02:06.200 Look at that. 45 02:06.200 --> 02:07.370 We get an error message. 46 02:07.370 --> 02:09.200 Your funky username is required. 47 02:09.230 --> 02:10.550 Choose a food man. 48 02:10.550 --> 02:12.740 But if we go to our HTML, 49 02:13.580 --> 02:14.630 look at our index file. 50 02:15.630 --> 02:19.110 There is no required attribute on the input elements. 51 02:19.140 --> 02:19.990 Can you see? 52 02:20.010 --> 02:24.530 So what this means is that we are performing server side validation. 53 02:24.540 --> 02:25.350 Wow. 54 02:25.350 --> 02:25.710 How awesome. 55 02:25.740 --> 02:32.970 Of course, if the user chooses username and tries to submit the form, we only get an error now associated 56 02:32.970 --> 02:34.590 with picking the favorite food. 57 02:34.620 --> 02:39.870 If the user doesn't have a username but puts their favorite food as grass, click submit, 58 02:39.900 --> 02:43.620 of course, only the username is required. 59 02:43.620 --> 02:48.690 The user can then fill it in, click submit and we are successful 60 02:48.690 --> 02:54.010 here. We get displayed a success message back from the server saying everything has been done. 61 02:54.030 --> 02:55.750 How awesome is this? 62 02:55.770 --> 02:58.380 And this is what I want us to create. 63 02:58.410 --> 03:01.710 It's going to be very, very simple. Like I mentioned, 64 03:01.740 --> 03:03.110 here's our index file. 65 03:03.120 --> 03:06.750 You'll notice that we're using AJAX right? On this form wrapper, 66 03:06.780 --> 03:08.610 there is no action attribute. 67 03:08.640 --> 03:10.560 There is no method attribute. 68 03:10.560 --> 03:14.700 And as I mentioned previously, when we're using AJAX, we're using JavaScript. 69 03:14.700 --> 03:16.360 So that's why I've got the script tag here. 70 03:16.360 --> 03:21.850 We grab all our elements, we're listening for a submit event on the actual form, we prevent the page 71 03:21.850 --> 03:26.470 default refresh from happening, and then we're using AJAX. Specifically, 72 03:26.470 --> 03:28.960 I'm going to be using this XHR object. 73 03:28.990 --> 03:30.850 Don't worry too much about understanding the code. 74 03:30.850 --> 03:35.590 I'm going to be writing this code up from scratch with you in real time. 75 03:35.590 --> 03:41.680 In fact, I actually already coded this up in real time with you and I've just obviously used the end 76 03:41.680 --> 03:45.880 result of the code to film this introduction video. 77 03:45.880 --> 03:47.170 So there we go. 78 03:47.170 --> 03:48.460 Hope it's making sense. 79 03:48.490 --> 03:49.600 Try and give it a go. 80 03:49.600 --> 03:51.820 At least just try build the HTML form. 81 03:51.820 --> 03:54.610 Don't worry about building the PHP file and then AJAX. 82 03:54.610 --> 03:58.210 I know I haven't taught that yet, so we're going to go through that together. 83 03:58.210 --> 03:59.380 I seriously can't wait. 84 03:59.380 --> 04:00.340 I'm super amped [excited]. 85 04:00.370 --> 04:02.080 See you in the next lecture.