Guide to Using AJAX with jQuery

As the web evolves, new technologies are emerging and uniting in remarkable ways. JQuery is a great tool which provides a rich set of AJAX methods to develope next generation web application. Ajax is the method that all the convenience methods ultimately use to make the actual call to the server. They do this by performing all the necessary setup and setting default values for various arguments that work for the particular Ajax task at hand. AJAX offers users a seamless way to work with your interface, no waiting for whole pages to load. jQuery has a set of tools to make it super simple to implement.

Other useful jQuery articles:

The technologies involved in an AJAX solution include:

  • Javascript, to capture interactions with user and event at browser
  • The XMLHttpRequest object, to request to server without interrupting other browser task
  • XML files on the server, or other such as HTML/JSON
  • More JavaScript, to interpret the data from server and present it to the page

Example

First, create the main document mypage.html.

<html>
<head>
</head>
<body>
<a href="#" id="mypage1">my page 1</a> | <a href="#" id="mypage2">my page 2</a>
<div id="content"></div>
</body>
</html>

Now we are creating two pages mypage1.html and mypage2.html.

mypage1.html

<h2>Page 1</h2>
<p>This is <b>My Page 1</b></p>

mypage2.html

<h2>Page 2</h2>
<p>This is <b>My Page 2</b></p>

jQuery code for Ajax:

$(document).ready(function() {
$('#mypage1').click(function() {
$('#content').load('mypage1.html');
return false;
});
$('#mypage2').click(function() {
$('#content').load('mypage2.html');
return false;
});
});

Here is the complete document mypage.html:

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#mypage1').click(function() {
$('#content').load('mypage1.html');
return false;
});
$('#mypage2').click(function() {
$('#content').load('mypage2.html');
return false;
});
});
</script>
</head>
<body>
<a href="#" id="mypage1">my page 1</a> | <a href="#" id="mypage2">my page 2</a>
<div id="content"></div>
</body>
</html>

JQuery AJAX Methods

Following are all important JQuery Ajax methods:

jQuery.ajax() – Load a remote page using an HTTP request.

jQuery.ajaxSetup() – Setup global settings for AJAX requests.

jQuery.get() – Load a remote page using an HTTP GET request.

jQuery.getJSON() – Load JSON data using an HTTP GET request.

jQuery.getScript() – Loads and executes a JavaScript file using an HTTP GET request.

jQuery.post() – Load a remote page using an HTTP POST request.

load() – Load HTML from a remote file and inject it into the DOM.

serialize() – Serializes a set of input elements into a string of data.

In Closing

Submitting forms is not the only use of Ajax, but in combination with PHP and MySQL it can be a powerful tool for making your form submitting easy. Remember to share the article if you have enjoyed it and leave us a comment.