Learn JavaScript AJAX in 1 hour | Laurence Svekis | Skillshare

Learn JavaScript AJAX in 1 hour

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (55m)
    • 1. AJAXjs

      1:33
    • 2. 1 AJAX course introduction

      3:00
    • 3. 2 Course Resource Overview

      2:07
    • 4. 3 What is XMLHttpRequest

      3:34
    • 5. 4 Create Connection to external file

      4:29
    • 6. 5 What is readyState

      3:41
    • 7. 6 httpRequest status check

      3:38
    • 8. 7 Get and output file contents into HTML elements

      4:14
    • 9. 9 Tips and Tweaks with AJAX

      4:50
    • 10. 11 encoding data to post via AJAX

      3:46
    • 11. 12 Create PHP endpoint

      4:19
    • 12. 14 Post data to the server get callback response

      2:18
    • 13. 15 Send input data to server

      4:42
    • 14. 16 AJAX Parse response JSON data to output to HTML elements

      3:18
    • 15. 18 How to practice AJAX create JSON files

      5:47

About This Class

Learn JavaScript AJAX in 1 hour
Guide to Dynamic JavaScript send and receive data from external files. No page reload create JavaScript Objects JSON

Do you want to create a better user experience within your web content?

Learn how to create AJAX calls with JavaScript. Just JavaScript power up with AJAX

AJAX is for you, its perfect for creating seamless interactions between your JavaScript web browser and external files. Great for server connections.

Be ready to be amazed!

AJAX can get data from external files and load them into your JavaScript without reloading the web page. No page reloads!

AJAX can send data to a server and receive callback data to use within your JavaScript logic

AJAX is perfect for JSON data, works well connecting the server content to web content.

This course is designed to deliver a step by step learning experience so that you can learn AJAX quickly. Get started with your own web applications learn AJAX and take your content to the next level.

Learn about

Getting external file content
Posting content to a server
Using JSON data parsing and outputting to your HTML elements
Knowing how to use AJAX can set you apart, and understanding AJAX is the key to better user experience. I'm here to help you learn AJAX and ready to answer any questions you may have.

By the end of the course you will have the skills and resources needed to make your own AJAX calls.

Transcripts

1. AJAXjs: do you want to create a better user experience with your Web content? Ajax is for you. It's perfect for creating seamless interactions between your JavaScript Web browser and external file contents. Making server connections easy. Be ready to be amazed. Ajax can get data from external files, load them into your JavaScript without reloading the page Ajax consent data to your server and retrieve back callbacks data and use it within your JavaScript logic. Jax is perfect for Jason. Data works well, connecting the server content to your Web content. This course is designed to deliver a step by step learning experience so that you, too, can learn Ajax. Quickly get started with your own Web applications, learn Ajax and take your content to the next level. Within this course, you're gonna learn about getting external file content, posting content to a server, using Jason Data, parsing out, putting your content to HTM elements and a whole lot more. All the source files and resources are all included within this course, so you've got everything you need in order to get started quickly. Knowing how to use Ajax can set you apart and understanding Ajax is a key to better user experiences. I'm here to help you learn about Ajax and ready to answer any questions you may have. By the end of the course, you'll have the skills and resources needed to make your own Ajax applications. So what are you waiting for? Let's get started with Ajax. 2. 1 AJAX course introduction: welcome to our course on learning about how to implement Ajax via Javascript. My name is Lawrence, and I'm going to be your instructor for this course. I'm so excited to have the opportunity to present this course to you. Within this course, we're gonna be showing you a lot of really amazing things that you can do with Ajax. I come to you with over 18 years of Web development experience, and I'm excited to have this opportunity to present Ajax to you. Ajax is one of my favorite technologies to use. I use it all the time and I really enjoy using it because I'm always just so amazed at all the really cool things that we can do with Ajax. So in the course, I'm gonna show you how we can pull in external file content using an XML http. Request Essentially, that's the Jacks request. Send it over, make the call. And we could retrieve back all this wonderful information from this test dot t x x file, t exit t file, and we can actually output it within our html. And then we're gonna go a few steps further with our Ajax, and I'm gonna show you how we can create on interactive form, and we can actually send this information, post it and have it returned back into our Web page. So we're doing all of this via PHP file. So sending the Ajax call seamlessly. So notice no page reload. That's one of the best things about Ajax is that there's no patri patri load and to the user coming in filling out this form. This is seamless, but what's actually happening behind the scenes is that Ajax is taking the content from this input field and this input field, and when we click the button, it's sending it over to our PHP file, which is returning. Jason Formatted Response. We're picking up that Jason formatted response in our in our JavaScript, parsing it and then out, putting it in a reach to melt. So I know quite a lot of stuff happening, even though it looks really seamless and makes for the user. And that's ultimately the experience that we want for our Web users. So next, and also we're going to show you is how we can pull in external Jason files using Ajax, so bring them in externally into our Web content. So this filed over here is actually sitting over here. So we're pulling in this information from our online Jason file and we're out putting it in our local machine. So I'm gonna show you had to do all of this and a whole lot more. All of the source code is included, so you two can work along with the lessons in the course as well as resources setting, abusing throughout the course. So I've tried to include everything that you need in order to get started quickly. So when you're ready, let's begin creating some amazing things with Ajax. 3. 2 Course Resource Overview: in this lesson. I want to do a quick overview of the resources that I'm gonna be using within this course. So I'm gonna be using an editor to write at the code. The editor that I'm gonna be using is Dreamweaver. And you could use any editor that you want any text editor, anything to create HTML content HTML files. And then those files could get rendered out within the browser. The browser that I'm going to be using is chrome eso chrome browser. The reason I like to use chrome is because it's got depth to us here. So I've got that open here. On the right hand side, I'm on a windows machine, so it's control shift. I toe open up that inspector, or you can go over to here on opening up under more tools and developer tools, and that will open up this console and we're going to be using console log to communicate back and forth from the JavaScript. So from the JavaScript code. So we're gonna pop out some information here within the console using console log as well as some content here within the display area. So another resource that I'm gonna be using within this course is gonna be code pen I Oh, so this is a website that you can you can set up a free account. You can also create free code pens. They are publicly available if you're using a free count. And one of the real reasons that I like to use this one for tutorials is that whatever I type here within the html CSS it shows up here on the right hand side in the display area. So this is a really effective tool because it allows us to see in real time whatever is happening here when I'm typing in some code here JavaScript, html CSS we see it in real time. So I'm gonna be using a combination of all these different resources. And in order to follow along, I'm also gonna be providing all the source code. So in order for you to follow along, all you need is an editor and a browser, or just a browser and an Internet connection, and you could do the same stuff that I'm gonna be doing within the course. So when you're ready, let's begin creating some Ajax Java script calls 4. 3 What is XMLHttpRequest: in this lesson, I'm gonna be introducing you to how to use Ajax. So how to make an Ajax request on XML? Http request how to create one of those and how to utilize it in order to make a server connection using your JavaScript code. So this is going to be straight JavaScript so we don't have to bring in any other libraries . Nothing. Anything additional other than just javascript. So you can open up your editor and create your JavaScript tags so anywhere within an HTML document. Or you could just create the JavaScript tags. So you have a place to run some JavaScript. And once you start using Ajax, I guarantee you that you're gonna be blowing away by all the amazing things that you can do with it. You can send data and receive data without page reloads, and this is really crucial when you want to have a really good solid user experience that you give the use of the ability to get a bunch of data, interact with that data and send that data over to the server and received dynamic content even back from the server. So do ah, whole round trip around to the server and all seamlessly for from the user's perspective. So the way that we do this in the way that we initiate Ajax call is we do something that's called and we create an object in XML. Http. Request object. So this is so I'm gonna basically be setting up just a plain variable in older toe. Hold that http request and I'm gonna call this variable http request and create that new object. So this is the important part here that we call to the particular object that's called http XML http request. And I gotta just console log this out now so that we can take a closer look at what's contained within this object. So save that and we'll go out to We'll go to hear, Refresh it. And of course, we don't see anything in here, but we go into the console and we see that we've got eso console log essentially gives us the ability. Toe log information into the consuls were logging information into the web page. So noticed nothing is displayed in the display area, but within the console, this is just running in the background of the browser. This is where the JavaScript gets rendered out and we see we've got our object here that we've just created and we see we've got a whole bunch of values here and these values are going to be important. Understand that this is what's contained within that http request. And as we initiate different functionality within this request object, we're going to see things change like the ready state there. And if we're retrieving information back from the server, we're going to get response text. We're going to see the status change and a whole lot more. So there's a lot of information here, and we're gonna be able to work within it and make some updates and pull it some information as we make a request. So in the next lesson, we're going to take you through how to make that request, how to send that request, and you're going to see that all of these values they're going to be changing as that request goes through and as it comes out successful or if it fails, we're going to see some information here. So that's coming up in the next lesson. 5. 4 Create Connection to external file: So even though we don't see anything happening yet within the display area, this is where all the magic is happening. JavaScript is handling all this magic. And now we've got access to all these values as we create this request. So in this lesson, I want to take you through how to open a request and outshoot to send a request. And the idea with Ajax is that we're actually connecting to another page. So I'm going to just create simple html page and I'm gonna put in some content here. So maybe we just put hello world or put some HTML content here and create a brand you file . I got a call it test dot text, so I'm going to create a text file. Now, you can have access to any file, but for the purposes of this lesson, I'm just going to create a test file dust text of the test text file. So this is the file that we're gonna be connecting to, and we're gonna pull back some information on that file. So in order to do so, we've already set up that object. So we're all ready to go with the object and Now we need to add in our functionality our methods in order to initiate that object. So the type of request that we wanted to do is use the get method s Oh, this is, uh there's generally two types of methods that are used we've got get in post. And if you're familiar with HTML and then we know that get is less secure than post and get passes the values in the U R ice on the request, the request variables are visible within the you are a So there's two different types of requests and I'm gonna show you how to do a post later on in the course as well. So the first thing that we do, we specify the method. And then we need to specify the file that we wanted to access the so the Earl of the file. So because the file is located within the same directory, So it's gonna be a really short URL. I'm looking connecting to test dot text. And then lastly, we need to specify whether we're asynchronous and if we've got a user name and password, we can specify that as well. So I'm going to just simply leave it at true because we just want to call eight synchronously. And then now, lastly, we're gonna take that same object here, and we're going to just call over to send That should be sent. And now I can actually do another consul log of that http Request object. So let's go out to the browser, refresh it and see what happens. So the 1st 1 here we see, that s so we've got that object information here and we see that the ready state is at zero . But then after we've sent the request, the ready state is that one? We've got some additional information here. So we see when we open that up, are ready status for because it actually skips through and goes through all the different five ready states. So it starts at zero. There is 1234 and we'll take a closer look at that in the upcoming lesson. Eso just want to point out here that we've got a response. We've got response text, we've got status. And now these are all important values here to take a closer look at as we're developing out our applications and just over here. So now we essentially have the same thing because the way that this works is that it loops through here and we know that JavaScript will run through it twice. Eso Sometimes you're going to get this, that whatever content you've already output here as it updates, it updates it within that output. So because we're seeing that initial state there, we see it as zero over here we see it as one and then actually had finalized at Ready State for when it completed that request. So a lot of it, because it's asynchronous it's happening at the same time. Eso That's why these ones here, they're not actually matching up, but then to the day they are matching up and they are sitting at Ready State for So in the next lesson, we're gonna take a closer look at Ready State because this is the important part of your request, and this is what we're gonna look at and see if it's actually changing. That's coming up in the next lesson. 6. 5 What is readyState: in the previous lesson, we looked at how we can create our http request object and all the contents of that object . Now, I did say that it is important to listen for the on ready state change because this is actually something that's gonna fire off as we're going through it. A synchronously. And we saw that when we're logging it out, it isn't always the same thing that we see up here at the top because it is a synchronous and it's logging in at the same time. So what we want to do is we want to listen for this on ready state change we want to listen for when it fires off. When this particular object fires off, we want to run. We want to run a particular function, which is going to be called Change me or change. Change me, I should say eso let's set up that function. And essentially, when we fire off when ready state changes, then we're gonna console log out and we're gonna log with the current ready state. So let's console log and let's log out that http request and we see that we've got a value here object here called Ready State. So let's log that one out and so we can take a closer look at it within the console. So let's refresh and we see we've got ready State at zero. So that's goes at this current time. Whenever we fired this off, the ready state was at zero. So that's where we logged out that Ready State zero Do a quick update to the source code. So now whenever we fire this off, we're actually gonna fire off the function and it's gonna fire off the console log. So watch what happens here now, So every time are ready state changes, we're gonna actually fire off that same function instead of launching the function once, which we're doing over here, we're gonna launch it every single time that ready state changes. And that means that every time it changes, we're gonna fire off that same function. And now when we take a look at it, we see we started with Ready State one because this is at the point where the ready state changed from zero toe one. So the ready state, we've got some information here. 011 and then it continues to change to 2 to 3 and the four as it loads through the various spot values here of Ready State. So essentially, what they mean is that ready State of zero is on un initialized state. So that's just just just its starting point. A ready state of one. It means that the file is loading or it's trying to lower the file ready State of two equals. That it's loaded ready straight of three means that it's interacting. It's interacting with the file. And already state of four means that it's actually completed that that call so that it's connected with this file so initially were loading the file. When the file is loaded, then we're ready toe interact with it and finally we complete on that. So the next lesson we're gonna look deeper into what? Why we're looking at Ready State and why it's so important to understand all these different all these different values here and understand why we're looking at Ready State. So that's coming up in the next lesson 7. 6 httpRequest status check: in this lesson. We're gonna look at taking a look at our ready state and making sure to see when our rate of state is done. So we know that we actually want to take some kind of action when it's done. So we could do this with a conditional statement. And we can look at the http request object that we've created and we can use ready state eso the ready state value and we can check to see what the current value of Ready State is . And if it actually matches the value that we're looking for in the value that we're actually looking for is four or we're looking for it to be done were completed so we can simply do something like this. We've got http request. So if it's equal to done, then we know we can fire. We're ready to go with our functionality, and we know that it's actually completed so that our request has actually come back and it's requested. Repeat, completed. So over here, I'm gonna Consul log out and I'm gonna use another value that's contained within the object here. So I'm gonna do ready state status. So this time as we load through here. And maybe what I'm gonna do is I'm gonna put this over here so we know that as the ready state is changing, we're going to fire off this function, and then within this function, we're going to check to see if the http request is done or it's got a value of four. And once this completes, then we're gonna fire off, and we're going to show the status. And if the status is not ready, then we're gonna just console log out. Maybe we can console, log out, not ready? Yep. And put a sad face there because we are waiting for it to complete. So let's try this out now. So now we see that we get not ready yet. We get should actually remove some of these cause just so it's not getting too cluttered there. Refresh it. So we see that it starts. So it it's not ready yet. Runs a couple times through there when it get when it changes. So it's still not ready yet. Still not ready yet. And then finally it hits 200. So that means that it's completed so that the status was okay and for status messages. So if we actually don't find the file name, so I'm just gonna mash up that file name so that we don't find it and we see that our statuses for four. So if you're familiar with your error codes, you know that 200 means that the file was found that everything is okay, but a 404 message is sent back when the page is not found. So you can potentially listen for different values and take different actions depending on what the status is. And, of course, if the status is 200 then you know that you're all ready to go and that you're receiving some data and you're ready toe work with that data. So in the next lesson, we're gonna look at how we can start working with the data that's actually being sent back from that file from this Ajax call. And this is where it gets interesting because we're actually going to be loading content that we don't have visible within our script, and we're gonna be pulling it in into our JavaScript, and then we can utilize it within that JavaScript anyway, we want. So that's all coming up in the next lesson. 8. 7 Get and output file contents into HTML elements: this lesson. I want to summarize what we've looked at earlier. And we also know that we can retrieve back our response information as well. So we saw that in the earlier lesson that that http request object actually has contents to it that we can actually output. So let's take a closer look at what we've been working on. So we did a check over here to see if the ready state. So whenever we fire off on ready state change, we fire off this function. This current function, we do a check to see if the ready state is equal to http Request done. We also do a check and we see what the status is. So we can actually do a combination of those because what we ultimately want to do is make sure that our status is equal to 200. And if it is, then we know that we've got a successful request. So once we've got that successful request, now we can do something like response text. Because remember again that we are getting information back if in this object. So I got a console log that it one more time here just above so that we can take a look at it again within the console. So now that we refresh it, we see that not ready yet. Not ready yet. And then once it hits four, we fire off and we get that object and see here we've got that information coming backs. We've got that response text and we can also see our response Text is available here, so it's the same thing as response. But the difference between response and response text is that this is a text format. So really, at the end of the day, when we're getting data like this, it doesn't really make that much of a difference. So you can use either one to pull back that information. You get going to get that same value there. We've also got the response. You are l. So sometimes that's important to pick up a swell. So you have access to all of this information and all this data just for making that one request call. And now you can actually utilize that content that you've just created and that you've just output and you can even put it out into your HTML if you want, so if I had potentially. If I have a div here and I've got I d output So this is just a simple element container that can output some content into. And once we make our request now, I'm all set and ready to go. Teoh send that information using the dom over to that particular element. Get element by ideas how we identify that element film. It was called Output, and that would just do an inner HTML and we equal our inner HTML to the response text. And now let's go take a look at this in the browser and there we go. So we've got our hello world fully formatted. And as I said that we could do response a response. Text eso Right now, at this point, it doesn't really matter, because what we're actually doing is we're writing it out all the completely into the HTML . So it's not like it's in a text formatted way that we're writing it out. It's actually just were receiving that data within that format, and then we're just simply placing it here within our HTML. So it's is easy is that to make your requests, pick up some data from an external file and output it and utilize it within your HTML. So the next lesson we're gonna look at different ways of doing the same thing. So in this particular example we were looking at, we broke apart the different functionality where we had a function, and that was what was firing it off. But we could also shorten this a little bit. We don't have to look for http. Requests done. We can also summarize this and simplify it by updating and changing it to be equal to four . Because we know that the complete value is for so this is another thing that we could listen to update that and same result. So next lesson, I'm gonna simplify this a little bit, move this functionality around and just show you different ways that people utilize thes. Http requests that's coming up 9. 9 Tips and Tweaks with AJAX: in the previous lesson, we looked at how we can do a round trip to an external file, pick up that information, bring it back, and I would put it within an element in our HTML. So this lesson as we know there's a lot of different ways to accomplish the same thing. So sometimes you're going to see some variations of this script and the way that we write our Ajax functionality. Eso this lesson. I just want to give you some other options. So sometimes you might see it that we're doing that function exactly within here. So we're not actually firing off a separate function. So really the same type of thing, Same idea. I just all self contained within that one area. And in this case, we can simplify this because we can use this instead of the http request because all that same information is contained within that current object. So we can simplify it by doing this, uh, and then the status of making sure that it's equal to four ready state and this is equal to 200 then we're pretty much doing the exact same thing. Where were firing that off and we're sending out that information. So this is simply another way to accomplish the same thing. Maybe it looks a little bit shorter sometimes as well. You're going to see it wrapped within a function. So you might have an instance where you want to be calling over to that request. So you want to maybe trigger it through an event or something like that. So maybe if we had something like show data and then this is our function that we're gonna call out. So we're gonna call out to this function, and we're gonna listen for a particular trigger to trigger off that function and really not much different now. Not a whole lot different happening here s so we're just firing off and we're waiting for the click. I am gonna actually add in some html here, so div I d and we'll just call it button and just go click me. Everybody loves click Me Buttons. So there's gonna be def that's gonna be Click me and we just hook up on event listener for That's a document and this is get element by i d. Same thing connecting The elements are picking them up from the dom and connecting our HTML elements to our JavaScript via the DOB. So we just need to identify it by D here. So this is get element by D button and I didn't event listener on Click. And whenever on Click is fired off, then we're gonna fire off a function, and we're gonna fire off the function show data. And actually, we could write the function in here and put H DPP requests, so maybe that is a way that you like to do it. But this, for this instance, would just do show data to keep it all separated. So sometimes what I like to do is separate out my event listeners on our functions and so on. This is a number of different ways of writing JavaScript code. So essentially, it's all going to do essentially that same type of thing where now, whenever we click on it, we fire off and we run our Ajax call. So this is the beginnings of some dynamic interactive functionality using Ajax. And as you can see, if I was just a user come into here and I see this wow, click me and I go in. I click it. I see something happening. But when I look at the page source, I don't see where this hello world is sitting, and that's because we're pulling it in from our external file. So that's essentially how you can pull that data in another option here and just one more tip here before we finish up with this lesson. Eso Sometimes what I like to do as well is rapid in a function. So this function is essentially, This is kind of like the document ready, so this essentially just waits for the dawn toe load before we try to fire this off. So good practice to get in practice of that, just to make sure that we're all ready to go before we actually try to fire off and connect with the Dom information. Eso That's another quick tip and really same type of thing. Same functionality. It's just ensuring that we're ready to go with the dawn. So the next lesson we're gonna look at how we can actually send some information over to the server and work with some of that information that's coming up in the next lesson 10. 11 encoding data to post via AJAX: in this lesson. I want to transform this into a post. So instead of doing a get request, I want to do a post, and the Post is actually gonna be slightly different. And there's some stuff that I wanted to run over before we actually start doing our posts. So let's open up some space here within our script before actually transform it into a post . And we're gonna take a look at creep Variable called my data. So my new data blah, blah, blah. And the reason that I'm creating this variable is because I want to take a closer look at the spacing. Because if we try to send a variable over with spacing, it's not gonna actually work within our JavaScript. When I console log this out, we can see that my data and we'll take a closer look at how this is gonna look within the console. And I get opened that back up there. So we see my new data blah, blah, blah. So this is actually not a girly good format to send data over. So now if we do something, we're going to use a JavaScript method, and it's called in cold you are I So we're gonna just place that in there, and then we're gonna place the my data within that method. So now, whenever we refresh it, we see these get these percentage 20% 20. So that's saying you are I equivalent of a space. And so now we know we've got a string value with no spaces, and we're actually ready to post it over. So if we wanted to post over a value, we have to do it in this type of format where we've got on creating the variable, I'm gonna call it my post and from here s so we need to specify the same way if you think about how in HTML form works where we've got names and we've got content associated with it . So we've got key value, essentially, And so this could be a name he or something like that. And this is just how we're picking it up on the other end on the server. And so we're gonna do name, key, equals, whatever our value that we want equal it too. Eso we could equal it too, just whatever of value. And if we had additional variables, who want to send over the my data. I could do it in this type of format where I would equal it too. But I have to use this encoded version because this is important because we don't want to pass it over with the spacing. It's gonna throw an error. So not a good idea. So make sure that you encode your data and now we're ready to post post that data. So one of the thing that we do need to create in the next lesson is we need to actually create a new endpoint that can receive this posted data. So we are going to do this on our local machine. I'm running. I'm running Zam Server Select his inability to run PHP on my local machine. So you will need to have some kind of server technology in order to pick up your posted content so that we can actually see that it's working S o. This is why I'm going to set that up. And I actually had to do that and create a really simple script in PHP to pick up these values from Ajax post and actually send something back into our HTML page. So all of this done seamlessly through Ajax and that's coming up 11. 12 Create PHP endpoint: in this lesson, I'm gonna show you how to set up our PHP file that will actually receive this data and send that information back. And if you're not familiar with PHP, don't worry, because it's gonna be really simple and straightforward, and I'm only doing this in orderto have somewhere that we can actually retrieve that data. And also, I want to demonstrate how this is actually gonna make sense with the values that we're sending over. So over here in the Post, we're gonna have something called Name Key and my data. So we're actually going to send over to values into PHP. So my name, he and my data, these air the two variables that we're gonna be picking up when in the U. R I that where? Posting via Ajax over to this test dot PHP file. So now we need to be able to pick that up using our PHP. We're gonna simp set a simple variable. Maybe just call it name and we're gonna check to see if some of the values are set because we're posting. We need to post use post in order to pick up those values. So now we just need to specify the name of that, the content that were retrieving over here. So that's just by this name. So we could go to see if that is set. And if it is set, then we can set the post value of name key to be equal to that current value. And if there's nothing there, then I'm gonna rape that no name. The reason that I'm doing this is that I actually want to be able to build a J. Sohn response back that we can pick up within our JavaScript. So that's why I'm I'm going through all the trouble here of only just picking up that content. I want to actually post and set something up here. So maybe it could do something like data and update. That's it's literally the same thing here. So this one's going to say no name, and that one's going to see no data. And now all we need to do is build out on ARY, and this saree is how we're gonna parse it. We're gonna encode it as Jason format. So essentially all I'm doing here is picking up these values and if there's no values and I'm setting a value here and then over here in the array, I'm actually just putting some some values that it be returned via Jason. So it'll all make sense in just a few seconds once we get this content up and ready so the rate can hold as many values as we want. So we've got data and whatever we want to do with it s so even at this point, once it comes into the server, there's quite a lot that we can do with it. So I'm just creating some content that we're going to be able to see in the response back. And then this can actually be. But we could do success or something like that. And obviously, if you're writing up here code, this logic has to make sense. And also, besides the logic making sense, you can really make this dynamic. You can interact with databases and so on. So that's what really opens up the door to a lot of opportunities. So there we go. So we've created our test PHP file. Eso If we actually go out there right now, we can see that what gets rendered out here is a nice formatted Jason String. And now, since we've gotta Jason format output, we can call that Jason format back into our HTML and actually utilize it. So now let's go take a closer look at our HTML and create our post request. So the next lesson I'm gonna show you how to connect everything together and make your post requests retreat that information and output it within your HTML elements That's coming up in the next lesson. 12. 14 Post data to the server get callback response: So you ready? Let's transform this into a post. So there we go. We transformed it and opposed and actually still need a few other changes. Here s Oh, not that easy. But not a whole lot to change. Test stuck. PHP. So we need to specify the method post. We need to specify the URL that we're connecting two sets test PHP. So let's right there within that same directory and everything else is the same we're sending. Although we do need to send some data over. So let's side. Let's take a look at this and see what data we can send over. So maybe we want a place that variable within here, and I'm actually gonna do that. My data. So I think that that's OK. So we'll just sending over the my data and that we need to place that and coded you are I components and make sure that you keep that in there. That's really important, because otherwise you're gonna end up having a bunch of spaces here within this send and it's gonna get ugly. So it's not gonna work out Well, so now let's go check this out and refresh our browsers So we've got our beautiful click me or click me text really enticing. We click it and we retrieved back our data. So and that's all there is to it to send over content and retrieve that back. And we see that now, actually, So we're not picking up any data yet. We're not picking up that name key, so something still isn't passing properly. And that's because we've gotta encode the headers s. So this is one thing that's important that when we are doing our send requests, that we do include that included headers. So this allows us to encode Earl encoded content within our request, adding that in going out to our page clicking the button and now we see that we're actually passing our data. So don't forget to include that request header. That's another important one. And it's an important thing to include here because we got to make sure that the content type is specified, and this is the same thing that you would use when you're actually submitting data from ah form. So I'm gonna show you that in the upcoming lesson 13. 15 Send input data to server: So this lesson. We're gonna take this one step further and create some input fields here. So this is gonna be allow the user to come into our web page ad in some text here, input text, and we need to assign an i. D. So that we can actually pick up the contents of it. So maybe this will be f text and just gonna copy this over. So we're gonna have to fields here, and maybe we can call it data text or key text or something like that, so that we just need a way to be able to identify it and pick up these field information here. We've got our click me there or click button. We can also apply some styling to it just to make it a little bit nicer and more appealing . Eso that, uh, queues were looking at this. It doesn't really look like a button. So just gonna do a quick transformation. CSS transform it into a button. So going out of borders, every button needs to have a borders one pick, solid black, and also give it some potting. So maybe 10 picks of padding, so that look a little bit more like a button eso Now we've got Ah, Button, We've got some text here. And now let's find a way to pick up that text. Instead of taking the my data, we're gonna pick it up and we're gonna do variable my data. So we want to do it at the time here, within that function s so that means that in case anything changes when we do the document get element by i d. We're gonna pick up that value documents get element by i d. And yes, that is my favorite one to use, cause it just makes connecting to the dawn. Content ever so easy to get element by i d value. And this is gonna pick up the value within that input field. So you've got my data, and I also want to do another one here for for the other text that we're sending over. So I'm just doing a quick look and we just had a name key there, so maybe I could just give it a value there, and we've got the my data up and ready there, and I just need to make one adjustment because we don't want to forget that we want to encode it as you are. I component in case the users coming in and leave in some spaces. Eso we don't want that to happen so quick. Look through We can erase this. Now we can get rid of that. And now let's check the suit and see if it works within our browser. So just go back and refresh it. So we do have a click me button. And while that turned out pretty big So, um yeah, so either way, that's click me buttons. So now we can enter in some test content. More contents. Well, uh uh, it actually doesn't really matter. So when we click it, we see that we receive back our test content. Our data's test content, our responses, test content. So I think there's a problem there with that PHP file. So I need to take a closer look at that to see what is happening. Maybe it wasn't actually the PHP file, and, uh, it's maybe this value here. So just gonna take a quick look through here and can you spot what the problem is taking a look at the JavaScript and it can give you a hint. It's actually sitting in the way that I pull in the element by I d. I must of missed it over here instead a k that should be d Now it's so we just tried again first, and I should actually refresh this cause we have treated the JavaScript second. Now when I click it so we get back first we get back. Second, we get back our response of success all in a g. Sohn format. So this is perfect for us when we want to pick up additional content in information and notices Well, here that we do have the spacing in the output on That's important to note as well that we're not losing our spacing and original of formatting. It's still picking it up within that same way. So even though we're encoding it in the your eye component and coding, we're still seeing that we've got that spacing there. Even when were you turn it back from the server. So the next lesson I'm gonna show you how we can parse through this Jason and actually make use of it within our outputs that's coming up 14. 16 AJAX Parse response JSON data to output to HTML elements: So now that we're getting our response back as Jason Data, we can actually output it, parse through it and there's quite a bit we can actually do with it. So let's go into here, create a variable my response, and we're gonna equal it to JavaScript function called Jason Parse. And then within here is we're gonna put our object information, and now we can actually utilize it in a format where we can do something. So you saw that? We've got a name, We've got data and we've got response. We've got access to all of those. So you've got response name, Plus just put a space there. We've got response data, and we've got another space there. Plus, and the last one was response response. That's an interesting one. There. So turned out, we've got response response. So let's actually gonna put some line breaks instead of species. So we basically what's gonna happen here? We should see an output in the output output in output response. With the response, we should see an output here, So there is an error there. I just need to make quick adjustment to that. So something it wasn't rate within the string here. And so there's a problem here in line 34. Can you spot what the problem is? S O. This is another typo by me. And if you're looking at this closely, you see that I ended up putting a period in There s that's what sometimes happens when you switch from PHP, where you can't make things together with the period and HTML sometimes inadvertently you add dot in. So let's try this out again. So when I refresh it, look at the consoles and nothing in there. So no errors, no errors. Happy he jacks and click me. So there we go. We've got the happy Ajax field that no errors field and we've got the success. So round trip to the server, part of sent back on a Jason format car state through JavaScript and output within our browser all using Ajax all done seamlessly through Ajax. I can even update this, so it's all really seamless. The user actually doesn't doesn't doesn't see all of that, what we're doing in the background. And this is why everybody loves to use Ajax because this is just such a great seamless experience for when users and it can really create some dynamic content dynamic interactive content for your Web users. L within this nice, wonderful Ajax experience. So also do encourage you to try out all the different source files that we've been working with throughout the lessons. Try it for yourself, practice it and see what you can make happen with Ajax. 15. 18 How to practice AJAX create JSON files: this lesson. I want to show you how you too can practice working with Jason Data as well as working with Ajax calls. So in earlier lesson, I did talk about how I've got a server set up running local host. That's how I'm able to go to a local host. So I use on application called Zampa, since available for free download. And essentially, it allows you to set up a PHP my my PHP Edmund databases. Well, so whole bunch are really good stuff here and really does help you practice within your own computer. So you don't even need an Internet connection. You can set up a whole PHP development environment. You can set it up on Windows Lennox and OS X. Ah, so really great resource to utilize. And another really great resource to practice, as I mentioned earlier, is code pen. I owe. So Code pen is really cool because it prides you so much nice functionality and you can try it out, practice it right within your browser. So the first thing that actually need to do is create peach Jason file and eso. Basically, my Jason dot com allows me to store Jason files right on the server. And this is what I'm gonna use to connect Teoh from code pen. So let's, uh so I know where that I've got a really good jesus on file so good at the test stock PHP . So I'm gonna enter that in there. And first of all, it's police. So that's the name Lawrence instructor and course on learning Ajax. It depends. Response will be success. So we just saved this eso create a really simple little Jesus juice on file. That's who's that. There s So this is our Jason file online, and now we can access it via our job, our Ajax call. So first of all, let's try to pick this up. Using our our peach are are local machine. And then I'll transfer over to co 10. Let's open up this code and make some adjustments to it. We're not going to do a post because we're not able to post actually to that server. We can get rid of that. And now I believe we we don't actually need any of this stuff either. And so let's let's try this out now within our Web page. Now, when we click it. And we've got a problem there with the my post because we're trying to send post data so that a little bit of a problem there and I can get rid of these input fields as well. So now let's refresh it. Try it again. So we see that we're actually connecting to this online file this online. Jason, file. We're getting the data back. So again, it's not sitting on our own computer. It's sitting on within this girl here. So we're actually connecting Teoh your l pulling in dot Jason data and putting it within our JavaScript code right within our local machine. So and if you want to practice this a really good resource again, this code pen and I've said that a bunch of times, but it is something that is very useful when you are practicing eso. Unfortunately, I can't update that Jason file, but I can actually do all of my javascript in here conform at my html. And now we see I should I should put my CSS and they're a swell eso that I've got my nicely formatted button that I worked so hard on to place that in there test not, It s Oh, there we go. So actually going to change this with to be I don't know what's going all the way across there and so center the text a little bit on Swell. So now we've got this click me button. As soon as I click it, we load all of that code from that external file that we've indicated. And you, too, can make some different Jason files can update them here within your Jason within code pen . And you can try out different things to pull in different pieces of data and output it within your display area. So within invisible display area for the Web users. So do try the so to do practice it because it does take some getting used to. And I guarantee you, once you start using it, you're gonna be just amazed at how easy and simple it is and straightforward and how much dynamic capability is. You're going to get within your applications by just applying these simple Ajax calls to render out and pull in your data. And also do try to use Jason for passing over that data. Because again, the Jason is a great standard for passing data. It's human readable, and it's also really easy to work with. It just makes a lot of sense here. Eso just simply parse it, send it back and forth, parse through the string values, and then you can utilize that as Javascript objects once you've parsed it. So remember again that I have included all of the source code that we've been using within this course as well as the resources. So do check them out, try it for yourself and see what you can make happen with Ajax.