AJAX get started with AJAX supercharge your web applications | Laurence Svekis | Skillshare

AJAX get started with AJAX supercharge your web applications

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
17 Lessons (1h 31m)
    • 1. Course Introduction to AJAX

      3:25
    • 2. What we cover in this course

      4:11
    • 3. what is AJAX

      3:38
    • 4. Dynamic Form field Check with AJAX JavaScript

      6:31
    • 5. Setting up XMLHttpRequest browser check

      5:59
    • 6. AJAX form data send GET POST

      6:00
    • 7. AJAX request readyState

      6:09
    • 8. AJAX Dynamic Form Summary review

      4:47
    • 9. JSON data as an object in JavaScript vs JSON file using AJAX

      6:03
    • 10. AJAX ready set go

      3:50
    • 11. AJAX JSON file connection

      4:05
    • 12. AJAX response text data

      5:38
    • 13. Creating the innerHTML from JSON file

      11:07
    • 14. JSON AJAX quiz summary

      2:03
    • 15. JQuery AJAX introduction

      5:01
    • 16. JQuery ajax post with callback response

      4:38
    • 17. JQuery AJAX return response error success

      8:08

About This Class

Using AJAX create amazing DYNAMIC web content using JSON JQuery JavaScript for no page reload content loading

Learn how to make a DYNAMIC WEB FORM that uses AJAX to connect to the back end code and return responses. Learn how to make your HTML page content interact with BACK-END code.

Learn how to make JavaScript come to life, we show you all the building blocks you need to create your own JavaScript interactive applications.

Source files included!!! No wasted time we get right to the point. Lots of extras to help you learn.

Within this course we show you how to make a instant username check, which uses AJAX to connect to PHP code. JavaScript DOM to get the form field value, then send that value to the Back end via AJAX. Callback response from the Server, and then output it in HTML using JavaScript. We also show you how to use AJAX in JQuery to do the same thing.

We show you how to pull in JSON data into JavaScript and parse it as a usable object to build HTML content.

Everything you need to learn about creating Dynamic JavaScript web applications is provided within this course.

  • no wasted time watching someone type
  • quick lessons get right to the point
  • fully covered topics with real world examples
  • source files downloadable to work along
  • challenges and lessons
  • trusted name in education since 2002
  • full HD easy to read source coding
  • quick response support to students
  • regular discussions

Transcripts

1. Course Introduction to AJAX: welcome to the next level off dynamic interaction on your website using Ajax. And if you've never used Ajax before while you're gonna be really impressed with what can be done with Ajax, my name is Lawrence and I've been a Web developer for over 14 years. I regularly develop dynamic Web applications, and Ajax is definitely one of my favorite tools to use to really interact with content and to create some dynamic content. So patching together PHP constructor languages with JavaScript and being able to interact with that dynamic content really makes a jack standing as well as being able to access Jason files and data files and pull that into your JavaScript is creates that new level off content that's available within your JavaScript file. So no longer do you have to connect over to a job script source file and pull it in as an object. You can really have some dynamic ability to pull in content in a more readable format, which is Jason, and this is all done through Ajax. And within this course, I'm gonna be sharing my knowledge of Ajax with you were going to be building out several applications, so these air some useful Really good use cases for Ajax. One of them is going to be this form data where we can do a check to see if this name is already taken within the server. And if it's not, we're gonna be able to return back that it is available. Eso just by simply typing it in. You've probably seen these types of formats before, and this is Ajax That's at work here. A swell as pulling out all this data from Jason. So really, truly amazing things that you can do with Ajax. So we've set up a zam server in order to host our PHP files. So we've got that running here in the background. If you're not familiar with setting up a local host, we do have additional course that will provide you information how to set up local host. But it's not gonna be absolutely necessary for you in order for you to practice Ajax and because this is gonna be javascript and you don't necessarily need to know PHP either for this course, because we're gonna be discovering off some basic aspect and you can actually just create a text file with whatever response you want? Of course, it won't be dynamic because the dynamic ability really has done here within the PHP code. When we're connecting through Ajax, but you can work with it and eso you don't necessarily set up a local host, either. We're gonna also be providing all the links and resources that we have available that we're using throughout this course within the resource section of this course. So it's encouraged that you do Check that out and you do download that information. If you don't have a text editor, we've got a listing of some great open source text editors that are available online that you can download as well. I'd like to welcome you to our Ajax course and let's get started. 2. What we cover in this course: welcome to our Ajax course. So Ajax is short for asynchronous JavaScript and XML. Within this course, we're gonna be walking you through how to create this type of format where we use javascript to check the server. So we do an Ajax quarry over to the server, bringing back a response and output in that response within our HTML and the best thing about Ajax. And the most useful thing is that you don't need tohave page refreshes. So you can see here that whatever on typing in here, this is actually going over the server, the servers checking this value to make sure that actually we haven't array set up, and it's checking to see if this is within their ray. And if it's at least three characters long and if it's not in their ray, that tells me the name is available. But if I do type in a name that is within that ary, it's gonna tell me that just got to remember a name that is taken. So we do have Jack eso. It says name is taken. Eso same thing for John name is taken, but if we do something a variation of it this is not available or it is available because it's not within that being returned within that array that we're using on our server. We're also gonna be walking you through how to pull out, use a Jason file and create content on your HTML page. So here we've got a bunch of content here with built at a quiz with a bunch of questions, several different answers and were able to actually detect if the answers are right or wrong. Eso simply by clicking on it, you can see if it's going right or wrong within our consul, we're gonna be showing you how to make a variation of this using a Jason file and pulling in that data using Ajax to build out your HTML page requirements for this course are a basic understanding of HTML. We're not gonna be getting much into CSS. We're going to using boots drop as our styling mechanism, and we don't have any CSS within any of this within any of this course. And we could be talking about basic HTML so picking up dibs, but it is essential that you do understand it. Javascript and working with the dawn. Then later in the course we're gonna be getting into J query and how to use Ajax in J Query as well. So a basic understanding of J. Query a basic understanding of javascript and Jason. If you've never seen Jason before, never use Jason before. It's gonna be really easy to pick up, so I wouldn't worry about that. But it is something that we're gonna be including within this course is, Well, we're gonna be running through Jason and bringing that in that Jason file as a data file within our within our html document addition. We're also going to include all of the source files that we're gonna be using throughout the course s so you can see them here at the top of my page. Here s so we're gonna be including all of these source files. So you're gonna be able to download them and work with them on your own and test out the code. So it's really important to practice the code to get really familiar with it and to be able to work with it better and to customize it. Teoh, suit. Whatever your requirements are for Ajax, so whenever you're ready to begin Let's begin. Open up your favorite text editor. And again, if you don't have a text editor, we've got a whole bunch of open source downloadable ones that are available within the resources section of this course. 3. what is AJAX: welcome to our Ajax course, and within this course, we're gonna be walking through what Ajax is and how to use it. So Ajax is not a programming language, but it is a standard that gets used in order to communicate from the server to the Web page . So without reloading content on the website, you're able to actually get dynamic results. And so what, within this example, what we're looking at right now, So we're typing in a name and this is a simulation of if you want to check if a user name already exists and we can see here that if we do hit a user name that exists within the system, it says name is taken, we also have the ability to hit the button to make the check is well. But we've just done the key up function here within Javascript, where whenever you're typing and the key up, it does that check here, a swell eso you can were easily work this in within a form. And you probably see these fairly often whenever you have these dynamic forms, where you can create a user name where it checks. If the user name is available upon entering in whatever content it is you're doing up here . So essentially Ajax just allows you to have this dynamic ability to get content on your website and change it As you're in putting content over here, it allows you to change it within your sight as well. So working with javascript, this works amazingly well on Ajax is short for asynchronous JavaScript and XML. So in another example, we're gonna be talking about how we can load an entire Jason file and create this dynamic quiz here just using JavaScript, Ajax and a Jason file. So if you look at the source of this, you see that there really isn't any kind of html within here. This is all loaded in from Jason, and then we've got our requests here, so we're gonna be going through that as well. Within this course, we also walking through the different Ajax and JavaScript functions, and the only important thing to remember where the most important thing to remember with Ajax is that allows you to change content on your site without having a page, reload, seek, unload external files and or form submissions or whatever you want to do. and allows you to get a response from a server. And this really does God allow you to have a lot of dynamic ability within your HTML just by using JavaScript alone? I just went over to the Jason file. And as you can see here, this is the Jason file that's actually creating that quiz that we're looking at previously . And you can see it's very straightforward. It's really easy to use and this is the standard that we're gonna be using. Preferred standard over XML. It's becoming more and more popular to use Jason over XML, but you can use Ajax with XML. You can use it with Jason as well as different return sources. For the data from server, I would put information. So over here, this is using adjacent form here. We're just clearing the server. So we're clearing over to the server and we're checking if this input were setting over the input information from here to the server and we're just checking to see and the server is determining what we're out putting down here at the bottom 4. Dynamic Form field Check with AJAX JavaScript: In the previous lesson, we had looked at this Ajax form where you could enter an information and it would do a dynamic check to the server to check if there is availability for the name. So if we tired a name like John, we see that the result his name is taken. We also included a button here to check content. Eso This is if we expanded our form or if you want to have some other trigger to do the actual Ajax check to the server s. Oh, this is just another trigger that does the same check to the server. So it's gonna run that same function. Now let's look at the code and the code here below for the HTML. So we've got our JavaScript here at the top and we've got basically set up a JavaScript function and then we've got all of our Ajax information here and then just down here below , within the body of the HTML, we've got our input field and all we've done here is we've added on key up and we're running this function on key up. So whenever anyone is interacting with the field and they do keep up it does. It runs this function which runs a check. And does that Ajax request over to our server. So checks in our server file the PHP file sends that name value that user name value from the input field over to the server and then does a check. And as I mentioned before this button here, it's currently it's not being used when we do this dynamic check on key up. But we've left that in here within this example, in order to indicate that there are different ways to launch this trigger eso You could also add listening events and other different types of ways to trigger this function. So the the process is that as long as you're tricking the function at some point or whatever point that this check is going to be necessary, that's when it's gonna trigger that function. It's going to make that call to the server and just start to look at the server file quickly. So this isn't gonna be too deeply into PHP. What we have here is we just have a name. So we're just doing get name and were returning that user name information into PHP. So we can use it as a variable within PHP, and we've said, Ah, users are ray eso. You can also do this differently. If you've got a database, you could do a database connection to check if the name exists I or whatever you want to do to bring in that content that you want to check your existing information. And this is what we mean by interacting with the server. Because JavaScript itself cannot interact with the server. So it does need a constructor language in the background to do the interaction eso, whether it's PHP or whether it's some other constructor language or if you just simply have on output file. You can use Ajax to interact with that output file, so it's not really looking at anything. It's just looking at this file and checking that that response information. So even if we were go going over to that PHP file by itself and if we did something like name equals John, it returns back. Name is taken. If we go back something underneath that we see that the same result the needs more than three characters, and that's cause of this conditional statement. Eso within PHP we're just doing a string length eso we're taking in this value that we received from the request variable of name were taken in that value setting as a variable called name. And then over here we're doing a string length. We're checking to see the length of this name, which whatever length of characters is available within this variable is going to get returned over here. And if it's less than four, then this condition is met and we echo out. Needs more needs to be more than three characters. And if this condition is not met, it looks at else. And that's where we've got a couple other. Another conditional statement. Eso else. So that's not met. If it's less than four, we'll put this. And if it's more than four, we're gonna look at this other condition here and here. We're just doing a check to see if it's within their ray. So we're checking to see if name is in the user's array and if it returns positive. So if this condition again, if this condition is true, it's going to return. It's just gonna echo out. Name is taken and otherwise, if the name is not taken, and it's greater than four. It's gonna echoed The name is available S O. This is our logic, and your logic might be different depending on what you're trying to achieve with this form . Eso just got to make sure that it makes sense when you work through it. And if you're not familiar with PHP, all this is a very simple, very simple, conditional statement and echo just outputs that that variable or that string information onto the Web page on the Web browser. So that's all it's really doing here, and that's what that PHP function is doing. And this is the same function that we're calling from our Ajax form. And we see here that when we do run that Ajax function, it does query into this PHP fee file and it returns whatever value is being output here. So let's get more into the code of the form, and we can see here that this is where we're doing that we're opening up. We're making a get request to check dot PHP and we're sending a long name equals user name . And that user name is the value of this input field that we've picked up over here, so we just called user name and we're doing got document, get element by i d user name dot value and that's returning this. Whatever value is available when this input field, it's returning as this variable and allows us to use that within JavaScript. 5. Setting up XMLHttpRequest browser check: within this lesson, we're going to get more into how to break down this Ajax request and what all of this means . So it does look like quite a bit of coding in order to get that result. And it certainly is a lot easier to do this with Jake worry, which we're also gonna be showing you in a later lesson. But it's important to understand the fundamentals. And with JavaScript it's a little bit easier to understand what's really going on behind the scenes and what's what all of this means is important in understanding what is going on behind the scenes. So here we do have this H T h m l or XML. Http request and what we're doing this is setting up this new H XML. Http request eso What we're doing here is we're just doing a check to see if this is available. And if this isn't available within the window, eso also within this course it's important. Understand how the dawn functions. And if you're not familiar with the Dom, this is where all the HTML elements get loaded into javascript. It allows us toe have access and use of those elements So if we were to do something like console, log window or console law document. Just going to show you what happens here now when I go to the browser. So we're using our console here. We're using chrome because it doesn't really have a pretty good consul, and we can actually make this a little bit bigger, so it's easier to read. And so what we've done here is we've just done a console log, and we've sent all of the values from window into the console so that its readable for us. And here's where we've got all of these different functions and variables and values that are accessible. So this is what's known as the Dawn because now we have access to all of this information. And for this one, what we're doing is we're doing a check to see if Window XML http requests exists. And if it does exist and basically all that means is it's just checking to see if it's a modern browser. And if we're able to you to make this kind of request within this browser eso here we do see that we do have it. It does exist. The x XML http request actually does exist. Eso This is because it's a new browser or a modern browser s older browsers such as I e five or I E six Use active X instead of instead of the XML. Http. Request, uh, and this is why we're setting that down here. So this isn't actually necessary for us to to operate or to run that Ajax called within chrome because chrome is a modern browser. So no, none of this is really relevant until you actually access it with a new older browser. And then you do need that Activex for Ajax to function. So this is for the older versions of I e D I E s five ie six and maybe even i seven eso depending on the older version. So this is becoming less and less relevant, actually. So if you're not including that and if you're not expecting people on older browsers, then you really don't have to worry about it, but usually good practices just to include it, just in case somebody does come across on an older browser and they do need to use Activex instead of the http request value. So with with the dawn, we can see here that we're able to create this new object and we're tying this object information as called Ajax request. So we set our variable. They're calling at Ajax request. And over here, we're using these variables, and we're gonna be using it quite often, as you can see here within the code, Uh, that we're using this now that we're defining it as a new object of XML. Http, request and fickle back out here, we can see that we do have some information here that we can look through and we do have the name of it to string. And we've got some other information here is well, within that. Sorry, guys done had a received loading. And this is just the communication between the difference. Http. Request objects. Eso This is what's being returned for this one. And this gives us the ability to make that request out from our current browser. And this is probably easier to understand if you do understand working with the dawn s. So if you are not familiar with working with the dom, we actually do have a course that will go over all the different dawn objects and how to use the dawn. So going on to the next line. So here we're just setting up this object. And if we can't set up on a modern browser, we set up the object using Activex for older browsers. And that's all of this what this is doing. So what we can do is just space that a little that s o that we understand that we've gone through that. We've just set up this object we've taken. We've called it Ajax requests. So again, just a variable. You can call it whatever you want. And then here is just setting up that object information into that value. So all this is is this just means that we're able to exchange data with the server using Ajax. 6. AJAX form data send GET POST: So we're gonna look at the bottom of the Ajax request. Here s so here. We've got Ajax request. So again, using this object in this is setting up that communication behind the scenes. So we're doing Ajax request and we're doing open and what this is doing. This is just specifying the method and then the girl that we're gonna be using and whether it's asynchronous So if we're doing true, that means we're doing a synchronous If we're doing false, that means we're doing synchronous. And the main difference between the asynchronous and the synchronous is that asynchronous. When this is set to true, it means that we're waiting for a function that's going to get executed once the response is ready. So once everything is ready, then we're going to go through and we're gonna execute the function, but only when it's when the on ready state change event is true. And what that means is that when we do have a value that gets returned here, then we're able to complete this and that's that's what a sequence asynchronous and synchronous. And in most cases, you're going to be setting it to true a synchronous but If you're setting it to false, then you do have to actually keep that change. That's get element by I d result in our HTML, you should do that after the send has been completed because it's no longer going to be running at a synchronously. It's going to be running it afterwards, but again, generally, it's better to keep it as true because of the fact that if you do have any issues or connection issues, you do want it toe weight through to load that follow. If it's really necessary for that toe, work within your JavaScript. And most of the time when you are sitting up in Ajax function or any Jack's call, it is gonna be a ness n Shal part of what's happening on the website. So you do want to set it as true, and it's always better to keep it as true. And then here, of course, we've got the URL, so we're just sending over all of this data. We're sending it as within the PHP file we've accepted. I get request value, and so that's what we're doing here. Is that this that this allows us to really easily include that name value within Ah get. And here we've got checked PHP name equals and then the user name value. So again, the difference is between get and post. Most of the time, I depending on what your requirements again are, is that there's the differences between get and post. And you just got to be mindful of the fact that get isn't as secure as posters as well as if you're sending a large amount of data, it's gonna be a lot harder to send it and get. Then it would be with post, because post really has no size limitations. It depends on your server settings, of course, but you can send a whole bunch more data on post then you can get. And also if you don't want, if you don't want the file to get cached. And if you're updating a database on the server something like that, you might want to send it as post instead of sending it as get. But in this case, because we've got there Ray there, and it's not really going to be something that we're trying to lock down for this tutorial . We're just keeping it as get, but again you do have those options so you could do post. But then you have to change the format of check accordingly as well again, if you do need to use post and if you are sending over form data encrypted, sensitive form data, you have to add in that post value there. So what I've done is I've just done a quick update here and I've also added in the set request header eso that we know what type of header information is. So if we've got some form data sensitive form data, we know what type of the content type and then down here at the bottom, we've added in where we just had the send function there. We've added in name equals and this is how we're able to pass in that user name. So if you had additional values here, you could do something like this, adding in that and percent And if you had something like that, you could add in additional name values within this type of format. So this will now send over last name as well. But this isn't gonna be necessary. Within our example, we're just going to keep that out. Eso When I changed the post over here, I also had to change the post in the PHP file. And when I go over to here and refresh it, I can see that it's still working. Everything is still functioning as before, except that we're using post. And now when I refresh it here, we're not able to get the value of name anymore on this PHP file. So it's just returning that default value. So even though when we do go over six character or four characters, it's no longer functioning because we don't have that get in here anymore that we're just doing post eso again. If you are using databases, you should always make sure that you are using post because you don't want someone to be able to access your database and to do a bunch of queries to this address and be able to access it that way. It's always a better idea, more secure 7. AJAX request readyState: So in the last lesson, we talked about sending data over to the server. Eso What we do need to do also include in our Ajax request is something to handle that if we do have ah server request and we're able to receive information from the server and that's what this is doing over here. This is just checking and receiving that information and catching that data that's being returned from the server. So over here we're doing the scent of the data over to the server. And again, this comes into why we're using true and asynchronous because we're looking for it to when it finishes loading. Then it's gonna no to run the ready state change function, and this is what's gonna be included here. So if the ready state equals four, when the status equals 200 then we output this. And what ready state change means is that this actually stores this function and whenever the ready state does change, So once this is stored within JavaScript, so it goes through and it reads all of this and it says, Okay, well, once this actually this ready state function once it actually does change were able to run this function. So it remembers that and it knows that it's gonna execute that, but only when the ready State is true. And also, it's important to remember that every time this ready state changes that this will actually run that function. So whenever there is a change in this ready state, this function will actually run. And so when we go over here and we see ready State equals four and we're checking the value of Ready State and now that when it does equal for were actually able to to know that we're got response, that the response has been completed and that we're able to get our data. And that's why over here were setting that inner HTML to our response text. And again, this is the Ajax request information. So I've added in Ah, console here, console log out of Ajax request. Just so we have a better idea of what's happening here so again, once that ready state changes, then it's gonna fire off this function and run this code, and part of the code now is going to console locks will be able to show you what's actually coming out within this form data until there's some interaction or until the function is run. We're actually not seeing any of the anything within console. So when I do run the function, we see that we do have this XML http request and we've got our returned information. Eso here, we've got our response. We've also got our response text here. We've got the response. You are l and this is that status that we're looking for. So status of 200 and we've got our ready state function. So again, this is again This is a function that whenever it changes and we can see here there is very minimal information here. But there's a function scope there and some additional information that we're not going to really get into. But it's just important to remember that this is a function as opposed to something like response text. And this is just returning that string value as well as status text. It's OK, Eso This just gives us some feedback about what's happening with this ex XML http, request value and already state again. It's four. So this actually this is why we're looking for a ready state of four and that just means that we know that it's been completed. And we know that status equals 200 means that it's a success. So if you don't wanna have it on success, if you're server is returning something other than some status values. So if you got like a 400 or whatever you're setting that to within the server, you might want to look at different options for this. A swell. But we're just looking at a default of a success here and a successful, um, ready state of four. And that's all. All that means is, we're just taken back, and we're seeing that there's some data that's actually being being returned here and again . This could also get really customized as well. And you can look at the different statuses, whether success or failures and or errors, and you can output the data accordingly. So here we do have what happens when these two piece of criteria are met. So when ready state equals four and status equals 200 we're going to document yet element by I D result and that's ah, this element and we just change that inner inner HTML and we're loading in again that Ajax requests. So that same thing that we've got in console log here and we've got our response text. And so we go back out to our console. You see that? What we're doing is we're loading this. Returned information needs to be more than three characters, and that returned information will change. So now when we go down, you can see how many different requests have been made. And here we're seeing that the responses are changing, So all of these should be sending back that status 200. When we do have some response text there and again, you can pull out any one of these values and use thumb. So if you want to see what the response you are, l is if you want to log that or if you want to write that somewhere, you could pull that out as well 8. AJAX Dynamic Form Summary review: within this lesson. We're just gonna do a quick review off the form document the form HTML and the JavaScript involved in it. So as we can see here, we do have our basic form. What it's doing is it's querying the server and just checking to see if these names are being used. And right now we just have it on key up. And what happens is when we do have a key up, it runs this function. So it's just a simple JavaScript here within the input field s We're not actually using this button, but we're going to keep it in here on also this This file is gonna be available within the documents of this course. Eso When we do keep up, it runs the function, and this is the function. So we've set up that function here as an Ajax request. We're picking up the user name value from this field, so I d user name. We're picking up that value doing get element by i d dot value to return that value information. And then what we're doing here is we're doing on http request eso if the window it does have the XML http request ability. And then it's going to set Ajax request as a new XML http request function and if if it's not available. So if the window is not a modern window or not modern browser, I should say it's going to set it up as an Activex or Activex object. And so once eso these air doing the same thing just depending on the browser is so now that we've set up Ajax request that's gonna hold this object information. We're able to use Ajax Request and check on Ready State. And what this is going to do is when the state changes, it's going to know that it's going to run this function. It's gonna check the ready State of value. Eso were returning. We're checking for a ready state value of four, meaning that there's data and it's ready and 200 just means that the status is successful. And from here we're just setting doing again. Get element by i d result and that's just over here. I d result setting that inner HTML to Ajax request response text. So we're using this Ajax request object and we're pulling back that response text and that was the same thing that we're looking over in the console. So basically, that's filling out that inter html with whatever values being returned from there and then going forward. We're just doing that. We're using post now, eso before we're using get and we're sending the value over and get. But within this one, we've updated to post. So this is more secure again because we are sending form data we had to pass over in this request Headers. And over here we've got check. So this is just that you, Earl or at the location of that server file that you're looking to interact with and to send the data to so again, it doesn't necessarily have to be PHP file or anything else. It could literally be any type of file. And whatever is output in that file, it's just gonna output within that this field here essentially, that's all this function is really doing. But we because we do have some server code here, we are able to make it more dynamic, so it wouldn't just be returning one set of values. It's returning anything that saw written out here and then the Lastly here we're doing? When we're doing our send, we had to send over Ah, value of user name. And again, this user name is the value that's available within this input field. And all we're doing is we're just picking that up over here at Ajax. Request and user name here. Document get element by i. D user named Value. So we can also do that down here. A swell if we wanted to, but usually it's better just to break that out and use it as a variable. And again, using get is actually gonna be quicker. But if you've got a lot of data and if you do need to have secure data, you should be using post and then all we've got down here is just we've got our standard HTML. So this is just an input field, a button and a diff. And again, this site, the code for form is going to be available within the source files of this course s. You're welcome to download that and work with that and try that out 9. JSON data as an object in JavaScript vs JSON file using AJAX: in the previous lesson, we looked at loading and communicating with a server, getting back some dynamic content using Ajax. So in this lesson, we're gonna talk about that as well, getting dynamic content from the server. But this time, that Ajax file is actually gonna build out where that Ajax connection is going to connect to a Jason file, and it's gonna build out all of these questions that we have and it's gonna dynamically create this quiz that we that we've created. So this is all just using Ajax, Jason and Javascript. So now we're gonna go through the code and the code for this document that HTML is gonna be very straightforward. All we have is I d equals output. We are actually using bootstrap eso boots. Drop is just allowing us to have a little bit more styling and some more visually appealing parts to our our form. So it's actually not necessary. So if I just remove that out, and if I go back out to the form and if I refresh it, it's gonna look slightly different. So it's not as styled on. And if you're not familiar with Bootstrap, we do have another course that we talk about bootstrap in as well. And it really does work. Where allows you to create content. Really nice content. Quickly. It's ah CSS html JavaScript framework. That really does save you a lot of time. So it is worthwhile looking into its allows you for responsive design. So what we've done here is we've just got our output and here we're connecting. So initially what we what we've done in previous courses where we've got our Jason J s. And then we're able to parse out all that information from that Jason data file. So if we've got something like Jason Js eso what this is this is just setting up a data object and it's giving us information within that object. So we could literally just bring this in to our file a swell, and we could parse it out as Jason. And when we do that, we see here when we do load that page. So I had for gotten to a NCAA meant those, so I'm just gonna refresh that out into the console. And this is just for demonstration purposes. This isn't actually the Jason file we're going to be using, but you can see here that unp arsed it just It's not a really usable format for objects, but when we do parse it, we see that it does become a usable format for objects were able to go through these different objects. We're able to pick out something like content and content header and were able to build out all of this information into HTML Page eso We just got an example of that here where if we want to build out, get Jason Page, we can look at now that we've brought this in as an object and we can go to page, we can see Main Page s Oh, this is gonna be Jason dot pages gonna equal main page. And when I refresh that suits, we should see that within our consul log here that we do have mean page. So what it's doing is it's placed this all this, some Jason type data as an object and it makes it a usable object within javascript. And when I go over to a site like Jason Lint, you can see that it's not gonna quite work really well because we do still have that variable data this is still a JavaScript file, and when I do copy this code out and I go over to Jason Lint, we're going to get some errors here. And that's because we're defining this Jason value. So if we were to remove out the VAR variable data, we could just do that by setting like that. And when we validated, it does become valid, Jason. But the problem is that if I was to copy and paste this out like this, it's actually doesn't. It isn't a readable JavaScript file anymore. So now if I was, go back out to that local host to see that I'm going to get some errors here because no longer is this file readable within JavaScript because it's not setting it as an object or a readable object. So I have to actually go back and formatted this way because remember, this is still a Java script file and which makes this really not the most ideal way to get the code onto the page. So although it will work, it's not the most ideal way to use a Jason Jason data on your page itself because you are just setting a value and object and you're working through it that way. So we're going to just comment out all of that because we're not going to really need toe work with that. I'm just gonna bring all of that out of the file, and we're gonna actually working with our Jason, our quiz, Jason file. So that's gonna be located on her server as well. You can see here when you go over to quiz dot Jason, that's a very readable format. And if I was to actually take all of that out and if I bring it over to the Jason lint and I validate it, it does come back is valid, Jason. So this is a good I'm good way to work with Jason, But we're gonna have to use Ajax to pull in this Jason Data in order to make it usable within JavaScript. So we're gonna be showing you how to do that in the coming lessons. 10. AJAX ready set go: so initially you might be looking at this and thinking Well, you know that this is a lot different from the form where we actually made this request. We had sent over some data and on the key up, we queried to the server, but it's actually not that much different. We're still making that Ajax request, and all we're doing is whenever the page or the website initiates, we're just calling over this function. And essentially, that's all that we've got within here. We've got Onley this HTML set up to do so. This is our essentially or container our output container, where through JavaScript weaken output html within this container and then within the script tags. What we've got is we're just calling this function. And now this is where the Ajax actually loads the page. So we're not gonna be waiting for, um, for anything any kind of trigger to raj dysfunction. Want dysfunction to run right away and populate all that information from the Jason file right into our html for the for the viewer to be able to see it in the browser. And we don't actually have to send any information over because this again. This is a Jason file that we're picking up and we're pulling back into our JavaScript in order to use it and build out that html page. And that's what we're gonna be going through in the later lessons. How we're building out this enter html and how are making that and also some additional options that we can add into this quiz eso for now what we're doing here. We're just connecting output to get element by i d output. So again, if you're not familiar with the dawn, we do have another course that will walk you through how to use the dom and how everything functions within the dom. But for this lesson, it's just important to understand that we're setting up this variable. And this is where we're gonna output. Are content, are each HTML So we're just using that down here later on. And all this is doing is this is populating this div with this inner html and this is where we're just looping through and building that html and then also just like what we did before in the form were setting variable that we're gonna use ours are object. So again, we had it called Ajax Request. Here, here. We've just called it Ajax. But again, you could name it anything you want, as long as just as long as it makes sense. Whenever you're reading through the cold, so you're able to tie it back to Okay, well, this was Ajax, and this is what I was doing more it my Ajax request. And then much like what we had in the form here. We've looking for those XML HDP p request functions. And if that's available within that window, so it's available within the browser, it's going to run through. So for all the modern browsers, this value is gonna be true. And if it's true, then this condition is met and Ajax equals new XML. Http, request method and it's gonna bring all that information in as an object. And here if it's not true, So if it's not a modern browser and if this isn't available, it's gonna try to do an active X object, and this should cover off again, as we explained before I e five and I e six. And this is setting up that basic Ajax functionality. And after that, we're ready to go with the jacks call that we're gonna be walking through in the next lesson. 11. AJAX JSON file connection: so following along what we did in the last section where we set up the form we've got our next we've So we've set up and we checked our browser to see what version it is and how we load in the object information on naming at Ajax. So this one, it's a little bit different. We just called it Ajax. And so here we're doing Ajax dot open and again, the same thing that we were doing down here. Eso again. The order doesn't matter as much. Eso we've moved that on ready state function below eso here we just had it above. But again, that's not going to really matter because as long as it knows that whenever the state changes that is going to run this function. And so we put this actually below because we want to want to go over this content first and then go over the ready state change information. Eso again we're just using get because this Jason file, it's it's it's available online anyway. Eso if we just went to is dot Jason we may be able to see that Jason file So we're not worried about security as we were with the form in the last one. So we're just using get and again, we want to use that asynchronous. So we want all of the files toe lowered first. And then when it's ready, it's gonna make thes to create that output. And then besides the open, we've got set request header. So much like again in the form where we had set that form Earl encoded type data. So the content type this time the content type that we're doing is application, Jason and again, we're setting that true much like we did in the form or by default. It would have been true. Eso here we're just sending out that request set request header, And this lets us set up to receive that Jason Data and then here, which you're gonna walk through in the next lesson is gonna be the Ajax on ready state change. So again, it's looking for that ready state. And when it's ready, it's going to run through and run all that code there. And then lastly, here we've just got Ajax dot send and eso. There's no information that we're sending. There's no values eso just placed null in there. You can leave it blank or you could just quote it out. Or you could put it all in there if you want. And then lastly, I've got this output dot inter html drive just got finding. And if we do a quick refresh, you might see that finding show up there for a brief second. Eso This is if we are having some issues actually getting that page or connecting to that job. Jason file. We want to have that finding there or some kind of spinner there so that the user knows that there's some data loading us. We don't want them to come here and see while there's a blank page eso what does that mean Rate? So in case that Jason file doesn't load, for whatever reason, we can't access that. We do want to have something for the user to be able to see when they do come to that Web page and say, OK, well, now it's still finding that file. So this is just a message to the user. But what's happening here and then lastly dysfunction, we're gonna be implementing this later. And this all this is doing is this is this checking if my answers air right or wrong and just putting that response in the console. And of course, you could work through this and create your own not responses here within these questions. So the next lesson we're gonna be working through how we're using Jason, and we're parsing out Jason, like what we did here in the beginning. And then this is parsing it out in a usable format that we can then pull through into the HTML code and build out our HTML peach. 12. AJAX response text data: so again, much like what we did informed out html We're looking for this on state change, this ready state change. And once the state changes, we're looking for a state of four and a status of 200. So this means that all of that Jason information that Jason file has loaded, so quiz dot Jason has loaded. And if this condition is true, and if we've got the data sitting there now, we can use that data and that's what we're doing. Within this lesson, we'll talk about that, and we're going talk through all the different JavaScript cold that we've got entered in here. So a lot of this is just styling out that output eso all we really are looking at initially is going to be this Ajax response text. So again, the same thing that we got back here, where we got a response text, we just placed it within the inner html. And that was just some very simple text that was coming back from here, where I've actually got some more complex because we're using a Jason file. So we have to parse out the Jason like what we did over here would parse today and made it into a usable format, placing it in as a data object. And again, this is just a variable name. You can call it whatever you want. Eso just called a data to really simplify the point that this is data that we've received from Jason eso here. We've got our output in our HTML. So we're just clearing out any input that might be there in case we want to load multiple questions. Multiple quizzes. Eso might give the use of ability to do that. We can very usually set that through sending out different Jason files or sources or whatever we want to do. Eso this just clears out that Inter html And I was gonna uncommon thes console logs and so you can see what's actually being responded. So it is gonna do, um, a data quiz, content and a data name, because if we look back at the Jason file, we do have two different objects here, So we've got name. So the name of it is my quiz, me and then quiz content. And this is all the content that's available within this quiz. So again, a lot of different ways to format this and style this eso I wanted all the quiz content on one page. If you want all the questions on separate pages again, a whole bunch of different ways to format the Jason file and then be able to read a through in your JavaScript and output it as html eso here. We're just putting in that quiz content and we're getting that data name. So we're taking in parsing out the response text. And this is where I were actually just going to get into more working with Jason information and Jason file past the Ajax because once we've completed here, we've actually completed our Ajax process and we've received back this information from the server, and now it's just a matter of working with it and getting it to look like the way that we wanted to look. So when I refresh the page, you can see here that I'm returned back that name of the quiz. So this again, this is coming from that Ajax name or that Jason name and then we returned back object, object, object. And here we can see that we've got one object, but it's containing all four questions as separate objects. And then we've also got the answers as objects. So we've got on object within an object within objects. And then here we've just got the correct answer is gonna be one. We're passing through an image value and question value. And again, the reason for working with the Jason file It just makes it a lot simpler and easier to read, as opposed to what we're looking at before, when we had that Js file and everything was kind of crunched together and we couldn't easily make changes. So here, for example, if we wanted to add in additional questions, it's gonna be really as simple as just giving it another key value and then giving it another value associated value. And now, when I refresh it, I should have question number five and so on and so on. So I could literally add in as many questions as I want, as long as I've got different key values here, and I can make any one of these correct, just by changing that correct value there and then here I can change that update, that question text, and this is all that just gets output here question text. So now that we've pulled in the data and we have using quiz content, we noticed that in quiz content there's the four different objects and they're all and they're all the different questions that we have available. Now. At this point, we can begin toe work with our response text, and that's what we're talking about in the next lesson, just simply looping through and working with it. And as for the Ajax, this is gonna be the completion of what we need to talk about for Ajax. Because after this point, we're just We've parsed out that Jason file and with parsed in data, and now we can just work with it as an object in JavaScript. 13. Creating the innerHTML from JSON file: So in the last lesson, we looked at how we can get that data out of that Jason file and place it in as a JavaScript object. So now what we're doing here is we're just gonna loop through data quiz content. And if you remember from the last one, it's just gonna loop through these items that are available within that object. And again, if we were to add in, if we're going over to the Jason file And if we were to add in additional questions, we can really easily do that. Question five. And I'm just gonna keep all of that the same. Actually, maybe I'll just remove out those does look a little bit different. And when I refresh it, I'm gonna have all different All five objects now. And you could see that Question five has now been added in as we're out putting it through . And I'd actually removed at that console so we're not able to actually see it within console. But the quiz content would be the same. So all of this were this looping through. So we're looping through object in data quiz content and is going to look through all the items available in quiz content. Eso the 1st 1 Once we start the loop, we're just setting our output. Enter HTML. So again, here we had cleared out our inner HTML and there's a lot of different ways to do this. You could build that up as a variable and then posted as enter html here at the bottom so you wouldn't have to do all this adding or you could upend it. It's a lot of different ways to go, but for this lesson, we just want to keep everything really simple and readable. So all we're doing here output enter html, we're adding or a pending content into it. So we're doing whatever this outer inched into HTML equals. Two were doing plus equals dip. So we just adding in that divot, the top and then here were closing up that did that. We had created here so again, different ways to do it. But this is just for readability. In order to work with the JavaScript content eso again inter html. And here we're actually grabbing that quiz content object and we're grabbing out question. So whatever value object is so 01234 because we've got five different questions here. Eso, whatever that value is, it's going to return that value there and it's gonna ask and get a response on the question . And again, the question is right, here s so this is the key value. It's just question text, as is pulling back that values. So I just do a quick updated and you can see when I do refresh the page, this should be questioned. Text one updated Just to show you the relationship there, and all we're doing is we're just placing it in aged to tag HTML and placing that return value into their. We can also do something like console log answers because again, remember, we had a bunch of possible answers, and this, again is dynamic. So change some questions at five answers. Some had three. Some had 642 So I think we covered off all the different values there. But yeah, the possibilities are endless. You could add additional answers or possible answers if you wanted to. Within that quiz, and all we're doing here is just doing, um, we're taking that on setting it as a variable called correct answer. There just consul logging that it right now so you can get a better idea of what we're listing out here. And we're listening out for each object. We're listing out all the the answers that are available there within the console there. So that's what we just did there with the console. And again, we're picking up this value of correct just like we did with question. But we're just picking up correct. And when we go back to the Jason file, we see that each one of these has correct. And whatever question is going to be correct is gonna be the one that gets returned. Correct. So this isn't gonna be like the array where we're just looking at those values were looking at 123 45 And that's gonna be the return value. So we're looking at if it has a value off one, that's going to be the correct value. So just setting that up as a variable called correct answer. And here we've got start count because we did one account through all the different answers on and again, we're starting with zero, and we're adding one to it s so we could have started with one and done that addition here lower as we looped through it again, depending on how you want to do that. But just for readability sake here, we're setting it at zero, and we're gonna increment it here to one. Eso got right. So this is gonna be just recording how many answers were getting right, and it's going to start at zero. So maybe we could actually even move this one out out of this space because we don't wanna have to action necessarily. Look through that. And this was just gonna be an overall, maybe a score or something. Whatever you want to call it. Sorry. No, that was actually it wasn't the score. So if we want to make a score, we'd have to keep it outside of the loop. But the reason we've got got right there is that we're setting that value that we're passing over to the my answer function. And then from here, we're checking to make sure if it's if it's right. So this is why we're actually setting? Got right? 21 or zero. So just a Boolean value and what we're doing here. We're checking to see if the correct answer. So of correct equals that start count. And if it does, the values could be one. If it doesn't, it's gonna be zero. So if my answer is a value of one that we're passing over, it's just a matter of just checking to see if that Boolean exists. And if it exists, then we do correct answer. And if it doesn't exist, if it fails or false return would just do a wrong answer s. Oh, sorry. That was my mistake. It wasn't actually the score eso that could be worked into the my answer there below. And then just below that, we've got the output inner html again. So we're setting up that inner HTML. We've got some boots drop classes here for more, more elaborate effects. And we're also setting up this answers. Um, so another option here for styling you could Also, if you want to tie it in, if you're using Jake worry, it's a little bit easier to tie into a class eso, as opposed to just javascript we would have toe loop through, but we're setting these dynamically eso. We can't just simply loop through it because this content isn't actually loaded. Yet when we do the event, so we would we could pick it up on ah, button, click and run through those values if we set of value in there or we could do it like, as we've done here on click Eso this for this circumstance, this is probably that use, easiest way to go. But again, if you're using J Query, there's other ways to set that. And it all has to do with the listener events eso with. If we're just using on click, we don't have to actually set listeners, and that saves us a little bit, according They're going through that. So all we're doing inner inner HTML in the output. So again, output here element by i d. So within here it's just adding in this HTML code that's adding in button type is a button bunch of classes there on click, and this is where it's sending over that got rate value. So it's either one or zero, and one is for correct. Zero is for incorrect. And then here it's just looping through all the different answers that are available. So again, if we go down here and IHS so I was gonna change that so you can see that they were actually looping through the text that's available. There s o might look like we're just looping through, but no, we're actually taking out that Jason information and were out putting it on top of the button as HTML Zwerg, giving it a value there. So going back to that s so that's what this is doing is just doing the same thing that did over here with the answers. But here, it's giving us Which answer is being returned. So we consulate logged out those that we console lago dancers, yet there it is. So what we're doing is we're just taking this a re of objects and we're just listing them out. So here we've just got all the different answers that are available here. And we clicked down. We could see, you know, answer. The 1st 1 value is answered. One. If we open up this one, we can see that the different values are available there and we can see what's being returned on the buttons. A swell. So here we've got the first object. This one is, uh this is right one, and we can see that the text corn sites. And then lastly, what were just doing? We're closing off that div that we opened up in the beginning, and this completes our buildup of that HTML code that we're placing in within output. And this is the completed code that gets output here. So what it does is it loops through here, loops through all the button that are available and then continues on to the next item, loops through that lips to the buttons next one loose through that buttons and so on. And so, until it reaches the end of the file and this is why this side Jason format is much better and easier to use because this one, anyone can come in here and say, Okay, well, you know, I want to build out a quiz. I'll have to do list my question. I've got images in here as well, so if you want to place images, you could easily pull back a source of an image here, place that in the inner HTML and have the images update as well. And if you had multiple answers, eso some questions might have one or two answers. Some have five, and this really does make a dynamic, a dynamic format to create these types of quizzes 14. JSON AJAX quiz summary: So just to finish up what we're talking about in the last lesson where we're building out, that Inter html. So basically it builds up all of this code, and then what it does is it places it within that output. Div. And that's where we get this functionality. Eso we also had added in on Click my answer. So whenever it's clicked, we send over my answer and whatever value we've been able to pick up here within within this loop. So whenever it's equalled, it's gonna be one. If it's not equal, it's gonna be zero. So that value is gonna be placed here within the function and sent over to my answer, picked up as e and read into I d. My answer equals E so I could also do something like just e. And I could eliminate that, and that should work as well. So now when I refresh it, look at the console as much we see that we still are getting those correct answers and wrong answers. And always, when you're working with JavaScript, try to cut down as much about the variable setting and code as possible. Sometimes if you want to be able to document it better. It is a good idea to include those variables, but for this example, because we didn't really need that, that was just an added step. We don't need that. If it's one, it's gonna show up. If it's not, if it's zero is gonna do wrong answer and then here, going further, you could build out some additional functionality, as we have mentioned earlier. If you had a score, you want to score. How many correct answers you want to disable? You want to hide that question once it's been answered. You can do that as well, within that JavaScript and within this my answer function. 15. JQuery AJAX introduction: in the previous section. We had talked about forms and just doing this kind of form check just to see if those values air available within Honore or could be used for a database online. So although this looks fairly similar within here, we're going to be using J Query, and there's a lot of benefits to use in J. Corey. I really love using J Query, because it really does make things a lot easier. So as opposed to our Ajax code that we had to use for JavaScript. We look at the J. Corey code, and it's a lot simpler eso although we're not doing it exactly where we're actually not sending that value yet. We're gonna show you how to do that in the upcoming lessons. But for now, what we're doing is we've just set up, added the Jaqui Library. And if you're not familiar with Jake Worry, we do have another course that provides information about Jake Worry eso as well, just down here below. We've got that input field, same thing that we had down here. We removed out that on key up and on Click, and we're just connecting at adding those event listeners and triggers via J Query, and it's a lot easier to do it that way as well. And Jake were really that Ajax call looks a really, really simple now eso Over here, we've got button button type. So it's button. So all the same thing. We just given it an I d. So that we can connect to it when it gets clicked. And we could run that function that's available. So by default, we've got our document dot ready function s So this is ah J query default. And again it goes into working with the dawn. And when the down is finished and ready, everything is loaded and loaded into the dom. Then we have accessibility to all the different aspects and objects that are available within that document. And then also using the G query library gives us a whole bunch of additional functionality . So with Jake worry, it's all really cut down. All we're doing is identifying this element, so we're just using that so similar to get element by I d. Where we're just getting that I d. We're picking it up and we're just adding that event listener here within the J Corey Dom. So whenever it gets clicked, whenever this I d gets clicked, we're going to run through this function. And then over here we're just picking up that value from user name and setting it in a variable. And again, there's different ways to do this. But for the purposes of this course, we're trying to keep it really simple. There's gotta my name picking up the user name again, get element by i d. And picking up that user name value and placing it in my name. And then this is all we have to do for Ajax. It's a lot simpler than what we had to do before where we had all these lines of code for Ajax. All we have to do is just do dot Ajax were calling that Ajax function in J query all of to do first set that you are l And here we've got that you are else the same thing that we're doing over here, where we're setting that girl and simply posting over that value that request value. We had to also update that PHP file to get the get request instead of post because we're still sending it by. Get right now and we'll show you how to add values variables to this in the later lessons. And then here simply we've got. If if it returns success, that's removing out all of this ready State requests success. So if if it returns success, we're going to run this function. And this is pulling in all that returned information. So again, that response text. So it's really been simplified in J Query, and we're just calling that result. And here much like what we did within our JavaScript. We're taking this element with the idea of result, and we're placing enter HTML and we're placing in this element whatever is returned from the server when we make this query. So it's really a simple is that, and in upcoming lessons, we're going to go through this how to pass values on do post as well. Using J Query. And again, remember, when you are using Jake, where you have to bring in that J coury library and in order for it to function within your page. So if you leave that out, JavaScript is not going to know what this dollar sign means. And it's not give able to interpret and understand what this what these functions are doing 16. JQuery ajax post with callback response: so much like what we were doing within the JavaScript. We've got the ability to set a get or a post. And what we're doing here is we're just setting up that you are l And then here we've got our callback function. The callback function is what happens once this request is sent and then the callback function is gonna gonna run eso. We could do a console log off result. And let's give you an indication off what's actually being returned. When we launched this function of get or this call of get this Ajax called get to this u R l So again, we're using that check dot PHP and we've kept that file to to get us. We can see here when we do lunch. That function, we see that the name is available if we could. John, the name is not available and all that we're getting back here, this is what's being returned. So this is all that gets returned. So it's a little bit different than what got returned when we were using that Ajax here on the regular JavaScript eso here we're just getting that result. And that's the data that's being returned, and there's also another option for status. So if we're to actually do status, we can see here that when we refresh the page, we've got a status of success so much like what we were doing here. It just broken up. Eso are ready. State is still returning that same status, but it understands that 200 is success that's interchangeable. And when there is data, the status is going to come back as a success. And this is where we can do kind of something similar where we're just doing that initial call that Ajax call success and, if its success, than it does this function. And if it's an error, can do something else as well and just as easily as what we're doing before. If we want to do post, we just have to do a little bit of reformatting here and update this to take a post request . Go back to this form, so now we're going to send it as post and we can no longer send the variable within this type of format, so we have to send it over as data that's available. So what we're gonna do, we're just going to set up that data, and they're just a few slight changes there where we brought over that data value there. And then this again can be comma separated if you were passing over an actual value. So this is a JavaScript value. So we didn't have to quote it out. But if you had an actual name there and if you want to pass it, you'd have to quote it out as well. But because this is a variable, we don't have to quote that out within the JavaScript. So my name has already been set over here. We could also take this and pop it in there if we wanted to. But again, for readability seek, We're just trying to keep everything separate. And I just I did a little bit of an update here to just to show you how more readable format um, for the JavaScript. So same thing we've got our Ajax calls were using post were setting it to post, so identifying it as post as opposed to get and again post. If you're sending over form data, if you've got a whole bunch of data that you're sending over post is definitely better way to go with them, get more secure. And then here's our callback function. So literally the same thing that we're doing before where we've got our very our value there or you are l. And then here we've got our data, and then we just separated by comment and comma and we brought Get it out. And then this, lastly is gonna be the callback function. And here we're taking the result were taking status. We don't necessarily need to pull out the status unless we want to use it down here. But if we do want to use it, we can pull it out here. So just Consul, logging that status and where putting the result within result won't go back out to the code. We can see that the court in fact, it's working the same way as it was before. When we do make that check, we see that the name is taken. We do something else that the name is available so everything is working the exact same way as it was before with get. Although now we're using post 17. JQuery AJAX return response error success: So in the last lesson, we talked about how we could implement Post. And so we had looked at the code like this and we had done our post. Are you Earl our data And then we've got a callback function on. And then one earlier lesson we had looked at setting it as Ajax doing a you Earl success. So we're going to go back to writing it within this format where we're just doing at Ajax call. But we're gonna be setting the type, so the same thing where you can do, get or post in this case, we want to set as Post. We've got the URL over here and then this again. This is very readable format eso type post you Earl is gonna be the girl that we're connecting to the data that we're sending over. So just the listing of that data and again, if this was an actual vary or if it wasn't a very both was a string, some string data, we'd have to quote that out. And then upon success where you're just posting out that getting that result information and we're pacing the result into the diff, So whatever gets returned from the server. We just simply pop into that div. Html and here we've added in error. So as we had talked to boat before. So if there are some errors, or if it gets returned back as an error, or if it's not a 200 being returned back from the server, so there's no data available or the server setting that header 200 we can pull the pick up that and set it as an error. And then we can console log out all of this eso here we've got X h r, and that gives us the ability to status, text, status, text and air. So this gives us some more information about that hair. So again, not necessary. If you have an error, you just want to fail. If you want to do result equals failed. Something like that, I could simply just do that where I could do failed. And now when we go to the court, we can see that it's still functioning the same way. Type in something. We do a check to the server. The name is available. If we do one that is already within our array, it's not available. And then again, this could be brought out to the databases as well. Eso if we had something so that I guess these this way to do a failure here is if I do something like this or actually going to just change the mining variable So it's not actually gonna have that mining value, so hopefully it comes out as an error there. Eso we actually printed out that PHP error, so that wasn't a good way to produce an heir. Probably the easiest way is just to do a separate Earl. It's gonna refresh that again. So this actually it wrote that out because that was what it was getting returned back. Eso There was some text within that PHP. So it wasn't able to tell if it was an error. Eso here. We're definitely able to see if it's an error because we can't actually find that checks with the Z there about PHP eso here we can see what's being output here. So we've got not found and this is the response from the ex HR status text. So essentially, uh, this four or four error and this is the 404 So if it was 200 or for something else, we could list out those errors and not format eso or 200 would be success. Eso not found is a 404 error, and it let's see what the area is and just tells us it's an error. And again, that text is not found, so the error is not found value. And here we're able to put in our failed eso is gonna change that back. And that was just a demonstrate that the errors. So if you do have any heirs with the data, if it's not coming back the way that, as expected, you could always send through from the server itself, you can send through different values different different status values. So whether we're doing a 200 or a different value, you can set those from the server and send those back so you could automatically default an error. If you wanted to sending back something other than the 200. Or, if you want to indicate a success, you could send back success so again, depending on the framework that you're using, that could very and how you're sending that information back to the Jacks call. But for now, it's just important to understand that we do have this Ajax call. We are able to do that call back and were able to detect if it's a success or if it's an error and then output data accordingly. And just to summarize that, yeah, J query really does simplify things as opposed to what we had to do with age with JavaScript. And my preferred way of doing Ajax calls is definitely working with Jay Query. But if you do need to work with JavaScript, we do have that available as well. And it's always important. Before you start working with Jake, worry to really understand the JavaScript behind it and how JAVASCRIPT makes g query. I'm all the different functionality that has to go into just the base JavaScript in order for J query to function. But Jake Array does simplify what you recording is gonna be in the courting the coding library that you use and again, uh, again, depending on what type of fall you're picking up, you'd have to pick the best method and what you want to do with it s so you could output that here as well as what we're doing earlier within JavaScript. And the best way to learn again is to download thes source files that were including within the resource section of this course. In practice, it work with the code and try to get that working on your own so you might not necessarily need to have a server functioning. You could change this into a text file and just have a response there. But if you do know how to set up a local host server, or if you do want toe practice within a live environment on Web server, you're welcome to do that as well, where you could write constructor languages such as PHP. But again, it doesn't matter what you're connecting to it just Ramat Er's what the response from the server is gonna be and again it again. It doesn't matter how you're accessing it. If you're using JavaScript orgy query again, you're getting back that response and your ableto work with that responded data on and that dynamic data without having a page refresh using Ajax. And just to further illustrate that you don't necessarily need to have a working server, a local host server working on your machine here. We're just doing a query over to test file text, which is just over here. And all it is is this working test file. And when we go out and we refresh the page, whatever we enter in, it's just out putting that content. So all the PHP was doing as it was updating and making this content dynamic. So that was coming from the PHP itself, and not necessarily from the JavaScript or the J query tohave those dynamic responses. You do need a constructor language that can interpret the data that sent over and do something with it. Customize the response, the call back message that gets returned into you, the JavaScript.