2: How to load in data from a server using AJAX - Learn AJAX programming

today we're going to learn how to load and data inside our websites without having to refresh the browser first and we're going to do this using Ajax and as you guys can see in front of me here have a very basic example of what exactly a Tex can do inside a website so what do you guys see in front of you is a very basic comment field now right now there's nothing to comment on it could be a post or a video but right now we have a comment field with two posts one is by Daniel and one is by John and let's say I have a thousand comments to this whatever I'm posting on in here now instead of showing a thousand comments when you insert a page which would actually take up a lot of resources each time you have to load the page because a thousand comments is a thousand comments we can limit the comments by saying we only want to show two of the comments and then if the user wanted to we can actually show more comments by clicking a button now this is something we can actually do without using Ajax but if I were to do without a text we would have to refresh the browser each time click the button meaning that if it were to load a hundred post I would have to scroll back down to the comments each time I click the button because it refreshes the browser and takes me back to the top each time so Ajax allow for you to do this without having to refresh the browser each time which is a very cool feature to have inside programming so this is what we're going to learn how to do today using the jquery function called load which allow us to do this now this example that I'm serving you guys here if I were to actually click the button you guys can see I'm actually loading in more posts and I'm not going to get taken back to the top each time I click the button which is what we want to do now this example here we're not going to build today we're going to do that in the next episode because it involves using PHP code and since you don't have to use PHP code to use the load function inside key Acree I'm going to go ahead and show you guys without using PHP code and databases first and then afterwards in the next episode we're going to do it using databases because the thing a lot of you guys came here to learn how to do this using databases so if I were to go inside my coding document you guys can see a very basic HTML 5 set up and what we're going to do in here is we're going to go ahead and include a div box down in the body tags that has some content in it then when we click a certain button we're going to go and load in some new data or some new content and put it inside this dip box here so let's start out by creating a dip box so we can actually show you guys the load feature inside 8 X and inside this dip box I'm going to going to include a paragraph tag I'm going to say this is the first content like so and we're going to go and get this div and ID so we can pinpoint it using 8 X so we're going to say we have an ID which is equal to tests just to give it something I'm going to save it then I'm going to go up inside my script tags which are decided to include inside my head tags so we need to make sure we include a function that only allow for us to load the script tag last when we load the page because of the lights all the jQuery code is going to get loaded first we don't want to do that want to load it last so in order to load it last we're going to going to include a selector since our jQuery and inside the selector we're going to go ahead and choose the document were inside of right now come on state document dot ready parentheses semicolon and then whatever goes inside the parentheses is only going to get loaded after the entire website has actually loaded so we're going to say we have a function in here that it's going to get run when we actually have the entire website loaded and inside this function we're going to go include all the jQuery code we're going to have inside our website so the first thing we're going to do in here so I'm going to consider gasps the exact jQuery function that allow us to use HX and get data from the server and insert it inside somewhere inside our website so the way we do that is we want to going to include a selector we're going to go and choose the exact place they want to insert the new data from where we get it from so I'm going to go ahead and say we're going to insert it inside this div down here called ID test so we want to say hashtag test and afterwards once a dogs load now inside the jQuery load function which is using a tanks we have three different parameters we can use one is the URL who needs to point to the actual path you know to the file we want to load in the second one is going to be data we want to include when we want to send a request for the new data that we want to load in and the third parameter is a callback which allow for us to do something once it's done loading in some kind of data now right now we haven't actually set some kind of events before we load in the content because right now for were to just run this thing then we would never actually see this text down here because it's just going to load as soon as the document has loaded so what we're going to do is we're going to go and include a button and I'm just going to go ahead and go beneath my div down here now do pay attention to not include any kind of button inside the div tags because everything inside this div tag here it's going to get replaced once we do actually click the button so the button needs to be below the actual div tags now inside the button I'm going to include some text I'm just going to say click to change or to use Ajax or something cool and I'm going to go and get this button on i.t so we're going to say we have an ID set to BTN so button then I'm going to go back to the top and then before to jQuery a text function down here I'm going to go and say we have a selector that selects the button but saying we have an ID called BTN then we want to say dot click parentheses to include a click events and then inside the parentheses we're going to go and say we want to run a function once we click this button down there so I'm going to say we have a function parentheses curly brackets and then we want to insert the load function with jQuery inside this event like so so now we basically need to fill in the parameters inside the load function here but before we do that we need to actually have something to insert inside our div down here so I'm going to go to no come up in your documents and I'm going to go and save it as some type of document we can do a HTML document we can do a text document we can do a PHP document we can do all sorts of documents that we want to insert inside the div tags so in my case I'm just going to create a very basic text document so I'm going to call this one data dot text txt and I'm going to go and save it inside my root folder now inside this document I'm going to go and create maybe something like a new paragraph so we're going to say we have a pee tag and inside the P tag we have something like this is the new data it's going to mason mark we're going to close the P tags again like so I'm going to save it and I'm going to go and put back inside my index file because inside the load function inside geekery we need to tell it the URL to the actual file they want to insert which is data to text so we're going to go and say double quotes inside the first parameter and say we have a data dot txt and this is basically all we need to do to actually load in the data but just to let you guys know we do I have two more parameters we could include if you wanted to and in the next episode we will actually be using one of these parameters but for now this is basically all we need to do in order to load end data inside our website now there's one more thing we need to do before we can actually get this working because right now if we were to go back inside my website and actually click the button we just included you guys can see that nothing happens inside the browser and that is because right now I didn't actually include a curry inside my code so we need to go in and download jQuery first what is link to it using a CDN so I'm going to go and go into jQuery dot come and inside taker comm I'm going to go and say download jQuery I'm going to scroll down and use a CDN which is basically just that we load in the bakery code from online without having to download the entire Taylor library so I'm just going to go and use the CDN and down here what does actually say using Diego with the CDN there's a button that takes us into code jQuery comm I'm going to go and get the minified version of the latest one so I'm going to click it then I'm going to copy the code and include it inside my head tags that has to cover just wrote in here I'm just going to include the script tags right here which is the link to the actual jQuery this will make so it looks nice like so and like so so now this would actually be working so we'll go back inside my browser now we loaded n ta karae so it would actually use k-crew down here to load a text the rewards I don't go inside our file refresh you guys can see when I do actually click the button it changes to the new data now before we end off the episode I want to sort of guys the last two parameters we have inside the load function inside jQuery so if we were to go back down inside our code and go inside our load function down here you guys to notice that the first parameter like I said is ul to the actual file then the second parameter by writing a comment it's going to be some kind of data we want to include inside when we load the data inside the txt file now if you know about basic HTML forms you'll know that we have something called the post method and a get method so when we do actually you know click Submit or something inside a form inside a website then we send a post or get method to a certain file which means that it passes some data to the file which then means we can use the data inside the next documents so this down here is basic the same thing when we do actually have the second parameter we load in data using a post method to the next file which in this case is beta txt so if it were to include some data in here and go ahead and write curly brackets and then say we have the first data called I don't know let's call data one meaning that when you get the post method is going to be called data one call one and then equal to whatever needs to be equal to so right now I could say that theta one is equal to Daniel which is a name we could actually change this to name and then ask words if I want to include more data and go and say comment space the last name Col one Nilsen if I wanted to I can also move this down to next time to make sure it looks a bit nicer like so and like so so now we have two pieces of data inside a string they want to pass on to the data duck txt document so we can actually get the data either using JavaScript or PHP so we can actually do something with it so if you want to pass data you can do it this way now the last parameter we have is something called a callback now the callback like I mentioned is a piece of code that we want to run once it's done loading this load function here so which they want to have a function and inside this function that we do actually run once it's done loading the text in we want to alert something inside the browser so I'm going to say alerts and I want to alert hi there like so if we were to save this going to stop my browser now the second parameter to be included inside our load function is not going to do anything we can actually see inside the browser because it's only going to pass on data to the data txt document created and because not doing anything with the data inside that document we're not going to do anything inside the browser here but the third parameter which is the callback is going to do something once we click the button it's actually going to show us a message inside the browser so if we were to click we get some kind of confirmation that the load function did actually run inside our browser then I can click OK and you guys can see that the data changes inside our website so this is basically have a component data from a server hope you guys enjoyed I'll see you guys next time

Channel: Dani Krossing

Views: 209,116

Keywords: how to load in data from a server using ajax, how to load data from a server using ajax, load data from a server using ajax, load in data from a server using ajax, how to load file from a server using ajax, how to load in a file from a server using ajax, ajax, insert content from file ajax, insert content from a file using ajax, ajax how to load data without refreshing the browser, how to load a server file in ajax, how to load html file in ajax, how to load text file in ajax

Id: XhMGV8PzyOg

Length: 12min 5sec (725 seconds)

Published: Thu Apr 20 2017