JQuery_ Novice to Ninja - Earle Castledine [80]
As Ajax runs on the browser, we need a way to interact dynamically with server. Each web browser tends to supply slightly different methods for achieving this. Lucky for us, jQuery is here to make sure we don’t have to worry about these differences.
We’ve seen armfuls of jQuery functions for manipulating the DOM, so you might be worried about the barrage of documentation you’ll need to absorb to write killer Ajax functionality. Well, the good news is that there are only a handful of Ajax functions in jQuery—and most of those are just useful wrapper functions to help us out.
Loading Remote HTML
We’d better make a start on some coding—the StarTrackr! guy is growing cranky, as it’s been a while since we’ve given him an update and there’s yet to be any Ajax gracing his site. We’ll put a quick Ajax enhancement up for him using the easiest of the jQuery Ajax functions: load.
The load method will magically grab an HTML file off the server and insert its contents within the current web page. You can load either static HTML files, or dynamic pages that generate HTML output. Here’s a quick example of how you use it:
$('div:first').load('test.html');
That’s a very small amount of code for some cool Ajax functionality! This dynamically inserts the entire contents (anything inside the
Warning: Which load?
Be careful—there are a couple of disparate uses for the load keyword in jQuery. One is the Ajax load method, which we’ve just seen, and the other is the load event, which fires when an object (such as the window or an image) has finished loading.
Enhancing Hyperlinks with Hijax
Let’s move this goodness into StarTrackr! then. We’re going to wow our client by setting up a host of pages containing key celebrities’ biographies. The main page will include a bunch of standard hyperlinks to take you to the biography pages. Then, with our new Ajax skills, we’ll intercept the links when a user clicks on them, and instead of sending the user to the biography page, we’ll load the information below the links.
This is a great technique for loading external information; as well as our home page loading snappily, any users who visit our site without JavaScript will still be able to visit the biography pages as normal links. Progressively enhancing hyperlinks in this manner is sometimes called hijax, a term coined by Jeremy Keith (you hijack the hyperlinks with Ajax, get it?).
To start on our site, we’re going to need some HTML to load in. Keeping it nice and simple for now, we’ll construct pages consisting of just a heading and a description:
chapter_06/02_hijax_links/baronVonJovi.html (excerpt)
Baron von Jovi
It's a little known fact that Baron von Jovi …
We’ll require one HTML page per celebrity. If you had millions of entries, you’d probably want to avoid coding them all by hand—but you could load them from a database, passing a query string to a server-side script to load the correct page. We only have a few featured celebs, so we’ll do it the long way.
Important: Limitations of the load Function
For security reasons, the content you load must be stored on the same domain as the web page from which your script is running. Web browsers typically do not let you make requests to third-party servers, to prevent Cross-site Scripting attacks —that is, evil scripts being maliciously injected into the page. If you need to access content hosted on a different domain, you may need to set up a server-side proxy that calls the other server for you. Alternatively, if the third-party server can deliver JSONP data, you could have a look at the jQuery getJSON function. We’ll be looking into this function very shortly.