In this tutorial, you will learn how to use the jQuery API to handle and process a plethora of Ajax requests. This article explores the jquery methods for using both get and post with AJAX and details the .get() and .load() methods.
There’s no shortage of options when it comes to leveraging the power of Ajax with jQuery, as the library includes a decent number of methods which allow you to trigger different types of HTTP requests, such as GET and POST (to name a few), and parse the corresponding responses via callback functions.
Having said that (and assuming you're interested in learning how to take advantage of the functionality provided from the Ajax/jQuery tandem), in the course of this article I’m going to develop some comprehensive, fully-customizable examples aimed at demonstrating how to employ the aforementioned methods.
Getting started: using the “ajax()” method
As explained in the introduction, jQuery permits you to work with Ajax in a really simple and approachable fashion, thanks to the bunch of methods that it provides beneath the hood. With that being said, the first method that I plan on discussing here is called “ajax()”, which can be used for triggering different types of requests.
Of course, the best way to showcase the functionality of this method is by example, so below I coded one that demonstrates how to load the contents of a simple text file via a GET request. Take a look at it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Example using the 'ajax()' method</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('a').click(function(event) { event.preventDefault(); $.ajax({ type: "GET", url: "data.txt", error: function() { $('#container').html('Error loading the target file.'); }, success: function(data) { $('#container').html(data); } }); }); }); </script> <style type="text/css"> body { padding: 0; margin: 0; background: #5a2e2e; font: 0.8em Arial, Helvetica, sans-serif; color: #5a2e2e; } a { color: #5a2e2e; } #wrapper { width: 400px; margin: 0 auto; background-color: #fefdf1; } #header, #main, #footer { padding: 20px; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>Example using the 'ajax()' method</h1> <h2>Header Section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p> </div> <div id="main"> <h2>Main Section</h2> <p><a href="data.txt">Load text file...</a></p> <div id="container"></div> </div> <div id="footer"> <h2>Footer Section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p> </div> </div> </body> </html>
As shown in the previous example, using the “ajax()” method is a straightforward process that can be tackled with minor hassles, as the only arguments that the method require are the type of request that will be triggered (in this case GET), then the URL, and optionally the couple of callback functions that will be invoked if the request eventually fails or succeeds.
Now, suppose that the text file being loaded has the following definition:
(data.txt)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.
If, at this point, you give the prior example a try using your own browser, when clicking on the sample link you should get an outcome similar to the one depicted by the image below:
That worked like a charm, indeed! And best of all, the text file will remain accessible even if JavaScript is disabled in the browser. What more can you ask for?
Well, in fact the “ajax()” method can be used for performing POST requests with the same ease as it does with a GET one. And to prove the veracity of my claim, in the coming section I’ll be setting up a brand new example which will demonstrate how to submit and validate an HTML form using the method in question.
AJAX & Prototype 
