WEBVTT 00:01.280 --> 00:07.430 All right, so in previous lecture, we discussed what Jason is and what its syntax looks like, as 00:07.430 --> 00:09.980 we said, Jason is frequently used with Ajax. 00:10.460 --> 00:13.460 So in this video, we're going to talk about what Ajax is. 00:13.730 --> 00:17.350 And also we'll show you how Jason and Ajax can work together. 00:18.230 --> 00:23.540 Again, I want to say that we are not going to use Ajax in our project, but because of that, it's 00:23.540 --> 00:25.790 really closely related to Jason. 00:26.030 --> 00:28.710 I decided to create a video regarding it as well. 00:29.390 --> 00:30.740 So what is Ajax? 00:31.360 --> 00:36.950 Ajax allows us to receive data from Web server and update Web page without reloading it. 00:37.340 --> 00:39.130 And that's really a cool thing. 00:39.920 --> 00:43.490 Ajax stands for asynchronous JavaScript XML. 00:43.850 --> 00:47.660 In simple words, asynchronous can be defined in the following way. 00:48.260 --> 00:56.030 When we request a server that in order to process it and get response, it needs some time during this 00:56.030 --> 01:00.410 time until response is ready and you can do some other stuff. 01:01.010 --> 01:03.640 So this process is called asynchronous process. 01:04.370 --> 01:10.340 Actually, this is sort of a big topic and I'm not going to go deeper because I don't want to complicate 01:10.340 --> 01:11.930 things and make you confused. 01:12.690 --> 01:13.220 All right. 01:13.760 --> 01:17.570 As is so in abbreviation X stands for X amount. 01:18.020 --> 01:20.510 Actually, XML is like Jassam. 01:20.930 --> 01:25.100 It was used to send and receive data, but it's kind and old, too. 01:25.550 --> 01:28.310 Nowadays, in most cases, developers use JS. 01:30.110 --> 01:34.210 You may ask then why do we use XML in abbreviation of Ajax? 01:34.640 --> 01:37.610 The reason is that XML has been using for a long time. 01:37.910 --> 01:42.050 It was really important to and so the name stayed in abbreviation. 01:42.470 --> 01:45.770 But again today developers mostly use Jason. 01:46.970 --> 01:51.660 OK, let's talk a little about what are the main differences between Jason and XML. 01:52.100 --> 01:54.110 Jason does not use tax. 01:54.650 --> 01:58.200 It's much shorter also to read and write. 01:58.220 --> 02:01.020 Jason is quicker and it can use a race. 02:01.800 --> 02:04.640 XML has to be passed by XML parser. 02:05.090 --> 02:11.570 As for Jason, it can be passed just by using JavaScript metal, which you have already met in previous 02:11.570 --> 02:12.040 lecture. 02:12.050 --> 02:14.030 I mean, Jason Pass. 02:15.210 --> 02:21.270 All right, so that's all about XML and the differences between JSON and XML formats. 02:21.660 --> 02:28.220 Let's go to Brackett's and write some code in order to use Ajax when it server. 02:28.650 --> 02:31.920 In this case, we're going to use light server of Brackett's. 02:32.310 --> 02:34.860 So if you are using brackets, then it's fine. 02:35.280 --> 02:42.660 But if you're using other text editor, for example, visual studio code or item that you need to install 02:42.660 --> 02:49.680 extension called live server, or it might be called library mode and you will be OK to proceed this 02:49.680 --> 02:49.980 video. 02:50.940 --> 02:51.470 All right. 02:51.870 --> 02:53.620 Let me explain what we are going to do. 02:54.030 --> 03:00.480 Suppose that we have some database in which we have information about users and we need to get this 03:00.480 --> 03:01.080 information. 03:01.590 --> 03:06.070 In order to do that, we have to send request and then get data. 03:06.790 --> 03:08.850 I'm not going to use a real database. 03:08.860 --> 03:12.040 Let's just create new Jason file. 03:12.570 --> 03:17.370 Call it users that Jason and incited. 03:17.370 --> 03:18.510 Create an object. 03:20.310 --> 03:21.330 Right, users. 03:22.750 --> 03:32.470 And I'm going to assign to it a rate which will consist of two objects right here, name John. 03:33.980 --> 03:36.710 And name, Nick. 03:37.930 --> 03:42.940 All right, let's go to Scribbly Jaspal and delete this entire code. 03:44.900 --> 03:51.770 So the first thing that we have to do in order to send request is to create a new instance of XML, 03:51.770 --> 03:53.540 HTP request object. 03:54.140 --> 03:58.010 Actually, this is a built in object in all modern Web browsers. 03:58.520 --> 04:04.310 So let's go ahead and created the clear variable and call it XML HTP. 04:06.240 --> 04:09.060 Which should be equal to new. 04:10.460 --> 04:12.830 Ximo htp request. 04:14.040 --> 04:20.910 As you can see, Ximo request is a function constructor, and we just created a new object using it. 04:21.840 --> 04:24.840 Let's see, Castle, what this object looks like, right? 04:24.840 --> 04:28.890 Castle looked like an answer to your XML htp. 04:32.360 --> 04:39.680 So as you can see, we have here object, which has several methods and properties from where we will 04:39.680 --> 04:40.890 use a couple of them. 04:41.630 --> 04:42.160 All right. 04:42.620 --> 04:47.630 Next, we need to use a method called Open, which we just saw a second ago. 04:48.080 --> 04:51.080 This method specifies type of request. 04:51.650 --> 05:00.080 Also, you are all I mean, for location and also it defines whether process is asynchronous or synchronous, 05:00.230 --> 05:02.320 using true and false values. 05:03.050 --> 05:08.480 So let's write XML, HTP and use method open. 05:10.270 --> 05:18.430 So as a first argument, as we said, we need to specify type of request, it could be get or post get 05:18.430 --> 05:21.950 is used to request data and posts is used to send data. 05:22.540 --> 05:25.840 So we need to get that. 05:25.840 --> 05:28.000 We need to specify far location. 05:28.150 --> 05:29.020 In this case. 05:29.170 --> 05:30.880 We need to write DOT. 05:32.860 --> 05:34.210 Users thought, Jason. 05:36.400 --> 05:43.730 Actually, you can armitt here because files are in the same directory, but I'm going to use it anyway. 05:44.080 --> 05:48.850 And lastly, let's indicate that process is asynchronous. 05:49.210 --> 05:51.820 For that, we need to use boolean value through. 05:53.910 --> 05:59.910 All right, so in order to get a response, we need to use another method called OnLoad in which we 05:59.910 --> 06:01.100 need to define function. 06:01.560 --> 06:09.090 So let's write xml htp dot onload assigned to it function. 06:10.400 --> 06:17.390 So now we need to use your statement in which we will check if everything is OK, in other words, if 06:17.400 --> 06:25.340 response is ready for that, we have built in property cult status, which should be equal to two hundred. 06:26.300 --> 06:31.370 It means, again, that response on our request is already besides two hundred. 06:31.880 --> 06:37.510 It might be equal to for all three, which means that source is forbidden. 06:37.970 --> 06:42.440 And also we could have four or four, which means that page is not found. 06:42.800 --> 06:48.740 And actually I'm sure that you have seen four or four page not found lots of times in the Web. 06:49.430 --> 06:49.940 All right. 06:50.270 --> 06:56.690 Let's use each statement with the following condition, this DOT status. 06:58.130 --> 07:00.200 Double equals to two hundred. 07:01.560 --> 07:09.060 In this case, this key word refers to XML, htp object, so if this condition is true, it means that 07:09.060 --> 07:10.380 response is already. 07:10.770 --> 07:12.220 We are getting data. 07:12.960 --> 07:18.270 This data is text and it's time to pass it using JSON that pass method. 07:19.620 --> 07:24.090 I'm going to store past data into variable, so that's created. 07:25.600 --> 07:27.070 Call it my data. 07:28.550 --> 07:32.630 Which should be equal to Jason Dodd parts. 07:34.680 --> 07:41.250 Now, we need to insert here as an argument, text of response, which we are getting and which should 07:41.250 --> 07:46.520 be passed for that, we have to use another built in property called response text. 07:47.220 --> 07:47.490 So. 07:47.490 --> 07:50.280 Right, this DOT response text. 07:51.490 --> 07:53.270 OK, that's it. 07:53.290 --> 07:59.380 Finally, we need to send request to the server, and for that we have to use builtin method called 07:59.530 --> 08:04.630 send the right XML htp dot set. 08:05.790 --> 08:10.440 And let's see in council what we will receive, right, Coslett log. 08:11.590 --> 08:12.490 My data. 08:14.120 --> 08:21.410 So you can see that we have in council data, which we created in users that Jason file, and actually 08:21.410 --> 08:23.170 it means that everything works fine. 08:24.510 --> 08:32.730 So we sent request to the server, it prepared data for us and sent it to us back then we passed data 08:32.730 --> 08:34.050 and got it in council. 08:34.650 --> 08:36.120 That's the whole process. 08:37.080 --> 08:37.580 All right. 08:38.100 --> 08:42.530 So this is a little example of how we sent requests to the server and get data. 08:43.020 --> 08:44.720 That's the basics of Ajax. 08:45.300 --> 08:50.910 Again, it's sort of a big topic, but I think that this knowledge will be really helpful for you in 08:50.910 --> 08:51.350 the future. 08:52.340 --> 08:52.880 All right. 08:53.830 --> 08:58.270 That was a mini section about basics of Jason and Ajax. 08:58.680 --> 09:01.530 Finally, it's time to start building Chris application. 09:01.810 --> 09:03.760 So let's move on to the next video.