Complete AJAX Tutorial with Project || Fetching API data using AJAX GET and POST request.

in this tutorial we are going to learn completely about ajax we are going to see working of ajax and also we are going to understand how ajax works once you understand this concept of ajax then you will understand how this ajax technique is used in website to get the data without refreshing the entire website only that particular part of the website will be refreshed or updated to get the data okay we'll understand everything about ajax before that let's see an example to understand what is this now here i have opened my browser now if i just write here get bootstrap you can see i'm getting here many suggestions okay my entire website is as it is the background is as it is but only this particular section is getting updated as if i just write here again if i just write here keys you can see only this particular section is getting updated without reloading the entire website or without refreshing the entire website okay this is where ajax comes into play okay ajax will not allow to refresh or reload the page it is just going to request data from the server server will process that data and that data will be sent to the browser okay only that particular part will be updated okay we are going to see an example on this and then you will understand this in more better way and also at the end of this video we are going to make one simple project using the concept whatever we are going to learn in this tutorial now let's see what ajax means okay now ajax stands for asynchronous javascript and xml now xml is nothing but it is an extensible markup language full form of xml is extensible markup language and it is nothing but it is just a simple based text format before every websites were using xml to transfer the data but now as json has come into play most of the modern website uses json to transfer data to and get data from the server but still most of the website uses xml to transfer data you can use either json or xml to transfer the data and xml is nothing but it is just a simple text format and here i am having this definition it is a markup language that defines a set of rules for encoding documents in a format that is both human readable and machine readable okay before that let me just show the demo of the project we are going to make in this tutorial now here we are going to make this simple project i'll just i'll just view page source now here you can see inside this page source i'm having this table and here i'm having this table head and inside this i'm having some table rows and here i'm having javascript i'm having this style tag okay everything is visible whatever content i'm having here that has been visible inside paid source now once i click on this display data the entire data will be displayed from the api you can see this title the price and this images okay this entire thing is being displayed from the api okay this entire data now if i just come here if i paste source now now you can see here whatever i was having previously the same output i am having here inside page source because this is the first time it got reloaded again when i click on this i am using this ajax technologies so page is not going to reload or refresh so i am not having any content whatever i am having here this entire content is not visible inside view page source okay this is how ajax is very useful it is not going to reload our page and also it is not going to refresh our page you can see the view page is same for both now here we are just going to make the simple project we are just going to fetch the data this entire data from the api using the concept of ajax and also we are going to see many requests performed by ajax we are going to see get request post request so lets get started with this tutorial now here i am having this simple example i am just having this instagram post and here if you just see here i'm having this profile okay i'm having this profile here and here i'm having this post and here inside this i'm having this like button here i'm having this comment button and here i am having the share button and finally i am having here save button okay now you are watching this instagram post and once you click on this like button only this particular part will be updated okay this will become red color and the likes will be increased here okay likes will be increased only that particular section is updated and you are going to get the output and also your views will be increased okay only this section is updated if you want to comment okay if you open this one if you comment this one only this particular number will be updated here okay this is not going to reload or refresh the entire website if you want to save this post you just have to click on the save and this post will be saved okay this is not going to refresh or reload this entire website we are just going to get the output okay this events are going to run in the background without blocking our entire system this is how asynchronous is going to work now here i am having this definition events will be performed in the background without blocking our dom rendering okay it is not going to block any event any function it is just going to run once we want to perform that particular action it is not going to wait for other actions to be completed okay it is just going to perform that action if you are going to shop and there are two persons if the shopkeeper is serving only for the first person and if the shopkeeper is not serving for the second person he is just telling you to wait until the first person finishes what he wants to buy then that is called a synchronous because you have to wait until the first person finishes his shopping but asynchronous if the shopkeeper is serving for both of them if the shopkeeper is attending for the first person as well as for the second person and he is not waiting until the first person finishes his shopping okay he is giving you also and he is giving to other person also so that is called as asynchronous it does not wait for other events to happen now this is all about asynchronous and here i'm having this definition of asynchronous okay if you want you can just take the screenshot of this it allows the program to be executed immediately without blocking other executions okay now here we have already seen about this one instagram like and also we have seen about comments and also google keywords whenever you search something in google google will give you many suggestions that is nothing but asynchronous it is not going to block any function as soon as we want this event that event will occur and the output will be executed and only that particular part will be updated okay here is the example of instagram now next let's see what is this ajax now ajax is nothing but it is a combination of javascript that is nothing but xml http object okay we are going to see what is this xml http object at the end of this video plus xml xml we have already seen it is just a simple text format which allows us to make asynchronous call to the server machine and to retrieve data to update part of the page without sending whole page to the server which means that suppose you are watching some news website and inside sidebar you are having some content if you just click on that content you want only that particular part should be updated okay you are just sending only that data to the server you are not sending the entire website to the server only that particular data you are sending to the server server will process that data and it is going to send the response to you only that particular part will be updated okay this is how ajax is very very helpful it will never allow to reload the page or refresh the page blocking will never happen in ajax suppose if you are having function 1 function 2 function 3 and function 4 now suppose function 3 is ready to be executed it is not going to wait for function 1 function 2 function 3 will be executed again if function 4 is ready then then that function will be executed ok it is not going to wait for any function it is just going to execute whichever function or event is ready okay this is all about ajax now next these are the some points to remember about ajax ajax is not any programming language okay it is just a set of existing technologies and we have already seen it is just a combination of javascript plus xml and also it helps in fetching data asynchronously without interfering with the existing page okay it is not going to reload or refresh the entire page it helps in fetching the data asynchronously okay asynchronous we have already seen now ajax is a part of javascript that deals with transferring data to and from server without requiring a full page reload no page reload or refresh is done using ajax most of the website use json for transfer data and some still use xml for data transfer okay you don't have to worry what is this xml once you learn about this ajax once you learn about json then by yourself once you keep on practicing then you will understand about xml but still most of the website uses xml to transfer data okay if you want you can either learn xml or json but mostly preferred is json because all the websites are shifting to json data now let's see how ajax works now here i have opened my browser now this is nothing but our browsers different kinds of browsers now here when an event occurs suppose i am searching for something okay it is nothing but it is going to create xml http request object and it is going to send http request it is going to send the request through internet and that request will be sent to server okay this is nothing but our server and server will search for that data it is going to process that request and in return through internet itself it is going to respond to that request and whatever process data we are getting from the server that will be sent to our browser and it is going to update only that particular section inside our browser okay this is how ajax works we are searching something in browser through internet we are just sending the request here okay we are sending the request to server and server will process that request whatever data server is going to send it is going to respond to the browser through internet and if i just want only inside this particular website if i'm having here navbar if i'm having some content here if i'm having some content here and here i'm having one particular section only this particular section i want to update so i'm just going to update this one and through server also this particular section will be updated okay once we use ajax technologies only this particular section will be updated this entire website is not going to reload or refresh okay that data will be displayed inside our browser that data will be processed using javascript and it and it is going to update only the page content okay this is how ajax works now next i'm having about xml http object before that we are just going to see how to create this one if you want you can just take the screenshot of this and later on you can just refer this one okay now let's get into the practical now theory theory i have done because in your interview if somebody asked you about what is ajax then you should know basic understanding of ajax to explain the interviewer what you actually understood about ajax and how you can work with ajax okay now let's get started with the practical examples and also at the end of this video we are going to make that simple project i have created one folder ajax inside this i'm having two files index.html and script.js now inside index.html first i'm just going to write this basic boilerplate of html i'll just change the title i'll just write her ajax now below this i'll just write one comment i'll just write here bootstrap css link okay we are going to use bootstrap for basic styling so that we don't waste our time in styling i'll just come here now here i'll be searching for bootstrap i'll just write here get bootstrap.com and it will be redirected to official website of bootstrap here i'm having this get started i'll just click on this and from here i'm just going to copy the css link okay css cdn link cdn stands for content delivery network now below this i'm just going to paste that one okay this is bootstrap css link inside this body i'll just create one diff and for this div i'll just give the class name as container okay this is bootstrap class inside this i'm just going to create one button for this i'll just give the class as btn and also i'm just going to give here btn primary inside this button i'll just give the data as get data i'll save this i'll copy this file path and here i'm just going to paste that one now here you can see i'm having this button i want spacing from above so here inside this diff container i'm just going to give here margin wife of 4 okay now this wife it is going to give margin on top and bottom i'll refresh this now you can see i'm having this data here now whenever i click on this button i should be getting some data so for that we are just going to perform get request now okay now this is our project as of now i'm just going to close this project and also i'll be closing this bootstrap website i'll just open console i'll just open console now you can see inside my console i don't have anything now here below this i'm just going to link javascript file i'll just write here js file now here i'm just going to write the script tag i'll just write src i'm just going to write the file name script.js now i'll just now for this button i'm just going to give one id i'll just give the id as getdata i'll just copy this id and script.js i'm just going to create variable for that i'm just going to access that one i'll just write a document dot get element by id and here i just want to access that complete button okay now if i just do console console.log and inside this if i just paste that one i'll save this i'll refresh this one now you can see inside console i'm having this button okay this entire button i have accessed and i have stored inside this variable get data i'll just comment this one now below this we are just going to see get request in ajax now get request is nothing but you want to buy something you are going to market and based on your requirement you are seeing the things and you are buying for yourself okay this is get request the data is already present you are just going and you are just getting that data okay this is all about get request now we will see how to perform get request in ajax now here i am just going to add one event listener to this button i'll just write here add event listener and here i'm just going to write whenever i click on this button i want this function to be executed now here let me just write one alert to check whether it is working or not i'll save this i'll refresh this one now once i click on this button you can see i'll be getting this alert with one okay it is working completely fine so i'm just going to remove this alert now inside this we have seen about xml http request object now first we have to create this object so for that i'm just going to create one variable okay short form we will call it as xhr inside this you just have to write this new keyword and we will be writing this xml http request and you have to close in parenthesis this is how we are going to create xml http request and the object is created okay we are just creating this object you can give any name here you can give anything you can give object data you can give any name here i am just using here xhr because most of us uses this xhr now using get request we are going to open one file so here i'm just going to create one file i'll just give my file name as uh ajaxdata.txt now inside this file i'll just write some content i'll just come here i'll be searching for ajax wikipedia i'll just search for that one and from here i'm just going to copy some content i'll just copy this content here and here i'm just going to paste that one inside this text i'll just save this one now here i'll just write this xhr dot open okay this is going to open that file so using get request okay this is going to take three parameters first i'm just going to pass this request i'm just giving here get second i'll just give this file name whatever file i created you can either give api link or you can just give the data what you are having okay that is nothing but text data now here i'm just going to write that one ajax data okay this data can be sent in any format ajax data.txt i just want to open this one and here i'm just going to give this through okay this through means asynchronous if you give false that is synchronous synchronous synchronous synchronous is nothing but it is going to block the events it is going to block the functions it will not execute until and unless the first functions are executed this through means asynchronous which means that whichever function is ready that is going to execute okay now you just have to write here xhr dot open and inside this using this get method i'm just opening this file now whatever content i'm having here that i want to display inside console and here i have given here true which means that asynchronous now below this let me just write one console i'll just write here console.log and here i'll just write here i am get request i'll save this i'll come here i'll refresh this one now once i click on this button you can see i am getting this im request which means that this button is working now this entire data i just want to display inside console so here i will just write this on progress i will just write here xhr dot on progress okay on progress is optional i'm just going to write this function this is just going to check the progress of this function okay whatever we are writing here okay we are just going to check the progress whether we can open the file or not now here i'm just going to pass this function now inside this i'll just write one console i'll just copy the same console i'll just write here and here i'm just going to write here i am i am progress i am progressing i'll just write this one okay you can give anything just to check whether it is working or not i'll save this i'll refresh this one now when i click on this you can see it's taking time it's still taking time it's not getting printed because we have not sent the data yet so to send the data we just have to write this one xhr dot send i'll save this i'll refresh this one now once i click on this you can see now i'll be getting this error okay now the error is even if you copy the file path and if you open this inside browser then you will be getting the same error okay the error we are getting because we are not sending any data to the server to run ajax we need one server local server insider system either you can install xampp or i'll just come here inside index.html right click on this and open with live server okay if you have not installed live server just go to extension and here you search for live server now here you will be getting the option for live server just click on that okay here i'm having this one i'll just click on this and install this one once you install this one just right click on this index.html and open with live server okay now we are having some intermediate so data can be sent and received easily if you are directly opening the file path then you will be getting this error okay this entire error you will be getting you can see null has been blocked by course policy cross origin requests are only supported for protocol schemes http data chrome chrome okay we need http here but inside url we are having this complete cycle path which is present inside our system but this course if it is going to accept only this http like this it is going to accept so for that we are just opening our project inside live server okay now you can see here i'm having this one and here inside this i'm having this index.html file okay i'll just refresh once okay now i got the button i'll just open console i'll inspect this one now inside console i'll just come to console now when i click on this button you can see i will be getting the output i am progressing okay whatever i am having inside this one i'll just close this left panel now whatever i am having this on progress that is going to be executed now whatever data i am having inside this file i just want to show that one so for that we are having onload method i'll just write here xhr dot on and here i'll be writing this function and inside this i'll just do console console.log and here i'm just going to pass this dot response text okay this we are going to get i'll just save this one now this will be holding entire data whatever we are having inside this file that will be printed inside my console i'll come here i'll refresh this one now when i click on this you can see whatever data we are having that file that data will be printed inside console now suppose if i just remove this and if i just give here false okay which means synchronous i'll come here i'll refresh this one now when i click on this you can see that first i'll be getting this data and here i'm getting some warning okay this is how synchronous will work we are going to understand this in more better way as of now i'll just make it as true so that we can use asynchronous here on progress is optional we are having this on load now suppose this file is not present inside your project i'll save this now ajax data one is not present i'll come here i'll refresh this one now when i click on this you can see this entire content i'm getting cannot get you can see here inside this i'm getting this cannot get okay but this 404 page not found okay so for that we are just going to check the status okay we already know if we are getting 504 or 500 that means we are we are having some server error now here inside on load i'll just check the status i'll just write right here if status if it is equal to equal to 200 okay we just have to write this dot status if it is equal to equal to 200 only then i have to show this one else i'll be writing custom error here else i'm just going to write here console console.log i'll just write here page not found i'll save this i'll come here now you can see it is getting refreshed by itself i'll click on this button now you can see i'll be getting here page not found okay that entire html content i am not getting i am getting this error whatever i have passed inside console okay this is how we are going to handle this one we can check for many conditions you can check for all the status we are having 200 500 404 okay you can check for any status if you want okay if you send only then we are going to get the output if i don't send this one if i don't send the request then i'm not going to get any output i'll refresh this now you can see i will not be getting any output if you send only then you are going to get the request now next we are going to see about on ready state before that i'll just show you this picture now here i'm having this xml http request ready steps okay totally we are having five states zero one two three and four zero means unsent one means opened two means headers received three means loading and four is finally done okay now we are going to see this one when it reaches to done which means that we have reached here okay this is nothing but when it's successful only then it is going to come here to onload now here i'm just going to write that one i'll just write here xhr dot i'm just going to write here on ready state on ready state change and here i'm just going to pass this function and here inside this i'll just remove this one i'll just close this now inside this state i'll just write here console console.log i'll just write here ready state ready state is i'll just open double quotes and here i'm just going to close double quotes and here i'm just going to write here xhr dot ready state i'll save this i'll come here i'll refresh this one now when i click on this okay i'm getting this uncaught error type cannot read undefined properties of ready state i'll just remove this dot from here i'll save this i'll refresh this one now you can see first my ready state is 2 then it has come to 3 then it is processing it is taking time to process then it has raised to 4 once it is reached to 4 okay whatever we are having inside this one that will be printed okay whatever i am having here that will be printed because this file is not available so i am getting page not found now i have given ajax data now this file is present inside the system i'll come here i'll refresh this now once i click on this you can see once it is reaches to four the entire data will be printed one two three four it is going to execute now suppose if i just give here false okay which means synchronous i'll save this i'll refresh this one now when i click on this you can see directly when it is getting ready only then it is going to display okay rest all it has been blocked now suppose here i am just going to write one console console.log i'll just write here i am last i am last line i'll save this now i have given here false which means that synchronous i'll come here i'll refresh this one now when i click on this you can see at the last itself i'm getting this i am last line okay once this entire thing is going to process it is going to get the output then only it is going to print suppose if i just give it through that is synchronous i'll just give it through i'll save this now when i click on this button you can see first i'm getting this i am last line because it is not going to block entire functions whatever is ready it is going to print now this line it has been executed because it is ready so it will be executed now second it is going to check for the ready state now it is in ready state 3 then it is going to process then finally once it comes to ready state for all the data whatever we are having that will be printed okay and this if you want you can just take the screenshot okay 0 means unsent unseen this client has created open but not called it now suppose i'm just going to close this one i'll just close this now here when i click on this you can see only i am last line is printed okay which means that i am in zero now okay the data is not sent now one is it's already been opened now this one okay you can just see now three is it is loading it is taking time to load and finally once it reaches to four it is done it is successful now we can get the output once it reaches to four which means that we have reached here okay onload function okay this is all about get request in ajax we are having this get request whichever file or api you want to open you just have to open this one and you either have to give synchronous or asynchronous synchronous if you want to give you have to give here false asynchronous if you want to give you have to give here true and here i'm just telling that whenever i click on this button okay this get data button i just want this function to be executed inside this i'm just opening this entire file using get request and here i'm having this on progress this is optional if you want you can write or else you can just ignore this one then we are having this on ready state change events and finally we are having onload event and then we have to send this one only then it is going to receive the data and finally i am having this one to check asynchronous and synchronous i'll just refresh this now you can see entire data is working completely fine now here i'm just going to write the comment i'll just write here get request in ajax i'll copy this comment and here i'm going to paste that one and here i'll just write here post request now this entire example i'm just going to copy i'll comment this one now below this i'm just going to paste that one now we are going to perform some basic changes and we are going to see what is post request now post request is nothing but we are fetching the data from the api and also we are having some data based on that data we are going to get the data now we have already seen the example of get request if you are going to market whatever you are seeing you are buying for yourself but using post request you have written some things inside paper based on that things only you are going to buy something okay this is all about get request and post request post request we will be having some data get request we are directly going to get the data now let's see this example now using post request we are going to fetch the data from the api so here i'm just going to search for fake store api i'll just open this in five documents here you will be having this link just copy this one if you want others you can use any api to see this example now here in place of this link in place of this file i'm just going to paste that one and here instead of get i'll be writing here post this open method is going to take three parameters first the request so again the link and third whether it is synchronous or asynchronous and here i'm just doing the same thing i'll just remove all these consoles whenever i click on the button i'm just creating this xml http object and here i'm having this xhr now inside this i'm just opening this link i'll just remove this console now here i'm having this on progress and here i'm having this on ready state okay this all we have already seen in get request now here i am having this on load function and here i'm having entire thing now here below this let me just pass some data data is equal to i'll just write one title here i'll just write title title let me just write here ajax ajax tutorial here i'm having this title now now while sending this one i'm just sending this data i'll copy i'll paste i'll save this one i'll come here i'll refresh this i'll just change the button and here i'm just going to write here post post request i'll save this now here i'm having post request now when i click on this you can see whatever i'm having this id this has been printed because i have given some data here so that is going to print me if i just give a title i'll save this i'll refresh this one now when i click on this you can see again i'm getting this id if even if i pass json or this one i'm getting this id now inside this i'm just passing this parameter inside the send so it is going to send this data here i am having this on progress here i am having this on ready state to check the states okay whatever states you can see here to check this particular states we are just giving that on states okay first two three then it is in processing then finally i'll be getting this 4. now here i have just given that one okay once it is done processing once it comes to on load then just show this one okay whatever we are having i just want to print that one and here i am getting this output now here if you see i'll just copy this one and here i'm just going to paste here i'm just going to paste that one and now if you see this api is an array of objects and inside this the data is in json format because the key and also the value is stored in double quotes so this is nothing but json format so we are not getting the output but once you convert into object then you will be getting this output and we are going to see this in our project okay how to convert and how to display json data inside our website okay this is all about post post is nothing but we will be having some data and based on that data we want to get the output this is all about post request and get request in ajax if you want you can just refer this example also you can try to convert the code into object and you can display that data now here i'm just going to comment this entire thing now we are just going to create simple project i'll just do ctrl b i'll just come to files and here i'll just here i'll just create one folder i'll just give my folder name as project inside this folder i'll just create one file i'll just write here index.html and also i'm going and also i'll just create here script.js now inside index.html this entire thing whatever i am having here i'm just going to paste that one instead of this button i'll just write here display data and here i'm having this get data now below this i'll just create one div and for this div i'll just give the class name as container inside this div i'll just come to bootstrap here i'll just come here i'll just come to bootstrap website and here i'll be searching for table i'll just click on get started now here i'll just search for table i'll select this table i'll just copy this first basic table and here inside this container i'm just going to paste that one i'll just copy this path i'll just close all these files now i'll close this files i'll copy this file path and here i'm just going to paste that one now you can see i'm having this table now whenever i click on this button i want this to be executed okay now we are going to see how to perform that one i'll just close that and also i'm just going to close this one now here instead of primary i'll just write here warning okay whatever i have used in my demo project i just want to use that colors now you can see i'm having this button now this data i don't need okay this entire data i don't want it to display so for that i'm just going to remove this entire table body i'll just remove this table body instead of that i want to display the data from the api and now if i just refresh this one now you can see i'm having this first name last name and handle and now i'll just remove this i don't need this one now here i'm just going to write here title here i'll just write price and here finally i'm just going to write here image i'll save this i'll refresh this one now here i'm having title price and image now for this we are just going to give some classes for the header i'll just give one class class i'm just going to give here table table dark okay this is going to give the dark color i'll refresh this one now here i'll be having this output now for this entire table i just want to give one class here i'm just going to give i'll just give it table table info i'll save this i'll refresh this one now whatever data i'm going to print suppose if i just write this one i'll just write one tr inside this i'll just write one table data i'll write h i'll save this now you can see this will be displayed in blue color okay so we are just going to write here table info and also i want borders for the table i'll just write here table bordered i'll save this okay these are bootstrap classes you don't have to worry or you don't have to know bootstrap to learn ajax okay i'm just using this one because so that we don't have to write styling for this now once we are done with this now we are going to write javascript for this and here i have already linked this file now here let me just write this one script.js now inside this file first i have to create this okay first i have to access this button i'll just come to script.js here i'll just write that one get data i'll be writing this document dot get element by id and inside this i'm just going to paste that id now whenever i click on this button i'm just adding one event listener and here i'm just writing that one whenever i click on this button i want this function to be executed now let me just write one alert i'll just write here one to check whether it is working or not i'll refresh this one now when i click on this you can see it's working completely fine now i'll just remove this alert i'll just come to index.html and this file i'm just going to open with live server okay now it is going to open so before that i'll just come here now we have already seen to use ajax first we have to create xml http request so i'm just going to create that one i'll just write here i'll be writing this new keyword i'll just write here xml http request okay you will be having suggestions you just click on that now inside this i'll just write this one xhr dot open i just want to open this one and using this get request i'm just going to access this api i'll just come here i'll just come to script.js and from here i'm just going to copy this entire api link okay whatever we have seen previously i'll copy this one and here i'm going to paste and third parameter i'm just going to give it through which means that asynchronous now once i have opened this file now you can see my live server has been started here i'll just close this one now here inside this i'm having this button and here i'm having this table okay now here you can see i'm having this button and here i have this table i'm just going to write this xhr dot on load and inside this i'll be writing this function inside this i'm just going to write this function and here first we are just going to check the status and also we are having this hhr ready state so here i am just going to check the status here i will be writing this if this dot status if it is equal to if it is equal to equal to 200 only then i want to execute this entire function before that i will be using this xhr dot on ready state is equal to function okay so that okay it is optional if you want you can give or else you can just leave this one now inside this okay you can see we have passing this console i'll just copy this console from here i'll just copy this entire console and here i'm just going to paste that one okay if you want you can give or you can just ignore this one now here i'll be writing x hr dot send okay once we send only then we are going to get the data i'll come here i'll just inspect as well now inside console when i click on this you can see you can see i'm having this ready state 2 3 again it is going to process because i have clicked it two times okay again i'll be getting this output but i don't have any data x so that data is not displayed here okay now here i'm just checking the condition now once i'll be getting the status as 200 only then i want to execute my code now here i'll be creating one variable i'll just give my variable name as object data inside this now whatever data i'm having i'm just converting that one i'll just write here json okay i'm just converting into object so i'll just write here json.parse and inside this i just want to convert this one this dot response text so whatever data i am getting from this url i am just converting into object i am storing inside this variable now this object data is nothing but my object i'll just do console console.log i inside this console i'm just going to copy this i'll be pasting that one here i'll save this i'll come here i'll refresh this now once i click on this one you can see i'll be getting 20 arrays okay array of 20 data whatever i am having inside api that data has been displayed now suppose inside this console if i just remove this one and here instead of this if i directly pass this one i'll just copy this and here i'm going to paste i'll save this i'll refresh this one now once i click on this button you can see i'll be getting this one okay array of objects i'll be getting you can see entire data whatever i'm having inside api that i'll be getting array of objects and you can see this is in json format so we are just converting into object i'll just copy this one and here i'm just going to paste that one i'll just remove this one i'll save this now when i click on this you can see now the data has been converted into objects and now here i am having this output okay array of objects inside this you can see it has been converted to object now once my data is converted into objects okay we are just using this json.parse now we have to get this data i'll just come to index.html for this table okay for this table i'm just going to give one id i'll just give the id as table data okay you can give any variable name i'll save this i'll copy this id and here i'm just going to paste that one i'll just paste this i'll be writing this document dot get element by id and inside this i'm just going to paste that one now here i'll just create one variable called data i'll just give it as empty array now here inside this i'll just copy this table here i'm going to paste i'll just write here dot in html and inside this let me just write here hello i'll save this i'll come here i'll refresh this one now you can see entire table is being changed to hello here okay you can see inside this browser the entire content has been changed to hello but instead of this one whatever i'm having inside this one that data i want to display here so for that i'm just going to remove this now here instead of this i'll be using this backticks i'll just remove this double quotes backticks we are going to use in template literals so i'm just going to use here backticks now inside this i'll just come to index.html this entire table head i'll copy and here i'm going to paste that one okay entire table head whatever i'm having inside index.html i am just pasting that one here okay if you want you can remove from here or you can remove from here okay either way it is going to work now below this now this is nothing but array of objects so arrays can be accessed using for loop using for each loop using for in loop now here i'm just going to use here for in loop now here i'll just give the variable name as value and each value is present inside this object data i'll copy this and here i'm going to paste that one okay here i'm just writing this for in loop now this value will be having entire data whatever is present inside this one and arrays can be accessed using index number so now this i okay now i'll just come here now this will first it will be having zeroth index again it will be having one two three four it keeps on going like that now inside this i'll just copy this variable and here i'm just going to paste that one i'll just write here equal to now inside this i just want to paste the table row okay whatever data i want to print i am just writing here table row i'll just close this table row here now inside this i just want table data i'll just write here i'll just write my name kanam i'll close table data okay we are going to fetch the data from the api in the same way i'm just going to copy this three times two times here i'll write one here i'll write two here i'll write three i'll save this i'll come here i'll just refresh this one now here i will not be having any output because we have not printed it so below this i'll just write this one table data i'll copy this one here i'm going to paste dot inner html is equal to this particular data whatever we are having here i'll copy this and here i'm going to paste okay now inside this whatever data i'm having here i just want to print that one i'll come here i'll refresh this now once i click on this button you can see i am having this khanom one kanam2 and khan on three okay this data has been printed here okay but i don't want like this okay you can see table header is gone and here i am having only this output my table header is gone an entire table has been replaced with this data whatever i have given here so now in place of this i want to access the data from the api so here i'll just write this dollar symbol and here now this object data is having the entire data i'll just write that one object data and inside this i'm just going to pass this value okay now this will be having the index number okay array name index number dot i'll just write this i'll be writing here title i just want to access the title from the api if i just copy this path i'll just paste that one here now you can see i'm just accessing the title with this title i'm accessing then i want to access the price and then i want to access the image so i'll just come here i'll just come here now when i just click on this you can see the title will be changed to whatever title i am having inside this api and only the last title whatever i am having here that will be displayed you can see this title has been displayed only the last title this entire data is not been displayed okay we are just going to fix that one you can see this title has been displayed from the api now in the same way i'll just copy this one and here i'm going to paste and instead of title i'll be writing here price now here i just want image tag so i'll be writing here image i'll just write here src and inside the single quotes inside the single course i'll just copy this entire thing and here i'm going to paste now instead of price i'll just write here image i'll save this i'll come here now when i click on this you can see i'm getting this image i'm getting this price and here i'm having this one okay this title but the problem is i'm getting only the last data now to get this entire data i'll just come here now you just have to write here plus once you write this plus this data plus this entire data again whatever data i'm having this here that data plus new data that data plus new data you just have to write here plus i'll come here now when i click on this you can see now i'll be having this title and also here i'll be having the image okay now we are just going to give some stylings for the image now inside index.html now here below this i'll be writing here i'll just write her style tag inside this i'll just write image and for image i'll just give the width which i'll be giving 100 pixel i'll save this i'll come here now when i click on this you can see um here i'm having all the titles prices and images okay this is how we are going to get the data and the last fix is here i'm just going to write this else and here i'll just write console.log here i'll just write here api link not accessible i'll just write this one i'll save this now if i just change some data inside this link i'll just write here one one one i'll save this i'll come here i'll inspect this one now when i click on this button you can see i will be getting this error now when i click on this button once it reaches to ready state now my file is not one so i'll be getting this error so for that we are just writing this else i'll just bring this back i'll save this i'll just refresh this one now this is the output when i just click on view page source i'll just click on view page source now inside this you can see whatever i'm having inside index.html only that has been printed now again when i click on this display data now this entire data this entire section has been updated but inside this view page so again if i just come here if i just click on view page source now inside this again whatever data i am having that will be printed because only once it is going to load again it is not going to load and it is not going to display that content here so using ajax without page refresh or reload we can display the data and we can update only that particular sections of data okay this is all about ajax we are just going to fetch the data and we are going to display the data inside our browser okay this was the simple project now in next tutorial we are going to make more projects using ajax and we will understand ajax in more advanced level that's all for today's tutorial thank you so much for listening have a great day

Channel: Step by Step

Views: 8,440

Keywords: ajax, ajax tutorial, complete ajax tutorial for beginners, ajax course, what is ajax, ajax project, complete project using ajax, ajax tutorial for beginners, javascript fetch api, javascript for beginners, ajax programming, ajax programming with khanam, ajax course khanam, fetch api, ajax fetch api, ajax get request, ajax post request, ajax get and post method example, ajax get method, ajax post method, ajax get json from url, get, post, javascript, api, fetching api data, khanam

Id: Cqjytof21tA

Length: 48min 56sec (2936 seconds)

Published: Sun Oct 31 2021