jQuery Ajax Overview

Monday, July 16, 2012

Developing web applications to function more like desktop applications is becoming more popular and easier to implement with the help of jQuery. Combining jQuery and Ajax together can help you build versatile and powerful applications. This article will provide an overview of both Ajax how jQuery has made Ajax development easier than ever before. In the upcoming articles in this series, we will look at the most common jQuery Ajax related methods in more detail.

What is Ajax?

AJAX in an acronym for "Asynchronous JavaScript and XML". Ajax has been around for quite some time, about 2005 and it has changed the way we now build web applications. Web pages are looking more like traditional client desktop applications by allowing web pages to make direct requests to web servers without reloading the page. The "page flicker" and post back delay annoyances are eliminated with Ajax. Ajax allows web pages to be updated asynchronously by exchanging data with the server behind the scenes. This allows the browser to update parts of a web page, without reloading the whole page.

jQuery and Ajax

While you can write Ajax code outside of jQuery, the advantage of using them together is simply to do more, while writing less. jQuery provides a rich set of various methods for Ajax development. With jQuery Ajax, you can access text, HTML, XML, and/or JSON data directly from the web server using both GET and POST methods.

$.ajax(options) is the low level Ajax method that provides the most functionality. However, it is more challenging to use than other high level methods. The more common jQuery method is load(). The jQuery load() method is a simple and powerful AJAX function. The basic sytax is as follows: $(selector).load(url,data,callback). To use this method, you simply need to define the HTML element(s) to change, and the url parameter to specify a web address for your data. That is basically it!



urlRequired url to send the request to
dataOptional data to send to the server along with the request
callbackOptional function to run after the method is completed

Ajax Methods

The methods listed in the following table are common jQuery Ajax methods.

$.ajax()Performs an Ajax request
ajaxComplete()Function to run when the Ajax request completes
ajaxError()Function to run when the Ajax request completes with an error
ajaxSend()Function to run before the Ajax request is sent
$.ajaxSetup()Sets the default values for Ajax requests
ajaxStart()Function to run when the first Ajax request begins
ajaxStop()Function to run when all Ajax requests have completed
ajaxSuccess()Function to run when an Ajax request completes successfully
$.get()Loads data using an Ajax HTTP GET request
$.getJSON()Loads JSON-encoded data using a HTTP GET request
$.getScript()Executes JavaScript using an Ajax HTTP GET request
load()Loads and puts the returned HTML into the selected element
$.param()Creates a serialized representation of an array or object
$.post()Loads data using an Ajax HTTP POST request
serialize()Encodes a set of form elements as a string for submission
serializeArray()Encodes a set of form elements as an array of names and values

HTML Example

We will use the following HTML for the examples listed below.

<!DOCTYPE html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  // ... jQuery Code ...
 <img id="img1" src="go.png" /> ; 
 <div id="div1"> <!-- Some Content --> </div>


Click the image button to load remote data into the div element using the jQuery Ajax load() method.

<script type="text/javascript">
 $("#go").click(function () {

click here
Click on the icon to execute the jQuery Ajax load() method!

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS and JavaScript Editor Professional jQuery Pro jQuery