AJAX and JSON - With working example using JQuery

hello YouTube welcome to computer screen channels and the so Shahbaaz Khan today in this screencast we will discuss about Ajax and JSON post we will talk about Ajax then we will talk about JSON and then we will build an app to show you a Jackson JSON in action so what is ajax ajax stands for auto synchronous JavaScript and XML what does that mean that means ajax is a process of sending requests to a server and then bringing back the response without reloading the entire page so you might be thinking okay that's the definition but what does it mean so let me show you what does it mean so open your browser go to google.com and then press f12 this will bring out the developer tools of your browser now go to network tab ok so I set now minimize both of these now what we will do is we will press anything in this text book for example a C the moment I pressed a there is a request that went to the server and something came back then again I said J and then again I said a and then again I said X now you can see all these options that are being attached to this drop-down right here this is what is coming back in this responses okay so even though this page is not being reloaded as you can see see this page is not being getting okay sorry for the wrong spelling I'm very bad with spellings so even though this page is not getting reloaded we are communicating with the server so this is Ajax simple as that so what is JSON JSON stands for JavaScript object notation as the name suggests it is a notation or a representation of our data alright so what is so special about JSON the thing about JSON is it is very easy for a human being to understand and it is equally easy for a machine to parse this language okay so this is why we use JSON it is very lightweight so let's have a look at this code snippet so in this code snippet okay this is a JSON object right here this is a JSON object so in this object we will see there is a key and a value a key and a value and a key class and a value Gryffindor so JSON object is nothing but the key value pair which is separated by curly braces okay so this is an object and the properties of these objects are name age and class and the value of each property can be a string a boolean value of an object itself or an array all right so here is a variable JSON data that I have created which is an array of objects alright and for each of these JSON objects has a property and its value or you can say a key and its value so how will we access each of these objects properties if you have a look at right here I have written JSON data that is the name of the variable and 0 that means I am targeting this object right here the object at the 0 8 index and then I have set dot name which will give me the value of this key simply JSON data 1 dot H will give me the value of this key and cezanne theta 2 dot class will give me the value of this key okay so this was JSON the simplest way put so now that we know what is Ajax and what is JSON let's go ahead and build a very simple application to just understand and get us something you're with what how to use Ajax on Joseph so this is the application that we will build it has nothing complicated is but it is a very simple application it is just a button and when you click on this button a date a list of data is fetched from the server and only five elements from that data is displayed right here and then when you click on it again the next five is displayed and again the next five is displayed and when you reach the end of the list the list starts over when I reach the end of the list it displays a message that says less empty start over and then when I click on it again it starts from the beginning ok so let's go and build it I have already created the structure this is the structure let me increase the font size okay so this is the structure ah it's just an HTML then a header which has a title and then a style of body and then the Ajax container the button Ajax call and the button when I hover over that button the style of the button when I hover over it and the item that each item styles that I am displaying there ok so this is my div the div is Ajax container and inside that I have a button and then in also relate the data that I'm displaying so let's just open this in browser okay so at this moment when I click on this nothing will happen see nothing happens why because I have not written the logic so let's go ahead and write the logic so I'm using jQuery which is a JavaScript library and for that you have to include this CDN so how to include this CDN just go to this website right here this is the name of the website for jQuery calm and from there this does this get the latest version jQuery click on minified and then cooperate this copy this and then paste it in your code block and always remember you should always write script below your body - ok it is a very good programming practice why because when this page loads scripts are loaded in the end but styles on your HTML are loaded first so let's just go ahead and start writing our script first I will declare a variable count to keep count of my kicks ok so that when I fetch the data I have the count that how many times that I have clicked and then on the click let me bind a click event on this button okay so I have bound a click event on this button and I'm saying that when you click on this button pull this function okay so let us define this function first okay so in this function what I'll do is I'll simply use this okay for our Ajax call right and I'll say that okay fetch data from this URL and use this method okay so now for the URL path see I don't have any hosted website right now so let's do a very simple thing go to google.com and then write fake API for developers right and then see okay see here it is Jason placeholder fake online REST API for developers I have used this for the you know when I made that demo so I went here so it says that it has a hundred items in this list so that means I will displaying five elements from this 100 items list each time when I clicked on the button alright so I just copy the URL and then I will say that fetch data from this URL okay and then I'll say that when you are done okay then you are done then what you do is get each element from that data sorry when you are done give that data here okay so once this Ajax call is done it gets the method it will give all those data to this variable right here okay and then we will use this variable and fetch five data on each click and display it inside this cave right here desde okay so let's go ahead and declare variables there start is equals to count if count is greater than zero our safe count is greater than zero then my start is 5 into account else my start is count I'll say my end is start plus n now I'll run a follow for I equals to 0 I less than coconut from zero from start now I'll say I less than and then I'll say I plus plus single just I'll save air I so that its way to another okay now that we are done I'll declare another variable right here and I will call it there STR equals to this okay okay so now what I'll do is I'll write SCR plus equals this class equals to I've already created a class okay let's just copy this so this is my drift tag and then I'll say that user ID is equals to plus data and key back the key so what is what was the what is the key the key is user ID then I'll say break that's it and then I'll say plus now I'll just user ID is is now I'll write title is equals to plus data I dot title plus and then this and then I'll just close the div and that's it so this is done so what here I am doing is basically I'm taking out five elements wrapping up in an HTML and then appending it to this string okay I mean concatenating it to this string so once I'm done with this loop I will have a string with five concatenated item which is arranged in an HTML for better formatting so what I will do next is I'll just write this code to append data to that Dave so I'll write append this string to that tip so this will simply to that now what I'll do is okay I have missed a few things equals two will be here and five will be here okay and then one more thing that I have missed is once doing all these increase the value of count and before appending this empty it first so that every time we are getting a new value instead of attaching it onto itself this one more condition that I'll write is if start is greater than or equal to data dot length minus 5 what I'll do is I'll set count to zero and then I will say this dot append list traversed start over that's it and then return so basically what this code does is it checks this piece of code checks that whether we have reached the end of the list or not okay so once we have reached the end of the list of I can just simply say end if n is greater than or equal to theta dot length that means that if we have reached the end of this list then reset the value of count to zero and then display that the less has been traversed and then return so that the speed of piece of code is not executed I'll just save it and check for some errors there's none so let's just see this count okay this count as usual okay let's go ahead and refresh this and then click on it okay okay it is working now let's see if the end of the list nine then ten and then list reversed start over so this instead of writing it here what I can do is I can copy this also so that before appending it I will empty the list okay so let's just go ahead and refresh it once again okay just click the data let us bring out the developer tools and then just go to network tab so that we can see that in action see every time I click the request comes it counts five six seven eight nine see let's shove list start over and then it starts from the beginning once again and the data that is coming here is we can check out in response to see this is the data so there are hundred objects JSON objects which is inside an array so this is it guys this is Ajax and JSON I have kept it as simple as I can so that you people can understand what and how Ajax and JSON are used to communicate with some so if you like this video do not forget to give it a thumbs up and if you have any other suggestions to make do leave a comment down below I'll surely reply thank you and have a great day ahead

Channel: Shahbaaz Khan

Views: 46,760

Keywords: AJAX, JSON, jquery, JavaScript, ajax, json, JQUERY, HTML, CSS, HTML5, CSS3, web programming, Ajax with example, Json with example, ajax and json simple example, ajax jquery json example

Id: s64y35IBrQc

Length: 16min 5sec (965 seconds)

Published: Sat Feb 18 2017