jQuery for AJAX

I know it's not something we'll get around to using in this course, but I have found it very useful and interesting so I thought I'd share with the class this wonderful JavaScript library known as jQuery. jQuery was designed to make code much simpler and faster. This nifty little library was released back in 2006 and best of all, it's completely free. One of the biggest reasons I love it is not just for the code simplicity but even more so for the cross-browser compatibility. As we have already seen in this class already, when coding for the Web, browsers can cause all kinds of issues and problems. jQuery is also 100% W3C Standards Compliant, so all Web standards validation will pass successfully. jQuery is very simple in syntax, and has the ability to manipulate multiple aspects of Web Development. Using jQuery, DOM elements can be modified as well as CSS and AJAX.



Everything in jQuery is run by the dollar sign ($). The best way to explain some of the neat aspects of using jQuery is probably to demonstrate some actual usage of it. The first step to using jQuery is to download it from jquery.com. The production version is much smaller, yet provides all the functionality needed to implement jQuery into your own site. (The uncompressed version is designed for those interested in further developing jQuery itself.) Once you have a copy of the actual '.js' file downloaded onto your computer, the next step is to place it on the server with your index file and include it into the file you wish to use it on. This can be done using the standard XHTML JavaScript inclusion syntax (). Now that the file is included into your page, you may start using standard html or php or whatever you want to begin building your page.

The way jQuery works is that instead of you having to type long, drawn-out code, it allows you to use much shorter syntax to accomplish the same tasks. For example, in regular JavaScript, in order to get an element from the DOM, you would say something like:

document.getElementById(idname);

But with jQuery all you need to do is use the jQuery reference ($) followed by the command, like this:

$('#idname');

The other cool thing about this syntax, is that just like CSS, jQuery uses the '#' for id's and the '.' for classes. This allows you to get an element by the class name just as easily:

$('.classname');

So, this is just basic, but where jQuery really proves beneficial is when working with AJAX and CSS. I don't want to confuse anybody, so if you're learning AJAX for the first time in this class, and you get confused easily, then don't read the following. Basically how jQuery works with AJAX is that it formats everything for you with it's built in code so that instead of making an AJAX statement using the xmlhttprequest and making a function called createRequest() and worrying about the different browsers, all you have to do in jQuery is use an event called load(). This event allows for some very basic AJAX calls in extremely short amounts of code. By combining the jQuery version of getElementById(), the code to load some text into your page from a different location is just one line.

$("#content").load("new.html");

The "content" is the id of the div in your current page that will be filled with the loaded text/information from the history.html file. The url can be local or global, and can be php, html, or other Web languages. Just as simply, jQuery can request a page with a GET statement by simply typing:

$.get("test.php");

As you can see, jQuery is an extremely powerful library. Hopefully I did a decent job explaining what it is and how it works. Obviously, there is much more to it and it can be much more complex, but I think you get the basic idea. I encourage anyone reading this to be sure and learn AJAX from scratch the long way first, because I skipped all that and just started using jQuery calls for AJAX in my projects, and now I lack a lot of understanding in how AJAX ACTUALLY works. Fortunately, this class is all about AJAX, so I look forward to learning AJAX the correct way. Once I understand all the basics of it and am comfortable writing it properly, then I'll be able to go back to using jQuery to shorten up the code.



EDIT:
After reading over my post it still seemed a little confusing, so I threw together a little demo that everyone can view. Maybe this will help clear things up a little bit.

It's on my people account: people.emich.edu/mmager

It's a very basic example, where I'm just using a link to call my javascript function. In my function I use the .load() event and it loads the information from the other file (new.html) into the location specified (the content id div), so it replaces the original text. Hope this makes it a little more clear!