Home arrow AJAX & Prototype arrow Using Ajax and jQuery

Using Ajax and jQuery

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.

TABLE OF CONTENTS:
  1. Using Ajax and jQuery
  2. Triggering POST requests via the “ajax()” method
  3. Using jQuery and the Ajax “get()” method
  4. Using jQuery and the Ajax "load" method
By: Alejandro Gervasio
Rating: starstarstarstarstar / 1
May 05, 2011

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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.



 
 
>>> More AJAX & Prototype Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: