WEBVTT 00:00:07.310 --> 00:00:10.400 In this video we're going to get introduced to Ajax. 00:00:10.410 --> 00:00:12.420 So what is Ajax. 00:00:12.420 --> 00:00:21.420 Ajax stands for asynchronous javascript's and ex-MIL and it's used to exchange data between a web page 00:00:21.510 --> 00:00:23.510 and a server. 00:00:23.910 --> 00:00:31.500 Web sites like Facebook Gmail and other Web sites they will use AJAX to change parts of the web page 00:00:32.100 --> 00:00:34.900 without having to reload the page every time. 00:00:35.310 --> 00:00:39.480 So this will make the user experience better and more interactive. 00:00:40.230 --> 00:00:40.950 All right. 00:00:41.100 --> 00:00:47.820 So when our session we will create a few examples where we get to use AJ query to build some Ajax code 00:00:47.820 --> 00:00:48.420 . 00:00:48.870 --> 00:00:57.750 So it starts we're going to be looking at the Facebook Dev and all we are going to do now is to load 00:00:58.110 --> 00:01:04.380 some data from an external file and change the contents of the Facebook div using that data without 00:01:04.380 --> 00:01:05.830 reloading the page. 00:01:06.260 --> 00:01:07.230 OK. 00:01:08.010 --> 00:01:11.120 So first of all let's create a text file somewhere. 00:01:11.320 --> 00:01:12.620 We can create inside a folder. 00:01:12.640 --> 00:01:20.060 We're going to call Ajax and then inside the folder we're going to have a text file. 00:01:20.070 --> 00:01:23.400 Let's call it some data Baltic's. 00:01:23.490 --> 00:01:27.310 So inside is this text file We're going to have some HLL code. 00:01:27.970 --> 00:01:28.500 OK. 00:01:28.880 --> 00:01:33.890 So let's have a couple of paragraphs. 00:01:34.020 --> 00:01:36.690 This is some data. 00:01:37.310 --> 00:01:42.660 Please give it an ID. 00:01:43.020 --> 00:01:45.450 Paragraph 1. 00:01:45.540 --> 00:01:50.950 Let's have a second paragraph ID paragraph two and some text. 00:01:51.020 --> 00:01:54.690 This is some other data only save us. 00:01:55.020 --> 00:01:55.580 OK. 00:01:55.920 --> 00:02:05.250 Now if you go to our file Ajax most H.M. we're going to write some code inside our Bookman's ready function 00:02:05.250 --> 00:02:06.030 . 00:02:06.030 --> 00:02:13.320 So we're going to be accessing the Facebook and loading the content of the text file. 00:02:13.520 --> 00:02:14.770 OK. 00:02:15.510 --> 00:02:17.230 Just change the extension. 00:02:17.260 --> 00:02:18.770 It sticks. 00:02:19.530 --> 00:02:32.190 OK so first let's access the Facebook Dave using its ID Facebook and then we're going to use an AJAX 00:02:32.370 --> 00:02:32.870 method. 00:02:32.880 --> 00:02:37.170 It's the load method is quite simple. 00:02:37.170 --> 00:02:44.840 All we need to do is give us a parameter where we put the location of the file that holds the data. 00:02:44.850 --> 00:02:57.180 So in our case it's Ajax for Slash some teks dots or some data that's text. 00:02:57.570 --> 00:03:00.020 So let's refresh the page and see what happens. 00:03:00.180 --> 00:03:06.600 So we can see that the contents of Facebook has changed and because the data that we loaded from the 00:03:07.020 --> 00:03:07.940 text file. 00:03:08.350 --> 00:03:13.960 Ok Ok let's try something similar with the Apple did. 00:03:14.340 --> 00:03:25.290 So again we're going to be accessing the apple dev using its ID and using the same method same function 00:03:26.130 --> 00:03:27.110 load. 00:03:27.480 --> 00:03:32.310 But this time we don't want to load the full or the entire data. 00:03:32.310 --> 00:03:35.300 We we only want to load the first paragraph. 00:03:35.710 --> 00:03:38.460 So to do that we're going to use the ID of the program. 00:03:38.790 --> 00:03:49.680 So inside the quotes We'll have both the location of our file followed by the ID of the elements we 00:03:49.680 --> 00:03:50.710 are interested in. 00:03:51.060 --> 00:03:53.870 So we need to use the baseline followed by the ID. 00:03:53.880 --> 00:03:55.630 In our case it's paragraph 1. 00:03:56.210 --> 00:03:56.880 Okay. 00:03:57.210 --> 00:04:05.340 And if we refresh the page we can see it does we just at the first paragraph onto the apple day. 00:04:05.860 --> 00:04:06.470 OK. 00:04:06.990 --> 00:04:16.680 So the load function is quite easy function but very powerful Ajax tool to load data from external resources 00:04:16.680 --> 00:04:17.090 . 00:04:17.100 --> 00:04:25.950 So now we're going to move to another function that we can use to load external data well before we 00:04:25.950 --> 00:04:30.750 do that let's just create a button just before Facebook. 00:04:32.480 --> 00:04:34.060 OK. 00:04:35.020 --> 00:04:40.360 And we would like to do is to just refresh the preview. 00:04:40.650 --> 00:04:53.280 So we would like to do is click on the button and load data onto the Microsoft state. 00:04:53.370 --> 00:04:57.450 By this time we're going to use another function for that. 00:04:57.660 --> 00:05:00.660 So so first of all we're going to 00:05:05.880 --> 00:05:12.870 accessed the button we can just use the tag name and only have one there. 00:05:13.420 --> 00:05:14.100 OK. 00:05:14.500 --> 00:05:15.560 The event is click 00:05:19.160 --> 00:05:21.410 and then we're going to define a function inside 00:05:24.440 --> 00:05:30.920 parenthesis open Grilli brocades and PLOS curly brackets. 00:05:30.950 --> 00:05:33.530 All right. 00:05:33.530 --> 00:05:36.950 So this new function is going to be Ajax. 00:05:37.440 --> 00:05:44.780 OK so just be careful with this syntax is going to be dollar sign followed by dots and then the name 00:05:44.880 --> 00:05:46.940 of the function atax. 00:05:46.990 --> 00:05:48.250 All right. 00:05:49.190 --> 00:05:51.460 OK. 00:05:51.890 --> 00:05:55.010 And then we open the penances and closes 00:05:59.960 --> 00:06:02.480 and we see the semicolon there. 00:06:03.290 --> 00:06:07.520 Then we get to open a curly brackets where we're going to put the 00:06:10.400 --> 00:06:14.390 promises and so on and close it back. 00:06:15.140 --> 00:06:24.830 So first we need the L of the file that's stores the data. 00:06:24.890 --> 00:06:31.690 So in our case the trail is the same as this. 00:06:32.120 --> 00:06:34.410 OK. 00:06:34.620 --> 00:06:39.580 So first we need the real key word followed by Gordon. 00:06:39.620 --> 00:06:45.770 And then the u r l as a string. 00:06:46.030 --> 00:06:47.680 OK. 00:06:47.870 --> 00:06:58.520 And then we need a comma and following that we are going to use another keyword its success followed 00:06:58.520 --> 00:07:01.050 by color. 00:07:02.070 --> 00:07:03.130 So what are we doing here. 00:07:03.140 --> 00:07:11.970 So we loading the data K using the R L and then under the success condition we're going to have another 00:07:11.960 --> 00:07:15.830 function to execute once the data is loaded. 00:07:16.210 --> 00:07:21.760 So this function we're going to define it and it will take one barometer. 00:07:22.190 --> 00:07:26.780 We're going to call it data we can call it anything we want. 00:07:26.780 --> 00:07:31.570 So what's what's happening here is does we are losing data from this file. 00:07:31.880 --> 00:07:32.840 OK. 00:07:32.840 --> 00:07:37.540 And that's these are way it is going to be stored in this variable. 00:07:38.500 --> 00:07:45.090 Ok so all the ASML code of this text file that we're going to be loading is going to be stored in this 00:07:45.080 --> 00:07:50.020 data file and then we will this is this it is variable. 00:07:50.030 --> 00:07:50.490 Sorry. 00:07:50.690 --> 00:07:58.310 So and then we're going to use this variable inside the code of this function. 00:07:58.480 --> 00:07:59.480 All right. 00:08:00.000 --> 00:08:03.900 To change the content of the Microsoft Steve. 00:08:03.920 --> 00:08:08.510 So it's actually that Microsoft dev using ID. 00:08:09.870 --> 00:08:12.840 OK. 00:08:13.880 --> 00:08:20.730 And we're going to use the same method to the Ishmail of the Microsoft div and inside the primacy of 00:08:20.750 --> 00:08:26.110 the HMO method we get to use the data variable. 00:08:26.910 --> 00:08:27.940 OK. 00:08:27.990 --> 00:08:33.610 So again all we're doing here is so we will load data using the Arel. 00:08:33.830 --> 00:08:34.430 OK. 00:08:34.740 --> 00:08:36.270 And then the success condition. 00:08:36.480 --> 00:08:41.450 We put data inside a variable that we called data. 00:08:41.900 --> 00:08:42.500 OK. 00:08:42.870 --> 00:08:46.040 And we will execute this function as we defined here. 00:08:46.400 --> 00:08:56.150 So we are using the variable that will store the contents of the file as we load it. 00:08:56.150 --> 00:08:56.760 All right. 00:08:57.000 --> 00:08:59.190 So let's try this. 00:08:59.180 --> 00:09:06.660 So let's click on the button and then we can see that the Microsoft content has changed to data stored 00:09:06.680 --> 00:09:08.160 in the text file. 00:09:08.150 --> 00:09:09.340 All right. 00:09:10.110 --> 00:09:13.190 OK. 00:09:13.400 --> 00:09:17.320 Now we're going to try another way it's more or less similar. 00:09:17.780 --> 00:09:30.540 So we're just going to copy paste the same code we have used so far and we're just going to Common's 00:09:30.710 --> 00:09:32.490 this one. 00:09:32.500 --> 00:09:33.230 So this time 00:09:37.400 --> 00:09:39.680 we're going to use the same function. 00:09:39.680 --> 00:09:46.770 Ok I will give it's only one barometer only DRL and then it will use another method. 00:09:46.830 --> 00:09:48.540 So the way we're going to do that is 00:09:52.520 --> 00:09:57.020 going to keep this going. 00:09:58.460 --> 00:10:03.450 You know rewrites the function the atax function. 00:10:03.600 --> 00:10:04.070 So again 00:10:07.200 --> 00:10:17.330 we need to use the Ajax function so dollar sign doats Ajax and this time we're going to have only one 00:10:17.340 --> 00:10:29.350 barometer so we need penances and then curly brackets and then we all will use only the real problems 00:10:29.470 --> 00:10:30.740 . 00:10:31.950 --> 00:10:32.890 OK. 00:10:33.140 --> 00:10:35.270 And then we're going to use another method. 00:10:35.270 --> 00:10:37.850 It's done. 00:10:39.570 --> 00:10:45.480 OK so. 00:10:50.770 --> 00:10:51.920 So this method. 00:10:52.040 --> 00:10:58.290 So inside this method we will have the same function data that we defined over there. 00:10:58.620 --> 00:10:59.190 OK. 00:10:59.350 --> 00:11:01.020 So function 00:11:05.040 --> 00:11:06.580 is ok. 00:11:06.680 --> 00:11:07.190 Function 00:11:09.910 --> 00:11:11.490 and data 00:11:16.070 --> 00:11:23.210 writes and then inside the function we're going to write our statements where we access the Microsoft 00:11:23.210 --> 00:11:26.700 stuff using its ID 00:11:29.340 --> 00:11:40.690 OK and routine shemale content of the Microsoft using the data variable. 00:11:41.150 --> 00:11:48.830 Ok we can get the name of the variable we can call it some data if you want to change its way. 00:11:49.130 --> 00:11:51.420 So we are doing exactly the same thing. 00:11:51.690 --> 00:11:54.220 Dots there are the the method. 00:11:54.230 --> 00:12:02.520 So so we do in exactly the same thing but rather than using this this way we're just using the Ajax 00:12:02.720 --> 00:12:06.970 function with only the U R L in the parameters of the function. 00:12:07.160 --> 00:12:16.820 And then we using a method done OK that will take as a barometer a function that we were redefining 00:12:16.830 --> 00:12:28.350 here using the variable some data where we store the contents of the loaded data from the text file 00:12:28.350 --> 00:12:28.740 . 00:12:28.760 --> 00:12:37.090 All right and then we pass this answer to the statements of the function to change the T.M. content 00:12:37.110 --> 00:12:38.540 of the Microsoft Steve. 00:12:38.580 --> 00:12:40.970 So let's try and make sure this is working as well. 00:12:41.370 --> 00:12:44.550 So if we click on the button we can see that this is working as well 00:12:44.570 --> 00:12:51.710 .