Ajax Crash Course | 2020

hey there this is kamal and in this video we're gonna learn about ajax so let's get this started so what is ajax ajax is neither a framework nor a programming language it's just a set of techniques that we use to send and receive data between the client and the server asynchronously so what it essentially means is that let's say you have a component on your web page which needs data to use to populate it but that data is present inside the server and you want to get that data from the server but in the meantime you do not actually refresh the page to send that request so for that purpose we use ajax and ajax is an abbreviation for asynchronous javascript and xml and in this case xml is loosely bound and that is because json has mostly replaced xml so we don't use xml anymore we mostly use json so for this video we're gonna see three ways of actually accessing the data through ajax the first way is where we can access data from a text file and the second way we're gonna see how we can access data from a json file whether it might be a local file or an online api and in the third way we can see how we can actually send the data to a back-end php file from the front-end form so with that out of the way let's get this started so this is my project structure and in here i have a file called as index.html other than that i have the basic boiler template such as that so before going further let's first create a dummy text file that we can use to access the data okay so let's close that off now to actually send the request we need to actually click a button right so let's first create a simple button now what we want actually happen is that whenever this button is clicked a particular function inside javascript has to be executed so in order to make that happen we can use the on click event that's going to actually initialize a event whenever this particular button is clicked so now let's actually initialize a script so that we can actually write the function that we want to use so the function that we defined before was show text so let's type that out so the main thing that you have to remember is that inside ajax everything is handled by an object and that object is the xmlhttprequest object so let's create that object so i'm going to initialize it i'm going to give it as xhr new xmlhttprequest so that's the function that we're going to use so xhr here is the object that you're going to use so inside xhr we have multiple methods that we can use and the main method that we'll use is a method called as open and that open method is what we're going to use to actually initialize the request so this open method actually requires three parameters the first one is going to be the method that is whether it's going to be a get method or a post method the second one is going to be the file itself that is the text file that you're going to use that is the dummy.txt the third one is whether the request has to be asynchronous or synchronous so it's a true or false so let's type that out so here for the file itself if this file is present inside a sub directory then you have to give the location of that sub directory as well but since we have that in the root directory i've directly given the dummy.txt file name and after you have initialized the request the next thing is that you have to send that request so we have another method for that called as send so you can use that to send the request but the main thing is that before actually sending the request you have to actually handle the response so whenever you send a request the server is going to give you a response right with the data that you're going to use so you have to handle that response so we have a method for that called as onload and we're going to equate it to a callback function in here we're going to write the code to actually handle the response so the first thing i have to do is that we have to actually check whether the status is okay or not so these are the status quo and in here as you can see 200 represents that it was an okay so if you receive that 200 status code only then you have to perform the following functions or the following executions so i'm going to write an if condition for that and for that i'm going to pass in the xhr dot status is equal to 200 so if the status is equivalent to 200 only then you have to execute the following lines so what we're actually going to do is that we'll actually take the response and display it onto the screen so for that let's create a paragraph inside our html tag and let's assign an id to it so i'm going to give it as text and in here let's use document object model to access that id so i'm going to write document get element by id and for that i'm going to pass in the id of text and then for that particular id i'm going to use the inner html so i'm going to change that inner html and for that i'm going to pass in the response itself so i'm going to use the xhr object and for that i'm going to type the response text so what this is going to do is that it's going to take the response and add that to the html of this particular id that is to the paragraph itself and after it has been done then it's going to send that request so whenever you receive a response this is what is going to be executed to handle that request so let's save this and go to the browser and see how this is going to work so let's refresh the page so you have a button here i'm going to click on that and whenever you click on that it's going to show this this is just some dummy text so that's the text that we had seen in the dummy.txt file so as you can see here whenever you click on this button the page is not refreshing but the data is being displayed so the data is being sent asynchronously between the server and the client so that's how you access data from a text file so now let's see how we can access data from a json file which is present online that is through a third-party api and for this we're going to use the github api so let me open my browser and let's go to get up so this is the rest api provided by github so you can use this to actually access the data present inside github so this is the url so let me copy this and open it on a new tab so whenever you use this url it's going to give you access to the first 30 users inside github so as you can see these are the first 30 users and they are numbered according to their ids so now if you want you can go to a particular person as well so if you want you can go to packet good just have to give slash and after that you have to give the name of the particular account and that's going to show the details of that particular account packet code so for this video we're going to use this api to get the information so let me copy that so the process for that is pretty much similar so let me duplicate this button and instead of show text i'm going to type it as show content and also change this from show text to show api text or show api content whatever you want it to be and in here after the paragraph let's create a div to actually display the data that you're going gonna get from the api so for that i'm gonna give an id and i'm gonna name it as content and let's save that so the function is gonna be pretty much similar so let's copy this as well and let's paste it below so now let's change it to api text so that's what we had given here so in here you have to first initialize the object itself and as for the open method instead of actually giving this file you can remove that and type in the url for that particular api and the send request is going to remain same the only thing that's going to change is the onload method so for this first we're going to check whether the status is 200 or not and after that before actually sending the response what we want to do is that get that response of that 30 users and since we're getting data for 30 users it's going to be an object so we're going to loop through that and get data for each and every person and append that to a particular variable so that we get the whole data inside a single variable so let me show that to you so first we're going to create a variable called as content and that's going to be equated to nothing but md then later let's create another variable and this time let's equate this to the xhr dot response text and the thing is that since we're actually getting the data in the format of json we have to parse this so for that we're going to use the json.parse method to pass that data and we're gonna get the object then we're gonna loop through that data that is the json object and we're gonna get the data for each and every individual user so the logic for that is something like this so what i'm doing here essentially is that i'm going to take the id for each and every person inside the data object and use that id to access individual components of that particular user so this avatar underscore url is going to give me the profile photo of that particular person and this login is going to give me the name of that particular person so if you go to the api once again as you can see here login is going to give me the username and avatar underscore url is going to give me the url of that particular person's profile picture so i'm going to give that url the src of the image tag and i'm going to type in the name of that particular person inside a h5 type so i'm using the es6 notation for this so that it's easy for me to actually write variables instead of a particular string and i'm actually doing that and appending that to the content so this content right now contains the division for each and every particular user so now instead of actually passing the response text let's pass in the content itself let's save that go to the browser refresh the page we have two buttons let me zoom out a bit let's click on the show content and that's going to give me the profile picture and the name of all the 30 users from the github api so now if you click on show text that's going to give me this is just some dummy text so that's how you actually access data from a third party api in the format of a json file so the last way is to actually send the data to a backend php file so for that let's first create another file and i'm gonna name this file as form.php and in here let's copy this from the index file let's paste it here and let's remove whatever is there inside the body and also as for script let's remove this we don't need this anymore let's remove the second one so let's first actually see how a normal form works so we have an action right so for that action we need to actually send that data to a file so let's create a file here and i'm going to name it as submit.php and whenever something is submitted to this file it has to output that [Music] so what we're trying to do here is that whenever a request is sent with the value of username you have to take that username and echo out hi comma that particular value okay so whenever you send the data from here you have to send it to submit.php so the action is going to be submit.php as you're going to submit the data to this particular file then you're going to give the method but that's going to be a post method or a gate method for now let's say it's a get method so in here let's have an input tag and it's going to accept the username so the name is going to be username and there's going to be a button so let's save that and let's go to the browser and go to that particular file so in here let's type in something click on submit and that's the output hi comma comma so that's what i had typed here so what's actually happening here is that whenever you click on submit that data is being sent through the url in the form of query parameters here username is equal to so now in order to replicate that let's first duplicate this and comment the sound now since we're actually using ajax to send the data we don't need this here so let's remove this we're going to use that through the ajax itself and we need to give it as submit and we don't need the name as well instead we need an id let's say it's just name okay and also we want to actually have a non-click event so let's type that so whenever this button has clicked you want to actually use this method let's rename this to get so that we can differentiate the get and the post so it's going to be show text get so the function is going to be pretty much same so first we're going to create the object itself so we can initialize it the later we're going to write the request and here instead of actually giving the dummy.txt let's give the submit.php and also we have to actually manually type the query parameters so it's going to be username is equal to nu so here this name is a variable that we haven't defined it let me convert this to es6 yeah so let's create that variable so actually trying to get the value of this particular id that is the input tag so we're going to get that value assign it to a variable called as name i'm going to pass that variable through the query parameters to submit.php then we're gonna use the onload function to handle the response and instead of actually displaying the data on the screen let's console.log that data let's save that go to the browser refresh the page let's remove this refresh the page let's open the tools and here let's type in some name click on submit and as you can see nothing's happening and that is because even after doing all of this the form is getting submitted by the default way so in order to make this work we have to make sure we can prevent the default form submission so for that we're going to use an event variable here so we're going to pass in the event variable here and we're going to access it here so whenever an event is generated that is whenever the button is clicked what we want to do is that we're gonna use that event variable to prevent the default submission so now if you save that go to the browser once again refresh it and this time let's tap it once again click on submit and as you can see here it is showing me that text so let me zoom in i don't think you can see it yeah so you can see that response so we have to actually prevent the default mechanism before actually using the ajax inside a post or get request so now let's see how we can do it through the post method as well the post is a bit different compared to the get request so let's copy this and since we're actually sending the data to the post request we can't actually send the data to the parameters there is a url query parameters that is we can't use this method so for that what we're going to do is that below this name that we had actually got by using the document get element by id we're going to create another variable and we're going to equate that to the query parameters that we had created now let's remove that from here we don't need that here anymore and now what we're going to do is that we're going to pass this parameters directly in the send method and also we have to set the header content type as well so before the onload let's use the xhr set the request header so the content type is going to be application slash x hyphen www hyphen form hyphen url encoded so you don't actually need to remember this this is going to remain same when you send the data so you can just copy those and paste it wherever you want so you have to save that header to actually send the data to the form okay so now let's save that go to the browser once again oh and before that let's rename this to post and also let's remove it from here as well and let's remove it from here as well let's save that go to the browser refresh once again type in the name submit and as you can see here the data is being outputted that means the post request was also successful so in this way you can actually send get or post request to the backend php file from the php file what you can do is that if you want to send this request to the database what you can do is that you can initialize the database from here and use the data parameters from the request query and take that parameters and use that parameters to execute a particular query and one more tip for you guys is that let's say you don't want to actually send the data to an external file like submit.php and you want to handle that request in this file itself so in order to make that happen you can use functions so what you want to do is that essentially you want to call a particular function whenever this is executed so what you're going to do is that you want to replace this with this particular file name that is form.php and in here what you're going to do is that along with this username is equal to name what you're going to do is that you're going to pass in the function name as well so it's going to be something like and function is equal to function underscore one so if this function is equivalent to function underscore one then you have to execute a function underscore one which is defined above the html okay so in that way you can execute a particular function present inside this file itself without actually sending the data to an external file so that's how you actually send and receive data through ajax so that's it for this video guys i hope you like what is until now if you did then please hit the like button and don't forget to subscribe as well thanks so much for watching and hope to see you in the next video

Channel: packetcode

Views: 3,463

Rating: 4.8095236 out of 5

Keywords: ajax crash course youtube, ajax crash course, ajax crash course (vanilla javascript), jquery ajax crash course, ajax tutorial, ajax, packetcode, packetcode tutorial, kamal teja, web development tutorial, web development tutorial for beginners, web development course, submit form without page refresh using ajax, submit form without page refresh using javascript, submit form using ajax javascript, submit form using ajax php, submit form using ajax, ajax javascript

Id: fLJItEI7TE0

Length: 18min 28sec (1108 seconds)

Published: Wed Sep 09 2020