6.1 Loading Pages Asynchronously

[NOISE] So finally, we make it to the Ajax chapter, and this is where we get to have a lot of fun, and this is especially an area where jQuery really shines. It will turn a massive number of lines into a single method call, and that's really amazing, especially when you factor in all of the browser quirks and internet explorer six or seven or even eight, there's quite a few, but jQuery takes care of all of that for you. Just call the method, and rest assured that in any browser it's going to work great. Now, before we dig into the load method, which will be our introductory method for this lesson, I want you to take a look at how they are referred to, shorthand methods. Well that's a little weird. Why would we call them shorthand? What are they shorthand for? Hm, well, let's look at jQuery.getJSON(). This is one that we've experimented with slightly, that we'll go over a little bit more in the next lesson. And what we can see here is that we call it and we pass a URL. And this will be the path that we request. We can pass some data to it, if you need to send an object through. And then we also have a success callback function that will be triggered, if the request succeeds. But then if we scroll down,. Now we see it. Get JSON is shorthand for jQuery.ajax. So, jQuery.ajax is the parent method. And when you use jQuery.get or post or get Jason. There's about five of them behind the scenes. All of them are simply helper methods that point to jQuery.ajax. And to prove this, we'll go to the jQuery source. Here we are again at code.jQuery.com. And I'm gonna search for get JSON. There we go. So now we can see that we are extending jQuery and they're adding a couple methods, get script and get JSON. But take a look. Get JSON is the one we're interested in. And it's simply returning a reference to jQuery.get. Hm, that's a little interesting because I thought they pointed to jQuery.ajax. Okay, we'll let's scroll up a bit and take a look at jQuery.get. And you can see what they're doing here, is they're combining both of them. But now if we dig in we can see there it is. It's returning a call to the jquery.ajax method. So, that's an important thing to understand before you dig into any of this. When you call jquery.get jacn what's happening is you're calling one method, that method will then call another method, jquery.get. Jquery.get will call jquery.ajax. Let's look for that right now, and then jquery.ajax will handle the process of actually making the request. So when you call jquery.get Jason, you're calling that method, then the jquery.get method, then the jquery.ajax method. So as you can imagine, wouldn't it be easier just to reference jquery.ajax immediately. And the answer is yes, and then at the same time, you don't wanna worry about it too much. jQuery's very fast, these function calls are occurring very, very, very fast. So if we come to our code, and we reference jQuery.getJSON, that's perfectly okay. I don't want you to feel bad about it at all. But at the same time, if it makes you feel better, and it makes you feel like you're saving time, even though you're really not. You can definitely use ajax, and save a couple method calls. It's a good thing to know. So before we dig into the load method, it's important to understand which ones point to ajax. So we have load, we have getJSON, we have get, we have post, and we have getScript, but again, behind the scenes, all of these are going to be calling jquery.ajax and simply passing in different parameters. Let's take a look at the load method, which is pretty neat. As you can see here, I have an empty page, and then we have about.html, and I need to find a way to get about.html onto index.html, so perhaps, maybe the user clicks on a button and we want to asynchronously load the contents of the about page, and display it for them. That way, we don't have to perform a full postback. All right. Well, with load, it's really easy. We will grab the body, in this case, that's fine. And I'm simply going to load about.html. And let's see what happens when we do that alone. I'll reload the page, and we get this weird error. What does that mean? Cannot load the file because origin null is not allowed by access control allow origin. Well, we learned a couple lessons ago, we can't make requests to other domains, at least not without a little trickery, because of security reasons. And that's why we had to refer to JSONP and call backs. But why is this happening locally? And the answer is, we need to have a local server setup in Chrome. You'll find in Firefox, this is okay, but in Chrome, they have some security settings setup. So you would either need to load Chrome by passing a special flag. Or, if you're a PHP developer, you would drag your project to your HTTPdocs folder, and then run the server from there, the way you would do it with any PHP project. For users who have access to Python, so mostly Linux and Mac, I'll give you guys a little tip. If we switch over to iTerm, I have an alias set up. So if I browse to, we're in lesson 23. And I run server, that's going to instantly create a server in the current folder. And now you can see that we've loaded that. So how are we doing that? Well, I simply have an alias set up. Alias server equals and we're opening a local host and we're using a python server. It's as easy as that. So, if you'd like to use this alias in your projects you can do something like, open up your bash profile, and you can see here among other things, I have my alias set up. Right there. So I open that file, I paste it in. I'm done, so I can press Ctrl+W+Q. Exclamation point to make sure that I exit. And we're all set up. So, you can reset the terminal or reload it. You can browse to your lessons folder. And I'll go into, once again, lesson 23. I run server. And as easy as that, instant server, really, really neat. All right, so I'm gonna close all three of these out. And check it out, we have loaded the about page using one line of code. I'm gonna inspect this element though, because I'm curious what we got. I click on it right here, and we see within the body, we just loaded that whole page, and there is some, some stripping that's occurring here, we're not getting another dog type. But still, we're getting this meta type, we're getting the title tag and we're getting the container. But really, if we think, about it all I'm interested in, is getting this container div in there. So, wouldn't it be nice if there was a way where we could specify load the about.type html file. But all I'm interested in is this div right here. And we can. The key is to pass a selector string after the URL. So we are loading about.html, and I'm interested in grabbing the element with the class of container. Let's try that out. Once again, I reload, we get the same thing but now, check it out. We've only loaded the div with the class of container. So, it's important to understand that behind the scenes, jQuery's still fetching this whole page, and then it's parsing it however you need. So, it's grabbing that whole page, and then it's filtering that down to only what we've selected. But now, we easily loaded our About page without performing another request. So, we can have an anchor tag here, and the value would be, Learn More About Me. And this is going to link to the about page. So this could even be your navigation. Your about page, and when the user clicks on it, you hijack that click event, and then you asynchronously load the page rather than performing a full page refresh. But for now, this will do. So, the next step is, we listen for when that link is clicked. For now, I'm just going to reference it like this, but you would of course need to be more specific. And we listen for when it's clicked. Then, we paste this in, and we load the about page. Now, there is a couple things we need to take note of. Remember that when we click on a click, its default action is to link to a new page. So if I reload this and I click on it, it directs us to about.html. So if we want to intercept that, we need to remember to disable the default action. And in the case of an anchor tag, as we've learned, the default action is to link to that new page. So now when I click on it, we're not going to redirect to about.html, we're instead going to load the contents, like so. Now let's come back and I'm gonna switch to full screen. And rather than hard coding about.html, let's grab the URL out of the href. And rather than hard coding about.html, let's grab it out of the href attribute of what was clicked so we can say our href is going to be equal to. Get the anchor tag that was clicked, and grab its href attributes. Now, we can load, and I can replace all of this with href and then if we want we can append container. Let's try it again. Reload the page, I click on it, and we still load about.html, but now we're grabbing that value dynamically. So, the idea is maybe you could have a contact page as well. Contact.html. And for now, because we're working with a static site, we will have h2 Contact Me, and then we will represent a contact form here. So, then back at index.html within our navigation, or we're gonna be really lazy here and just do a new one. Contact.html. And because we're using a very generalized lector, you would probably have this with an un-ordered list or a navigation element. And then you would use it that way, nav.find a, something like that. But for now, we're gnna be lazy so we can focus only on this load method. Let's see if it still works. We have learn more about me, that's good. Refresh the page, and no we want the contact me, and still we're not directing to that page. But, if JavaScript is disabled, we will simply link to the contact page, where it will still work for those users. So, we don't have to deal with any accessibility issues if JavaScript is turned off. Now in this case, when we click on a link we are overriding everything because we're just putting it in the body. So if we want, we could say, get the div with the class of wrap, and we'll go ahead and create that right now. And then that element will load it rather than the body. One more time, click on these, there we go. See how those are updating, and then of course as we've learned, because the user's clicking on these buttons, it doesn't make sense every single time to jump into the DOM to grab the div with the class of nav, so we would as we've always been doing wrap this within self-invoking function and at the top we can grab the wrap. And that way, each time, we can simply reference it like so, and we save a little bit of effort there. One more time, learn about me, contact me, and we can go back and forth. So there are lots of use cases for this. One thing you can imagine is, let's say that you wanna click on the contact me, but rather than just loading the contact page. You want to load the contact form. That is oncontact.html and then, maybe you want to show that in a little light box. So they click on contact me, and you'll immediately see that form pop-up, and that way the user doesn't have to be re-directed to a specific contact page. So, that is something I want you to try to work on tonight. How could you create a link, where the user clicks on contact, and then it loads a contact form from contacts.html and displays it on the page? And that's your assignment for tonight. I'll see you later.