FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.1 JSON and jQuery's Ajax API

You'll learn about two things in this lesson: JSON, the data format we use for sending and receiving data to and from the server, and AJAX, where we use JavaScript to make HTTP requests with jQuery's API.

6.1 JSON and jQuery's Ajax API

The term AJAX is an old term. It was coined in 2005 and many developers still use that term whereas other developers don't. It stands for asynchronous JavaScript and XML. Now XML was used here because that's just what was used by the person who coined the phrase AJAX. It was the data format for sending and receiving data to and from the server. We don't use XML anymore. The whole idea though is that you would use JavaScript to send and receive data from the server and you did all of this without having to refresh the page. It didn't matter what that data was in, it could be XML it could be HTML, it could be just plain text it didn't matter. We used JavaScript to make request and then we worked with data that came with the response. So in today's day and age we don't use XML as our data formats, we now use something called JSON. Other people call it JSON, which I think sounds weird. It's also weird to say, so I just [LAUGH] say JSON. And JSON stands for JavaScript Object Notation. Now we're going to create a JavaScript object first. Let's create one just call is simply obj. And we're going to have a property called people. Now this people property is going to be an array of individual objects that refer to individual people. So we would have an object that would have a firstName property and we'll set the value to John. Then we will have a lastName property and we will set that to Doe. And then let's also have an age, which 25, sounds good. And so this would be one object to represent an individual person. But then we would have another object to represent another person. Let's just copy this and paste it, let's change the firstName to Jane though and then the age, Jane can be 30. So we have this objects that we could use and as JavaScript developers we can read this fairly easily. We have a structure called people, that structure just happens to be an array of individual objects that represent individual people. So a man named Douglas Crawford came up with the idea of using an object literal as a data format. There are some slight differences, but for the most part it's going to be the same. So JSON was born, JavaScript Object Notation. This is the JSON structure of that object that we just wrote in JavaScript. So we have the same delimiters, we have curly braces, we have square brackets, but notice here that the properties, our strings that is a requirement of JSON. And then the values are, well the values our strings are strings, our numbers are numbers. If we had a Boolean value, it would be true or false. So the idea behind the JSON is so that we can for one, have a lighter weight data format, for another, it's easy to read. And for the third reason is it's easy to convert to a JavaScript object. It's also easy to convert a JavaScript object to a JSON structure. Now let me say this, JSON is not a language, it is a data format. And while yes this is valid JavaScript this is not a JavaScript object. I mean we could come in here, we could say var obj equals this. But JSON has strings as properties. JavaScript typically does not, there is nothing that says that you can't have strings as properties and some people tend to do that and that is actually incorrect. So JSON is a data format, it is not JavaScript, Java Script is a programming language. So this is in a separate file we are going to use AJAX to retrieve this file and then we're going to convert it into a JavaScript object so that we can get at these values. So how do we do that? Well, we are using jQuery here and jQuery makes it quiet simple actually. We start with the dollar function, but we're not going to call the dollar function instead we're going to use it as an object. And we have several methods for making AJAX requests, the first is simply called AJAX. And this is the all purpose method we can make get requests, post requests, put requests. Really any type of HTTP request we can make with the AJAX method. That requires us however to supply a lot of information with that. So there are some helper methods to get the ball rolling much quicker. Most of the time, we're going to make either get or post requests. So there is a get method. There is a post method. And in this lesson we're just going to use the get method because we don't have really anything to make a post request to. So the get method is for making get requests. And we specify the thing that we want to make a get request for. That is going to be our data.json file. And we have just written AJAX, we are making a request for that file. Now here's the thing though. This is what's called an asynchronous request and you might be thinking well what, the heck is that? Well, let's do this let's go to the browser and let's go to tutsplus.com. So whenever we type in the URL and we press Enter, the browser is going to send the request to tutsplus.com. The server there is going to process that request and then it's going to send back a response. Now as we just saw, none of that was instantaneous. I mean, it took maybe a second or a couple seconds for everything to load in, but it was not instantaneous and it never will be instantaneous. There is always going to be some type of delay. And so that is actually a problem because if we make what's called asynchronous request, then our code is going to stop right here, whenever we make our request. And it's going to wait for the server to send back a response until any other JavaScript code is going to execute. So it's not just within this function as well. If we say alert this is immediately after $.get. This line of code is not going to execute, the lines after this isn't going to execute and other JavaScript in our application is not going to execute until this request has completed and that is a problem for user experience. We don't want to keep causing the user to have to stop and wait for an Ajax request to complete. So instead we have asynchronous request and basically what happens is, we make our request but the rest of our code continues to execute. So this is going to execute. That's going to send the request but JavaScript is going to continue to execute the rest of our code, so this is going to execute. Any other code that we have after that is going to execute, and other code within other parts of our application is going to execute. But that in and of itself, is also a problem. Because, well, how do we know whenever this request has completed and how do we work with that data? So instead of actually retrieving the data here what we end up with is a type of object called a deferred object. It's like a promise saying that I know that something is going on here and I will let you know when it's done. Well, that kind of sounds like an event doesn't it, the only thing is we have to wire up that quote unquote event. And we do so by using our deferred object, it has a method called then and then we've pass on the function that we want to execute whenever that deferred object is done doing whatever it is that it is supposed to be doing. So in our case this is whenever the request is sent and their response is received and processed by our computer. So let's have an alert and we will say that we got the file, hooray. So if we go to the browser and we view this, this is all wired up to the Home click events. So whenever we click on that, we see that this is immediately after $.get and then whenever we click on OK, we're going to see that we got the file. So you can see that with asynchronous our code is executing for retrieving the file from the HTTP server. The rest of our code executes and then the function that we pass to the then method on our differed object executed whenever the third object has completed. Now you typically won't see code like this, instead we would just call $.get and then would tack on .then and pass in our function. So this is what you would typically see. But now that we have data, let's actually look at what that data is. We're going to alert data and let's also comment this out because we've seen the order in which everything executes, we don't need to keep seeing that extra alert box. So whenever we click on home, we see object Object. Well, is that something we really expected? Well, I don't know what you expected but I would have expected to see the contents of data.json but that's not what happened. So whenever we made our request, the server sent back the response but it said that this is JSON data. So jQuery saw that it was receiving JSON from the server and so it just automatically converted it for us. So inside of our callback function, what we actually have is the JavaScript to representation of our JSON. So that means that data.people and this is an array so we can use the index of 0 to retrieve our first person and then we can say firstName. And if we view this in the browser then we are going to see John and the alert box. So jQuery is going to inspect the data that's coming back. If the server says what that is it's going to try to convert the data to what it thinks is best. However, there are some times when the server would respond with JSON data but it wouldn't say that it's JSON data. It would just be plain text or something like that. In which case, we can come in here and we can say that instead of using the gets method. Well, we know that we are expecting JSON, so we'll just go ahead and say, we are expecting JSON, convert it for us. And that way, if the server responds with the correct MIME type, then it converts it. If it doesn't, it's still going to convert it because we as the programmers know that we are retrieving JSON data. So let's save this. Let's hop on over back to the browser and refresh the page. Whenever we click on Home, we are still going to see the value of John in the alert box. So AJAX is nothing more than using JavaScript to make HTTP requests. And jQuery revolutionized the way that we do AJAX because before we had AJAX libraries AJAX was kind of hard, or at least it required a whole lot of typing. But as with many of the new modern standards, jQuery has influenced the way that we perform AJAX with pure JavaScript. And we will be looking at that in the next lesson.

Back to the top