Learn jQuery AJAX in 1 hour | Laurence Svekis | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (1h 9m)
    • 1. AJAXjquery1hr

    • 2. 1 Introduction to AJAX with jQuery

    • 3. 2 Course Resources and Applications

    • 4. 3 jQuery Load external file into your web page AJAX

    • 5. 4 Callback Data request object jQuery

    • 6. 5 Update jQuery

    • 7. 7 AJAX method with jQuery

    • 8. 8 Use jQuery AJAX to return JSON data within JavaScript

    • 9. 9 Get JSON data with AJAX

    • 10. 11 AJAX to send and receive data

    • 11. 13 Tweaks and Tips for AJAX

    • 12. 15 AJAX connect to web API get data into HTML

    • 13. 17 jQuery AJAX Course Conclusion

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn jQuery AJAX in 1 hour
Guide to getting started with AJAX use jQuery to make seamless connections to external data sources
and APIs
AJAX can load data from external files and into JavaScript seamlessly without page reloads. jQuery
makes working with AJAX easy, providing powerful methods for AJAX calls. AJAX is an essential skill
for modern web development.

AJAX (Asynchronous JavaScript and XML)

With AJAX, web applications can send data to and retrieve data from a server all in the background.
AJAX allows for web pages to change content dynamically.

Load content from external files, load JSON data and use the data within JavaScript.

JavaScript is used to bring these technologies together to create amazing user experiences, with JSON
data and the web elements. jQuery is ideal for making AJAX calls by simplifying the code and making
it easier create.

This course is designed to get you started quickly...

step by step training
source code included try it for yourself
resources and top links
everything you need to bring AJAX into your web applications
from an instructor with over 18 years of web development experience
explore JSON data within web APIs
AJAX is an essential skill to have, learning how to use AJAX will bring your web applications to the
next level.

I'm here to help you learn about AJAX and ready to answer any questions you may have.

Get started with AJAX now and see what you can do.

Meet Your Teacher

Teacher Profile Image

Laurence Svekis

Web technology Instructor


Web Design and Web Development Course Author - Teaching over 700,000 students Globally both in person and online.   

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990,... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. AJAXjquery1hr: Jax can load data from external files and into JavaScript seamlessly without page reloads. J. Curry makes working with Ajax easy, providing powerful methods for Ajax calls. Ajax is an essential skill for modern Web development. The jocks is short for asynchronous JavaScript and XML, with Ajax Web applications consent data to and received data from a server all in the background. Ajax allows for Web pages to change content, dynamically load content from external files, load Jason data and use that data within your JavaScript applications. JavaScript is used to bring these technologies together to create amazing user experiences with Jason Data and Web elements. J. Curry is ideal for making Ajax calls by simplifying the code and making it easier to create . This course brings together J. Corey and Ajax and shows you how to use it. Step by step training source. Court is included, so you can try it for yourself. Resources and talk links everything you need to bring a jocks into your Web applications. This is from an instructor with over 18 years of Web development. Experience explored Jason Data within Web T ice in a whole lot more Ajax essential skill to have learning how to use a jocks will bring your Web applications to the next level. I'm here to help you learn about Ajax and ready to answer any questions. You may have get started with the jocks now and see what you can do. 2. 1 Introduction to AJAX with jQuery: hi and welcome to learning how to use Ajax calls using Jake Weary. Now J. Coury makes it really easy to make Ajax calls, and Ajax calls are amazingly simple to create, and they provide a whole lot of additional functionality into your Web applications. Essentially, they provide you the ability to make seamless data calls, exchanges with external Web files, pulling all that information and utilize it within your Web applications. So my name is Lawrence, and I'm gonna be your instructor for this course. And I'm so excited to have the opportunity to present this course to you today. So within this course, we're gonna be showing you how to add geek worry into your Web applications and then how to load data and Lord file contents into your HTML code. So simply by clicking a button, we have access to a lot of Web information via Ajax calls, and you notice us well, that there's no page refresh, and it's a really seamless experience for Web users. And as you can see, these air, some of the different applications that we're gonna be building out. So currently, this one we're going to start with and essentially this allows us toe load seamlessly external file content directly into our HTML code. And then I'm also going to show you how we can make calls and retrieve back data using Ajax . So this is a call into a G son Jason file and retrieving back in, looping through all that response data, also sending over information. So posting it to the server, getting a response back from the server. So depending on what I'm placing in here, I can get a response back, and then I can utilize that response data in my HTML as well. So there's a number of different ways to make these calls. And as you can see here, essentially, this is that information that we're out putting within Jason Format and were able to bring it into an external file. Also, we're going to be looking at how we can connect to Web AP eyes and pull that AP I information into our Web application again, really seamlessly using Ajax and again once you start using Ajax, it's such an amazing technology. It's so easy to use. You're gonna really enjoy using it, and this course is also get include all of the source Code Resources links files so that you, too, can jump in and start creating your own Web applications with Jake Weary and Ajax, and you can create your own applications quickly and easily. So when you're ready, let's begin creating some amazing stuff with Ajax. 3. 2 Course Resources and Applications: within this lesson, I want to provide a quick overview of the different resources, links and tool something and be using in order to run this course. So for my editor, I'm gonna be using brackets. This is an adobe product. It's an open source editor. It's available at brackets. Start I o. You're looking for a new editor or to check out the same one that I'm using. So it's available at brackets I owe. So it's ah Dobie product, and one of the other resource is something to be using in order to write some code is code pen I Oh, so this is an online website where you can type in something here and you can actually see HTML, CSS and JavaScript and C it actually get rendered out within the page. So whatever I type in here within this code area, I see it getting rendered out, and this is a really useful resource, especially when we're connecting to Jason Data and pulling that in dynamically into our Web page. We can actually, visually see the output, and as we adjust the cord, we can see that output changing as well. It's another application. I'm gonna be using is Zam Zam is essentially gives you the ability to run a local host. So that's where you see when I go to my Web browser article, the local host. That's because I've got example running in the background, and essentially, what Zampa does is it allows you to simulate a server running in the background. So if you need access to Apache Server or my sequel database, you can easily download Sam for Windows, Lennix or Ola Sex and just go through the default install and have be up and running in just a few minutes. And that gives you a really good sandbox development environment that you can try it out and try out different things different cold and see how that works out. Eso That's one of the other resources that I'm using as well, and I'm also using chrome as my browser, and the reason that I like using chrome is because it's got Dev tools so you can open up and inspect with control Shift I on a Windows machine, and that essentially opens up this little window here on the right hand side right now, and you've got a few options here so you can toggle the different device sizes. So if you want to simulate on a mobile phone, see what your website looks like. You've got that option and you've got console. So this gives you the ability to communicate information back to this console so you don't have to flip back and forth, and you can actually see that information that's being output within the console log of your JavaScript. And this is really useful because this allows us to see information that we might not be displaying for the user. But we can see that communication back and forth. So another resource or some other resources I'm gonna be using because this course is going to be based around creating a J. Corey calls and calling in some external data and accessing external files. So some of their other resources that I'm using are my Jason dot com. So this is a website where we can store Jason Files online and we get a U. R. I in order to directly access them. And this is a really useful resource because it essentially gives us unending point to pick up some data and pull it into our application So if you're curious what it's gonna look like So this is a whole bunch of some dummy data that's been generated in adjacent format, and we're gonna pull it into our application as we work through the course and this data I've generated from Jason dash generator dot com. So it gives you the ability to generate ah, whole bunch of dummy data. And then, of course, you can utilize this data and place it within your applications. So another resource that I'm gonna be using as well is Jason Placeholder. And this is another resource that gives you an endpoint, a Jason file, essentially another file that we can pick up on online file and pull it into our application. And lastly, of course, we're gonna be using G Query because his course is based around creating Ajax calls with Jake worries. So we need to bring the J Query Library into our application. And for those of you that are familiar with Jake weary Essentially, J. Khoury is a JavaScript library, and it actually makes your javascript much easier to with simpler, customized syntax. It allows you to run JavaScript functionality a lot more easier, quicker and with less code that you have to write out. And this is one of the reasons why a lot of Web developers will turn to Jake Worry when we have Ajax calls. Because Ajax calls are one of the most simplified functionalities that we have within J. Query. It really does simplify a lot of that JavaScript that we normally would have to write it in order to make our Ajax calls. So we're gonna grab Ajay Kori library, pull it into our application, or you can go for a j coury dot com and download Jake worry and access it locally as well. Eso. Either way, you're getting that G query library in getting access to it. So we get all of that wonderful Jake rate functionality. So in the next lesson, we're gonna start writing out some code, and I'm gonna show you just how easy it is to make Ajax calls and bring some data into your applications via J query. So let's get started next lesson 4. 3 jQuery Load external file into your web page AJAX: in this lesson. I want to show you how we can bring J. Coury into our project and make our first Ajax call. And we're gonna access an external file and bring that file information into our web application. So let's go over to the hosted libraries at Google, pick up the J. Corey Library, and I've already created a blank HTML page. So we're going to drop that in, and I'm not gonna worry about all that HTML formatting were strictly gonna look at scripting, and I'm gonna add in html elements as needed throughout the different lessons of the course because I did want to focus the content of this course strictly on making our Ajax calls with Jake weary and stick to that functionality within the lessons of the course. So, having said all of that, I do need tohave some html up here in order to have some containers and some interactive elements within my HTML. So I'm gonna create a button here, and I'm just going to give it a simple It's gonna have a diff here as a button and I'm gonna call it Click Me so that this is something that we can click to initiate RJ query functionality to make loading content into our web page. And we also need a container toe actually out put some content into our HTML code So we actually see something happening when we click the button with RJ Query. And I'm also gonna add in one more thing here. So I'm gonna add in, Ah, hyperlink here, and I'm just gonna link it to nowhere right now. And I'm gonna put the click meat inside of that so that now, whenever we go to our web page, we refresh it. We've got a click me button and we're all ready to go toe add some additional functionality into our application. So the first thing that I want to do with RJ Query is I want to create an event listener and with geek worry, this is really easy to do. So even if you're not familiar with G query, it's gonna be really straightforward. So the first thing that we need to do is actually access are elements within our within our html. So we've got on idea of my bt and and the same way that we do CSS we can access those elements So we make a connection there with that element and we can add some functionality and actually, I want to access the hyperlink within the my bt. And so I'm gonna add in a there for the anchor text. And this is the same format that we would use if we're using CSS. So the same same idea. And this is what one of the great reasons that we'd like to use J Query is because it just makes a lot of sense when we develop our applications that everything is familiar, even if you've never used bakery before. So essentially here we've got a button click. And another thing that I want to do is I want to prevent the default. So this is just simply a method to prevent default action within that hyperlink. That's why I want to include a hyperlink so that we can show you that we're removing that default method. Sometimes Web developers won't remove that in, and this is something that should be removed. If you're using hyperlinks, that's why did want to throw that in eso. Lastly, let's just output to the console log and we're gonna say clicked so that we can take a quick look into the console and see that we've actually clicked the button and something's happening and we're ready to go with our Ajax call. So let's refresh the page. Click it. Now we see clicked. So it doesn't matter how many times I click it We continuously get clicked within their so we're all ready to go to start loading some data into our web page. So now let's create a U R l here and this your URL is what we're gonna use to load that information in. So we're gonna call it Variable Earl and I do need to get some content in order to load in . So for now, I'm going to create a separate text file, save that create a brand new separate text file, and I'm gonna put some html formatting here. So hello, world. So we've got our html formatting and we just call it test text. So we've got a text file there that we're gonna load in test text. So now we're all ready to go toe load that information in to our webpage. So are you ready to you create your first Ajax call and I'm gonna show you just how easy it is with a query. So this is gonna be literally probably the quickest code that you've ever done with quite a lot of functionality built into it. So simply here, what we're doing, we're essentially loading that content. So what's happening within this line of cold? So this is the one to take a look at that. We're connecting, Teoh. That element here called I D our output and we're placing that in here within this parameter, and we're loading, which is the actually the Ajax call. And we're loading a year, Earl. So that's going to be this value here, So let's check this out and see what happens. So now when I click it, we see we get that that data loaded into our web page and you can see here whenever we go into our source code, we've got all of that formatting. So we got all of that each one hello world, each one loaded directly in our web page. And now if I go back in here and if I update this to have have more text and whatever, I can go back to the Web page and I can simply click it and notice that I didn't refresh the page because the actual JavaScript on this page hasn't changed. It's only the source file that's changed. And every time I click the button here were reloading that page content. So that's why I didn't have to do a page reload even though I changed that content there within that text file so I could add in even more information. Go back out here. And every time I click it, it's gonna load that latest version of that content within that text test text file. So the next lesson I'm gonna show you even mawr amazing interaction that you can create with Jake Worry and loading information into your Web applications. All of that is coming up in the next lesson. 5. 4 Callback Data request object jQuery: the previous lesson. We saw how the load method works in G query and essentially gave us stability toe load some content directly into an element within our web page. And it was just really easy to do. So I'm gonna just show you some additional options here that we can have within Lord. So first of all, let's try the so it again with loading another external file. So I've created a quick PHP file. Essentially, this is just gonna output the date the current date in time. So let's go over to our index file update this to be PHP and now go to our Web page. Refresh it. And we did have to refresh it because we did change that. The script content there. So we're loading at test dot PHP. So now every time I load it, I'm actually loading over to test PHP, and that's where we're able to see that it's adjusting. The time is updating as I click it. So this is really amazing functionality, and actually, you can pull back even additional information on that load, so we're not limited to Onley pulling back that exact content. We've got information where we could pull up status in Salon. And this is really useful when we were turned back, something like, we've got our response. So I'm gonna call this response text of nuts. They're gonna do status here. So this is just within the arguments of the function and where were still passing over that same parameter of the URL, But we're actually returning back. We've got some callback functionality here within our lord. So let's take a look and load it out into the console so we can take a better look at the information that's getting returned here. So we've got response text. And the reason I called it response text is because essentially, it's gonna load that responded text that's available within that Web page. So we're out putting the current date over there, so it's gonna load all of that in and next. We also have status, so it might want to take a closer look at our status and see what the contents of that are is as well. So let's let's go out to our browser and take a look. A closer look at this. So now when we click me, we're still doing the round trip over to the server. So we're getting that clicked functionality. But here we've got our response text. So when I see the the content there were actually putting that response text there. And here we've got status were pulling that back the status of success. And so this is actually useful. If you want a toe load that information and utilize it in other formats other than actually loading it into an element, you could take that same information that seem content that's being returned back and loaded here, and you could make use of it in other ways as well. So now that you've got it within your JavaScript, you can utilize it. And another thing that you can do to as well as's. You can check to make sure that our call was successful, because this is also important in order to check that it was successful in case we do get some errors and we can either log those errors. We could output information if there was an air and so on. So this is very useful. So this is all contained within that call back, and there's actually even mawr information that we can get in the callback. So we're gonna lastly, leave one more argument. And really, at the end of the day, it doesn't really matter if you call these ABC or if you call it response text status X h r s. Oh, this is just the arguments that we can use within our JavaScript. In order call back that that object information. The last one is X h r. And this is returning back that entire callback object eso This is going to contain all of this information and a whole lot more. So let me show you what gets output. Now, whenever we do that, click me. So we've got the same information we were looking at before. But we get this object being returned. And if you're familiar with doing an Ajax call in JavaScript, you're gonna be familiar with this. And this is the same thing when we're doing within our JavaScript, the XML http request object. So you see, we've got all of that stuff that we would be expecting here so we can run a function if we've got done so upon completion, weaken, do the request header. And a whole lot more So all of this is contained within that response. Object? Ah, we can also see our response Text here we can see are ready. State essentially goes through different ready states. And whenever we get this object information, we can we can output that and we can utilize this as well. And there we've got our success. We've got our status, so we get those status codes back. So with the static code, essentially 200 means that the Web page was access successfully. 404 means that the page was not found. 500 indicates a server error and so on. So those air those typical error numbers that you'd be expecting when you have some issues with connecting to your application So all of this is returned back within the call back, and of course, now you can utilize it within your web application. 6. 5 Update jQuery: in this lesson. I want to finish off with our Jake Worry that we were looking at earlier with the J Korean load. It's a lot of times with G. Koury. You want to make sure that the Dom is actually fully loaded. So you use. That's where we use document dot ready. And this is where we set up the function to make sure that the Dom has fully loaded. And then we initiate our Jake worry. So I did want to wrap the J query functionality with the document ready function as well as I also want to take a look at and see what the value of success of the status was. So if we actually returned back a status of success, then maybe I want to do something different than if I actually pulled an error out of that status. So we've got a number of different ways that we can actually update and see that information within that object, we can check to see the status within that within our X h r, as well as the status within just status. So both of them are the same, so we can do a conditional statement here and just ensure that if we actually needed this data toe load in and this was a vital part of our application, we do want to make sure that we're checking to see if the status is equal to 200. So that's the value there that's being returned. So let me take another look at that and actually the statuses success. But we can also look for status in the ex ex, a jar of 200 so either one so we can look for status of success. Or we can look for x, h r dot status and see if we've got a value of 200 eso. Now that we know that status is success, then we can output something, maybe into the output area. Or we can append to that would put area so it could do something like this and to upend. And here we can add in some information, so it works. So just like that. So now let's try the same thing out. Click it and we see that we get appended with it works because we were actually able to access that u R l So I should put in a line break. They're so just update the code a little bit. And I'm also going to show you what happens if in case that file is wrong. So what's gonna happen here is that we actually throw an error and we see that we've got all of this information. We're throwing an error. So we need to make sure that we're accounting for that message of error and then we could take care of and we could load maybe something different within that output. So if or maybe we can just do something like this if the status is error than Kara or something like that. So this is just for the users experience so that when they click it and we're expecting something toe load in case something goes wrong there we actually have some kind of message and some kind of information for the user to know that they had actually clicked it and something went wrong. So that's how you can create your loading of data using any Jack's call. And in the next lesson, we're gonna look deeper into jacaranda, Ajax and all the amazing possibilities that are available in order to access files. So that's all coming up in the next set of lessons 7. 7 AJAX method with jQuery: within this lesson, we're gonna look at another way to do an Ajax call. So in the previous lessons, we looked at loading data and we didn't really have a lot of control over the different methods and even sending data and so on. So we didn't have a lot of control over actually what was happening? So we can really easily update this, and I'm gonna update this to be an Ajax call, which is going to give us a lot more control over our output and what we do with the information were retrieving back instead of doing a ah load. We're going to use a method of built in method within Jake Worry. And this is the Ajax method. And this is a really easy way really functional way to do a whole lot of stuff with just a few lines Accord. And essentially, what we're gonna do is we're gonna just call over to that same text file that we have looked at earlier. I'm going to get rid of this because we have some extra excess consuls there and so on. So I'm gonna call over to this you, Earl, the test text you Earl and now within the parameters, we've got some additional options so we can check to make sure that our method that were returning back is a success. And if it is, then we can fire off a function for that success method and we can pull back some information. Some call back information within the value of data. So I'm gonna just console log data within success. And we also saw that in the previous lesson we could handle errors, but this wasn't really inefficient. Way to go, because we're throwing a bunch of errors within our panel and so on. So with the Ajax call, we actually have a way. Teoh look for specific error. So if we do get an air, then we can run our error function. So going to do the same thing that we did up here, where we up in success where we pulled back that data and we're going to just output data and this could very well just do something the same as here where we could put that and this one. Maybe we just put that it works, and now I can actually get rid of a lot of this that we have sitting here, we keep the button functionality and so on, and I'm just going to make it look a little bit more presentable. There s So now we're ready to go to try the side in the browser. So what do you think is gonna happen here when we make our connection to that same text file? What do you think we're going to see within the console and so on. So let's take a look at our application. Refresh it, click it. And now we see we pull back that html and we see we've got that whole all that response information here and we're getting output, get works. So if we were to update this and create a file non existent link to a file So when I click it, we see we get that same thing happening there. But we get all of this object information being returned. So we get this not found and we get the object information being returned within the data. And this is interesting because now we can make use of that. And we can actually found eight what the status text is. And if it's not found, we can maybe output that status, text and so on. So I've got a lot of options here within that returned data, so I could just as easily instead of just writing out error, I can contaminate over and do something like data and do our status text. So now, in order to create a better user experience, we're actually getting that status text being returned back from he Jack's call. And we can also utilize it and we see that our status air value is 404 So essentially, we know that that means that the page was not found. And that's how you can handle errors using the Jacks call. And with Ajax, with this Ajax method, we've got a whole lot more options, so I will be showing you that was in the coming lessons. 8. 8 Use jQuery AJAX to return JSON data within JavaScript: so the previous lesson we introduced Ajax, and with Ajax there's actually a lot of different parameters that we can use. So we saw that success and error with in an object formats. So we've got success. And if you're familiar with JavaScript objects, so we've got the key here, and then we've got the value here. So essentially the key. And then what happens when we pick up that key? So we're going to do the same thing with the earl. We're gonna move it from sitting. I would cite of that curly bracket, and we're going to specify the u Out U R L just as we would any other object here within RG quarry. So, essentially, by moving it over, we can list out all the different object values here as well. So if I want to specify a method, I can specify. So we know that there's two different methods. There's either get or post, so I can specify that this particular method is gonna be get. We can also specify data type, so the data type that we're expecting back, so if we're just expecting text back, we can specify text that we're receiving text and a whole lot more. So now let's take a look at our Ajax called Click the Button and we see not much has changed, but in fact it really has changed that. Now we can specify where they were doing get or post, and we can do some additional functionality as well. Other things Before that, we weren't able to do that. We're able to do now. We can specify a method. So here we're linking over to our test dot txt file. But if we're looking to post over to there, so probably we wouldn't necessarily need to do that with this text file. But just to show you that whenever I refresh it, everything works the same, and we also because we're specifying the method. We can also link out to Web Buehrle's as well and pull back that information. So here's on a P I here and this is what we're not ableto load this in, as were looking at earlier. If we tried toe load in this web, you are l. It would fail. But now because we're specifying that we're using E Jackson, we've got a full get request and we're expecting data type and so on. So now whenever I click it, we see that we're actually able to pull back this information so we can also change that data type as well. So we know that this source filed here. This is Jason Data. So instead of formatting and retrieving back text, let's change this to Jason and see what happens. So now we saw earlier, whenever we clicked it, we retrieved back the contents of that girl, and it's all within a string value. So of course you could parse this through and utilize it as Jason. But actually, why not pull it back as Jason objects? And then now these objects are usable within our application so we can actually loop through these and parsnips and get this information into our Web page. Eso This is where all of this more specific specifics of our Ajax call really come in useful because now we've got the ability to specify data types methods as well as we've also got the ability to send data over and a whole lot more. And in the next upcoming lessons, I'm gonna show you mawr about this Ajax call and how to work with it. and then also how to work with that data that we're picking up within our Ajax call. So all of that is coming up in the next set of lessons. 9. 9 Get JSON data with AJAX: in the previous lesson, we saw how we can pull back some Jason data and output it as date JavaScript objects. And now we can utilize these objects and actually out put it into our web page. And this is gonna be a really useful functionality that you're gonna find that it's really It's really easy to work with as well as there's a whole lot that you could do with pulling in all of this data and accessing different endpoints to pull in additional data and information. So let's go back into our editor. And now that we've pulled back all this data within our data object now let's make use of it. And in typically with JavaScript, we could loop through it. But J Corey actually has a built in functionality built in method that allows us to look through the data. So we just need to specify that particular data object, and then we can specify a function. And first we're gonna pick up a key, and we're also gonna pick up an index value as we looped through each one. And what I can do is I can actually consul log the key and the index so you can get a better idea of where, actually what information were picking up as we're looping through. And then also afterwards, I'll show you how we can actually put that information and utilize it within this output area when they're HTML. So let's let's take a closer look at actually what's being output here and looped through it. And we see that first of all, the the first value that we get returned. There is the key. So essentially this particular object. This is the first item in the object, Torri, and we've got a key of zero. And then we've got all of that object information. So if we want to make use of that object information, let's say we want to get that email address of that user. Let's go back into here and we know the way that objects work within G query so we could do something like we've got the index, which is that entire object. And if we do index email, let's now see what happens when we refresh it. So we see we get back all those email addresses, and now it's Azizi is just manipulating our content and updating what we actually want to do with this content as we looked through it. So maybe, for instance, we do wanna add it into our output values. Here s so we could do something like this update this moved out around. And now let's go take a look at our browser. And now, when we click it, we list at all of those email addresses, So we can also do it in a number of different ways as well. So we know that the way that the key works is that we can pull back that data object. So if we were to do something like data and have the key value within the the square brackets So what do you think is gonna happen here whenever we click the button and notice that once again, we're getting all of that object information? So really, the same thing that we were doing earlier we could do something very similar here where we could do something like key email. And now let's go take a look at our consul log. Click it again. And the interesting thing is that we've gotten back to that same point that seemed information. So really, there are different ways to access it. Probably the best way is to do it view the object here through the index object. But either way, you could do it. Whatever makes more sense to you, you could do it through the key as well and access that full day, the object and do key, but within this instance were passing over that individual data key into index and we can make use of it. So either one is gonna work the same way and we can manipulate an update. Our I would put in a number of different formats so typically, though, that you will see that we're using that each object that we have just created and we're accessing that's object information within that format as well eso other ways to output that same information. And if you're familiar with JavaScript objects, we know that we can also do the quotes like this and we can actually return back to that same information. So now whenever we go and click it, we see that now we're getting it listed out three times because all of three of these values are gonna be equivalent. They're all the same. They all contain that same information, just different ways of accessing it within JavaScript objects and also just want to also know that whatever we're doing this quoted version with square brackets, then we can also make this dynamic as well. So we can create different values here within the object within this method, and we can make it dynamically show up as well. So we have an array of items and so on. We can really begin to utilize it within this type of functionality, which we can't do when we're just doing the index period on index name. And also I want to also note that if we're pulling it back as text than another thing that we can do with the data is we can take that data and we can do a Jason parse off that data . And what Jason Parse of the data is going to do is it's gonna actually transform it into again into that Jason format. And this is the Jason Parse, and this essentially gives us the ability to transform that string value back into usable data format. So now let's go back over here, and so we see that everything's still working properly, So that's another thing to look out for. So depending on how your data is being returned, whether it's a string that you need to parse out that Jason, if it's geese on formatted, which is ideal that you don't have to worry about this line a code. So this is this is Onley if its strength value can data. So I'm just gonna add that in. So the next lesson we're gonna look at even more things that we can do using Ajax calls within J Query. 10. 11 AJAX to send and receive data: in this lesson. I want to show you how we can actually post some data. So previous lessons we've looked at, how we can retrieve information from a specific girl and then utilize it within our output . So now let's take a look at how we can actually send some data over to our Web server. So I'm gonna create some inputs, input type, and then what types are text, and then I need to assign it on I d. So maybe this could be first name or something like that and upgrade a 2nd 1 and we'll do last so that we've got two inputs here and just do a little quick label here. So nothing, not too much html here. But eso that we've got some input fields where we can actually pick up some information out of eso next. Let's look at how we can convert this into, um, or a better format where we can send some data, and we actually also need to create a way to pick up that information. So let's go back into our PHP file, and I'm gonna save this as just maybe we just call it PHP dot PHP and I'm going to do an update of the contents here. So what I want to do is I want to be able to pick up that information that's being sent over s Oh, this is just gonna be a really quick, simple PHP application that's gonna pick up that hosted information. So notice that the method that we're gonna be expecting is gonna be a post and first name is the value that we're gonna post too. And we're going to check to see if it's set. And if it is set, then we're gonna use the value of name is gonna be the first name. And if it's not set, then we're just gonna type in no name given. So that way, no matter what, we get some type of value within our name. And maybe I'm gonna update this to first and update this toe last and make a little bit of adjustment here. So no last So no last name given. So now we've got two variables here, and let's also just create some random variable. It's of some value. And this one is just gonna be s O that this reason I'm creating so many variables here is that we need to have something to output within our Jason format. Eso Now we can create another we can create in the re So this saree is gonna hold some information and we're just gonna format it as so we're gonna have a name. Maybe we can call it f name to be in line with those variables and equal that f name value Teoh F name. And then we're gonna calm a separated out. So this way we're gonna create an array with a bunch of values that we can convert to Jason and then eventually output for our users consumptions whenever that user makes a connection , then we're gonna output all of this content eso maybe the lost one. We're just going to do something like response and equal that response to the value that we've got here so that now we've got some dynamic values and we can echo. And this is another built in function within PHP. So we've got eco encode and we can encode an array and format it within Jason format. So let's go back out to our Web browser. Take a look at what's going to be a put within this file before reconnect to it. I go to PHP dot PHP. We get a nicely formatted Jason response. So we're already to send some information over and pick that information up on the server. And so let's open up our Ajax call and now do some converting this into post. So I did say that we want to post some information over, and we also want to send some data here. So instead of data type, I want to update this back to Jason because it is Jason Formatted data, and we also want to post some data into our our post. So the way that the data gets sent is it's within an object format, and we need to specify those objects. So we're expecting f name to be the first name, and we can pick this information up from the value of the element with the value of first. So this is with J Query, and then we just need to specify value and comma separated out. And now we're going to do another one for last. And I'm gonna also go over this as well as we when we finish the call so we can take a better look at what's actually happening here behind the scenes eso This is Jay Query in order to pick up those that input value that's being contained here within first and then also pick up that input value that's being contained within last eso Next, we can get rid of this line because we no longer need it, and we're also not parsing out multiple items. So we're just simply returning back that console data. And now let's go take a look and see what's actually contained within this would put and actually one thing before I forget, we do need to change the u R L so PHP dot PHP. Now let's go and refresh it. So now I can type in a name here, and when I click it the button, we see that we've doing the full trip. So we're actually doing an Ajax call sending this data over to the server, and then we've got that response information from the PHP file that we just created and we're picking up that posted F name. So the pasted first name. We're picking up the posted last name and we've also got this response information that we're sending back, so we're getting it within an object format. So this is gonna be really easy toe output within that output area, so we can really easily utilize that output. So using that same format that we had, we can create our output and put it within our Web page, getting that information back, retrieving it, actually from the server. So I'm just gonna quickly quickly create all of these values here, and I believe this one was response. So now let's take a look at actually what's being output here. So when I click it and maybe should put some default values, but we see that as I'm updating it, it's actually doing that full round trip over to the server. It's picking that information up, and it's retrieving it as it It's creating a Jason file on the PHP end, and we're getting that response information back as a Jason file. So we're able to retrieve it within our JavaScript as a JavaScript object, and then we're able to work with it and pick up these values, and it put it within our HTML. Let's take one more closer. Look at exactly what's happening here, so we created eso with the PHP file, essentially what it's doing. Its listing for a post of a value for F name, post of value for l name. All it's doing is taking those values that's picking up. If nothing is provided that it creates a value here, creates a value here and outputs it creates an array and includes their ray and the proper format so that we can output a Jason file. And as we saw earlier, when we do Ajax calls, Jason Data is ideal for retrieving that information and utilizing that information. So now, looking at our index file, we created a couple HTML inputs. These air simple inputs. We assigned ideas to them. Notice that there's no names because we're not actually submitting. These inputs were just need elements that we can utilize in order pick up the contained values. I've got that click me button, the output area that we had looked at earlier. We've got the link to Jake Worry and then we've got our script tags were waiting for the dome toe load here, here, we've got that event listener for the click button. This one here is specifying the URL that we want to connect to and we're preventing the defaults of that hyperlink isn't firing off. And here we've got that Ajax call. So the first parameter within the Ajax called. We're looking back to get that Earl of where we wanna send that Ajax call next. We're looking at type, so we're posting content because remember, PHP was waiting for post. So the method is post us. We're posting data, and here we've got our data object and notice that it's formatted in a typical object format where we've got the paired values. So we've got the key name and the actual value eso we've got again the key name and value And this is the format that it sends it over to our PHP files. Essentially, this is the same as doing f name. If we had name within this field of f name and we'd passing it over within that same format , we're specifying data type as Jason because we know that we're expecting Jason Data and we want to be immediately be ableto work with that Jason form out of data. We're doing a console log. Eso this one over here is what fires off when we make a successful connection where console logging out that data object. And here were utilizing that data object because we saw within the console that we're turning back that f name l name and response within the data object. And all we're using is JavaScript objects Teoh upend output, which is available over here. So in the next lesson, we're going to show you how to work with Ajax calls. And so you some or functionality within bakeries Ajax method That's coming up in the next lesson. 11. 13 Tweaks and Tips for AJAX: in this lesson, I want to provide a quick overview of some of the functionality that we've looked at earlier. So we saw that we can utilize PHP. So if you do want to try this on your local machine and you don't have ah local server because of course, with PHP, it's not like javascript that runs within the browser. We actually know server to render wrote PHP. So check out Zampa, if you're looking for a way to set up your Apache server and actually run the PHP called on your webs on your local machine to try all of these out eso over here, we showed you how we can do call over to a PHP file, send some information and just by simply clicking it and we can do the full loop all the way around with that information. So I want to also in this lesson, take a closer look at the data that we're passing. So I'm gonna set up a variable called person and this variable since it's going to be an object, and it's going to contain all of that information for the person. So remember again to use that curly brackets I'm not sure why it didn't do that. Put eso the curly brackets there person because this is an object that we're sending over. So the first parameter that we're looking for. So I'm essentially redoing this data here, and I'm gonna comment this out, and I'm gonna show you that we can create that data object. So if you're looking Teoh, create that data object, you can do it within this weight and swell if you're creating it dynamically and so on. So here we need to create a name. So I'm going to give it a name of John. We can calm a separate it thes values. And this is just a regular JavaScript object. So l name. And we just got the only thing we've gotta make sure here. Is that the parameters here? These values that were setting there actually matching up with what we're expecting on the server, and so make sure that your values are matching up eso It would be typical, like if you are sending any other form information, you've got to make sure that the servers actually listening for that same information. So now that I've set up a person, I can simply do something like this. Update that and refresh it. And now it's no longer clicking into this form. It's just passing over that object information. And so this is this is useful in case we want to make some updates to that object so we could do something like person F name. So just like what? We've worked with the JavaScript objects before. And we can specify the the first name actually is gonna change. Teoh, whatever this value here's we have here, so ha sh value and value eso. Now let's go take a look at this. And now we can type in something and we're actually passing that value over because, as we know, with JavaScript objects, we can update them eso, even though we've set them. So maybe we have some defaults there, and they're changing dynamically within our script. We can also update them at any point. So as long as it's being updated before we actually make her Ajax called, that's all we need to do. So now we can say whatever we click it, we're back toe that same scenario that we were at before we're actually passing over that information and actually sending that over to the object. So a number of different options here that we can utilize And remember again, if you do want to set up PHP, you do need tohave you a local server running on your computer or you can access it within a website s in the next lesson, I'm gonna show you some some online AP eyes where we can actually make some calls to and get and retrieve some data back. So that's coming up in the next lesson. 12. 15 AJAX connect to web API get data into HTML: in this lesson. Let's do some code updates and connect to a web. Ap I So there's a Web API I at I c and d b dot com and essentially gives you the ability to connect to a joke database so you can also send some parameters to. So I'm not sure this one never really worked for me, So I'm not gonna worry about sending the first name and last name, but we are gonna update how many jokes we can retrieve back and also the category of jokes . So let's make an update to our source code in order to specify first of all category. So we're looking for a category, and we're gonna update the i d. Here to cat and also number. So we need to look for a number of jokes s Oh, this is gonna update to end, um, for number and we're gonna keep that click me button the output so we can have put some of the jokes. Eso Now we need to specify that you are a of where we're picking up these jokes. So this is the you are, I hear. So just grab that information update our you are l. And so make sure that it's formatted properly so that there's no spacing around there. And I also wanted to add in value here for the number because we're picking up numb over here. So with G query makes it really easy to connect with those element values. So v a l we can get rid of this stuff over here, and we can specify our category. Eso the category format is in a reformat, but we're not gonna only we're going only just use that one value. There I go set some default values here. So one of the categories was nerdy eso at this particular ap I We've got to make sure that our values are correct, that they're in line with the categories that are available. We're going to keep it up, prevent default, and the data We're gonna update this to get because this is a get request or not. We're not posting anything. We're just simply sending some parameters and with get you can also send parameters. So limit two is the parameter that we can send and, um, create that paired value object and with the parameter because it is, it's formatted as an array. So we've got to make it look like in a rate as well. So I'm going to create that a rate those square brackets for the ray And then I'm also gonna pick up that value that we've got within cat and said not over. So this is gonna be cat now, send that information over and for now, I'm gonna log out or commentate these values. So let's, um so I believe there's still something wrong here, So let's take a quick look and see what's actually happening here. So we just need one bracket. There s oh, now let's try the same within the browser. So we've got our two fields here. We've got one nerdy number of jokes. We can update this if we want Click me and we retreated back and array. So coming from that website, we've gotten the ray with five different objects here and we see that each one of these objects has a joke and we also see here that the category, all the categories are nerdy. So it's taking that information from our website sending it over via an a p i e. Jack's call to the website and now we can bring this in from this data back into our Web application. So as we saw earlier, we do have the ability to look through and parse it. All of that utilize all of that object information that's being returned within that success. So let's bring that back in where we've got our each data object. We've got a key and a value, and we saw that we can pick up and we can output those values by doing it appends. I'm gonna bring this one back in over here. And maybe first of all, let's go. I take a quick look and see what data were turning back. So the data is an object. Eso we've got an object value, and the value is where each one of those objects is. So we need to make sure that we're specifying that over here that were retrieving back the value there and within each objects, we've got a value for joke. So going back into the data that retrieving back and we've got index, so index joke should actually output each of the jokes there. Sel l Let's open up her browser and take a look at this and see how that works. See, we're sending over that same parameters. So maybe we want eight jokes and we see that we got eight separate jokes loaded out. All we're doing is parsing through that returned object and out putting it within our our HTML. And we can see we've got any number of jokes that we can continuously pull back. We can update the category of swell. So I believe that one of the categories was Chuck Norris s. So we just got to make sure that we're always utilizing that correct category there, and we're sending the correct parameters and we can see once we do that, then we actually get back that correct information. So a bit Guess maybe it wasn't Chuck Norris. I think that there were some different parameters that were listed there. And essentially, this is how you can interact with various various AP eyes. So I think it had its case sensitives Chuck Norris s. So now it looks like we are getting back some information. Maybe not. So maybe there isn't anything within that category, but we can see that we are able to utilize and access that a p I, and this opens up the door to bringing in different data from various Web sources. So the next lesson initial you how you too, can practice what we've gone through within the course. Try it for yourself and practice working with Ajax calls and AP eyes that's coming up in the next lesson. 13. 17 jQuery AJAX Course Conclusion: within this lesson, we're gonna do a quick overview of what we've learned in the previous lessons, and I'm also going to show you how you can practice and try it for yourself. So in the previous lesson, we looked at how we can connect to a Web. Api I So this was a random jokes, AP. I were recon set the value of jokes, picked that up. We could make our Ajax call, send some data over to specify the category that we want to look at and retrieve that information back as Jason formatted data and on successful connection. What we want to do is loop through the return data and the reason I specified data as a value there is because you always have to look at what you're retrieving back within your a p I. So we saw that our object was the route, but we had another variable here called value. So if I just tried toe loop through the various objects here only have one object because the object or a is contained within value. That's why needed to specify value within that object. Eso data value is why what? I wanted to look at. And that's where I've actually got those three a rare objects that are sitting there that I wanted toe loop through and we saw that we've got all of the different values and each one so I can get back Return back joke i d. I can get joke information and the same way that I output the joke I can also output the i d. So if I want to get an I d and so on, I can output whatever data I wanted to coming from the Web ap I and all I'm doing over here is im a pending it to my output element, which is just up here making the G Corey connection to the element just like I did over here would connecting it to the input element, value and number input I de value. So that's picking up those values, placing it and automatically updating the source code, the JavaScript and J. Corey in order to make it more dynamic and gives us the ability Teoh, have the user actually interact with the a p I and pulled back the data that they're looking for and see that data visually within that a p I So we see now that I made that quick update and we're actually out putting the i. D. S a swell. If I wanted more jokes, I can update that a swell and pull back even more jokes. I could potentially leave this blank eso what happens when I leave it blank? So depending again on the a p I that you're working with. So apparently this one, we can't leave Blanca's, we get nothing back. So always make sure that there's at least a minimum value within. That s so within this category here. So stick with nerdy. And there we can specify the number of jokes. So that was that. That a rate, the category and the number. So make sure you do know what to expect within your array as well. And use the consul to see the object information that you retrieving back, which makes it a lot easier to be able to pick up that object information and output it within your job within your JavaScript html. So I also want to show you within this lesson how to practice what we've gone over with in the previous courses with in the previous lessons, and it's always really important to take that step and tried out for yourself and see what you can make happen. So what I'm gonna do is I'm gonna transfer the source code that we've been using and place it into code pen and code pens A really good resource to be able to practice a different source code. So we see here that as soon as we put that HTML there were ready to go Now with the Jason Data with the JavaScript, we can add in G quarry here, save it, and this gives us access to J query. And now I can simply copy and paste the J coury code in and we don't have any CSS so we can skip through Skip over that part. And now, whenever I see that we're going to see that we click me and we've got the exact same functionality that we were working with eso. What this does is this gives you ability to play around with it a little bit. Find out more about it. If you want to its output in the consul, you can do that as well. Down here, there's a button for console and so on and just try it for yourself. Change some of the inputs. The outputs tried out. See what you can make happen. Update some of that cord and make some adjustments. Even trying to connect to various AP eyes on DSI really get a good feel for how you can work with Ajax calls. And really, the good thing about Ajax causes. There's no page refresh, and it's such a seamless, seamless transition with the data for the users of the user coming in, they're not going to see anything really happening. They're just going to see that it's a really good user experience where they can click a button and they get an output happening. So you can even update some of that CSS where we can put a border. So one pick so black. So I want to make it look a little bit more like a button here pounding and text preparation. None. So see that as soon as I make those updates, there actually should put police it within that mean container eso within that, but but in there and save that again. So again, check it out for yourself, tried out and see what you can make happen using J. Corey and Ajax Ajax functionality. And if you do need to add ghee query, just click this this icon here. This opens up the build out external JavaScript libraries. You can quickly add J coury within this functionality as well. And there's a lot of Web AP eyes on. This is a great way to bring content and create a good, seamless user experience, bringing in data from external sources into your Web applications.