1 00:00:00,570 --> 00:00:03,610 Hello and welcome to this lecture. 2 00:00:03,900 --> 00:00:15,870 In this lecture hall will be looking at a very simple busy Ajax example that will help explain what 3 00:00:15,870 --> 00:00:19,810 we have covered in this course. 4 00:00:20,010 --> 00:00:27,770 We will be using the brackets text editor which is a cross platform to get it on. 5 00:00:27,930 --> 00:00:35,740 It has a bill of teen Web server so we can use it for Ajax example. 6 00:00:35,820 --> 00:00:49,620 So in this example we are going to change the content of a simple web page using AJAX without refreshing 7 00:00:50,070 --> 00:00:51,560 their web page. 8 00:00:51,570 --> 00:00:58,780 So I have caught my brackets text edit all open this is text heavy. 9 00:00:58,810 --> 00:01:03,370 As also got a build team server web server. 10 00:01:03,570 --> 00:01:05,370 So I have got to fast. 11 00:01:05,370 --> 00:01:09,790 This is the first Farn this far here. 12 00:01:09,900 --> 00:01:19,960 This is the text that Ajax will use to change the content off the web page. 13 00:01:19,970 --> 00:01:20,420 All right. 14 00:01:20,430 --> 00:01:25,210 And then this is the hastier mail that will call. 15 00:01:25,260 --> 00:01:29,370 They'll make the Ajax call to the web server. 16 00:01:29,730 --> 00:01:31,670 So I have written out the code. 17 00:01:31,800 --> 00:01:34,870 Let me just run through the code with you. 18 00:01:35,370 --> 00:01:37,770 So the code is in two parts. 19 00:01:37,800 --> 00:01:41,370 You've got the hastier male side of it. 20 00:01:41,520 --> 00:01:49,970 And then you've got the javascript cell of things which contains the Ajax object. 21 00:01:49,980 --> 00:01:53,480 So I'll start with the system part of it. 22 00:01:53,760 --> 00:01:58,430 So the entire documents in hatim old document has the doctype. 23 00:01:58,680 --> 00:02:05,330 But there is some javascript in between the script tag here. 24 00:02:05,610 --> 00:02:13,320 So the an email page contains a deep section which is Deve here and also a button. 25 00:02:13,320 --> 00:02:22,140 This is a button that when the button is being clicked on it all change the content on the page. 26 00:02:22,200 --> 00:02:27,090 Using AJAX the Deve section. 27 00:02:27,120 --> 00:02:38,680 Here is what will be used to display the information from the web server so the information that it 28 00:02:38,700 --> 00:02:45,070 will be displayed from the web server will be displayed in this area here. 29 00:02:45,480 --> 00:02:51,900 The button on the button will call the function when it is clicked. 30 00:02:52,090 --> 00:02:58,880 OK so there would be an event so when the button is clicked it would trigger this function. 31 00:02:58,890 --> 00:03:06,840 Here the name of the function is called My Duck and the function here as being specified inside the 32 00:03:06,840 --> 00:03:07,780 script Ach. 33 00:03:08,010 --> 00:03:14,030 So what this function does is specified inside this great tag here. 34 00:03:14,190 --> 00:03:22,740 This script contains the function write what what function will do. 35 00:03:22,740 --> 00:03:30,660 This function will request data from a web server and display data. 36 00:03:31,000 --> 00:03:32,530 That's what this function will do. 37 00:03:32,530 --> 00:03:36,920 It requires data from the web server and displaying the data. 38 00:03:37,140 --> 00:03:42,870 So we begin on line 10 here by specifying a function. 39 00:03:43,170 --> 00:03:45,670 So we defined the function. 40 00:03:45,750 --> 00:03:55,000 This is a function name my doc and then in between these curly braces is what the function will do. 41 00:03:55,020 --> 00:03:56,590 Line 11 here. 42 00:03:56,700 --> 00:04:02,630 We've got a variable with giving the variable name as X.. 43 00:04:02,640 --> 00:04:04,800 Here's TTP. 44 00:04:04,800 --> 00:04:10,840 You can give it any name it doesn't really matter so and then we give individually of new x him. 45 00:04:10,910 --> 00:04:12,530 He's TTP request. 46 00:04:12,780 --> 00:04:14,700 This is very important. 47 00:04:14,700 --> 00:04:16,960 This is a new request object. 48 00:04:16,980 --> 00:04:25,180 You need to create this every time you make a Ajax request to the web server. 49 00:04:25,560 --> 00:04:28,040 Once you request has been made. 50 00:04:28,110 --> 00:04:32,490 Next we need to check this date to change. 51 00:04:32,550 --> 00:04:39,880 There are various t change its so we need to state change here have this function here. 52 00:04:39,990 --> 00:04:42,620 Right so this is the function. 53 00:04:42,720 --> 00:04:47,400 This is what it will do if the read is state. 54 00:04:47,400 --> 00:04:51,850 Remember there are 5 red this date 0 4. 55 00:04:52,030 --> 00:04:59,720 If the red state is equal to 4 and the status is. 56 00:04:59,980 --> 00:05:04,530 Just to read it will do this. 57 00:05:04,570 --> 00:05:06,850 It's called You document. 58 00:05:06,890 --> 00:05:07,940 Don't get it. 59 00:05:07,970 --> 00:05:10,300 I see the idea here is you dummy. 60 00:05:10,300 --> 00:05:16,160 So what then move it will replace this text here with the. 61 00:05:16,210 --> 00:05:22,890 That is Tier mail that is similar is what is used to replace the text and the value of the. 62 00:05:22,890 --> 00:05:33,340 You name it here month it was so the response text this response to it is how this server sends a response 63 00:05:33,640 --> 00:05:44,380 back to the web browser and the value of this response text here is this text here which is this far 64 00:05:44,380 --> 00:05:46,020 here. 65 00:05:46,030 --> 00:05:49,290 All right so on line 17 here. 66 00:05:49,510 --> 00:05:57,070 We've got the method the TTP method which is we're using get. 67 00:05:57,070 --> 00:05:58,610 Remember there are two types. 68 00:05:58,610 --> 00:06:03,500 You can use get top post here we're using get value. 69 00:06:03,510 --> 00:06:07,000 What date is getting is this text file. 70 00:06:07,000 --> 00:06:09,090 Here is this file here. 71 00:06:09,570 --> 00:06:15,690 This file up in N is secret last month because we specified it to be true. 72 00:06:15,700 --> 00:06:23,440 That means it will be a synchronoss to do all these without interrupting the flow of the web browser. 73 00:06:23,830 --> 00:06:28,960 And once he gets that information in then send it is in the air. 74 00:06:29,020 --> 00:06:31,740 It's his TTP Dr St.. 75 00:06:31,770 --> 00:06:32,240 K.. 76 00:06:32,260 --> 00:06:35,410 So this is how the whole process works. 77 00:06:35,500 --> 00:06:39,540 So if I click on that now we should see that in Arkansas. 78 00:06:39,990 --> 00:06:41,700 That. 79 00:06:42,230 --> 00:06:45,200 Okay it's luncheon. 80 00:06:46,020 --> 00:06:46,860 Okay. 81 00:06:47,010 --> 00:06:47,560 All right. 82 00:06:47,590 --> 00:06:52,130 You can see this is the Web is a web server. 83 00:06:52,360 --> 00:06:54,230 Then say here's the address there. 84 00:06:54,250 --> 00:06:56,340 This is a look back adapter. 85 00:06:56,650 --> 00:06:58,210 So if I click on this now. 86 00:06:58,220 --> 00:06:59,710 Is she changed a date. 87 00:06:59,860 --> 00:07:04,650 So quick change and it is changed to data base. 88 00:07:04,870 --> 00:07:13,520 We can also check to see if the SML el-hage TTP request has finished. 89 00:07:13,640 --> 00:07:15,050 So let's check this out. 90 00:07:15,060 --> 00:07:24,630 We go to the blog on good to develop tools. 91 00:07:25,720 --> 00:07:27,760 Goes to show developer tools 92 00:07:30,750 --> 00:07:34,200 and click on this. 93 00:07:37,050 --> 00:07:45,630 My a web browsers plane up at the moment so I've skipped the developer tools but this is how you would 94 00:07:45,960 --> 00:07:50,280 generate a Ajax core to a server. 95 00:07:50,280 --> 00:07:56,200 So if he is in the brackets tech said it all you should have the same desired result. 96 00:07:56,270 --> 00:08:06,980 As I have saw in this lecture we created a very simple Ajax requests from his same old document and 97 00:08:07,010 --> 00:08:15,750 we were able to change the content of the p without reloading the entire web page. 98 00:08:16,020 --> 00:08:18,090 Thank you so much for watching. 99 00:08:18,100 --> 00:08:21,420 Is there any shoes or any parts on the video. 100 00:08:21,460 --> 00:08:22,830 To not understand. 101 00:08:23,040 --> 00:08:24,640 Please let me know. 102 00:08:25,020 --> 00:08:25,750 Thanks. 103 00:08:25,770 --> 00:08:26,790 Bye for now.