JQuery provides an Ajax (Asynchronous JavaScript and XML) wrapper function, which is very flexible to use, browser independent and customizable. At first I will describe some basic settings and functions. After that I will show you two examples. The first will be very short and simple, the second will show you more functionality and possible parameters of the jQuery jQuery.ajax() function. Last but not least I will show up some derived methods, that facilitate some standard or often used requests.
Prerequisites
For using jQuery you have to include the jQuery script URL into your HTML head tag. I recommend to use the jQuery JS resource URL from the Google CDN (see why). If you want to download the JQuery library and install on your webserver go to the jQuery download page.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- or -->
<script type="text/javascript" src="http://yourdomain.tld/js-path/jquery.min.js"></script>
</head>
<body></body>
</html>
Basic Method Structures
//url: request URL //settings jQuery.ajax(settings); //shorter $.ajax(settings);
If you don't need to customize the default settings. You can use the following calling structure.
jQuery.ajax(url); //or shorter $.ajax(url);
Basic Settings:
- Of course the most important setting is
url, which contains the request URL. - The next important setting is
type, that defines the request method type (GET, PUT, POST, DELETE, etc.). - The
dataTypesetting defines your expected response mime type from the server (e.g. application/json) - The
headerssetting contains additional request header values (e.g. session id) - The
datasetting includes the data, which you want to send to the server (e.g. json string, interesting for PUT and POST request method) - The
asyncsetting allows you to use only synchronous calls. Default isfalsepre. - In most cases the default of the
cachesetting istrue. It means, that not a timestamp is appended to the request URL. So the browser caches the responses. You can disable this parameter with the valuefalse.
The settings error and success defines the success or error handling callback functions.
$.ajax({
..
//includes the response status (e.g. 404 not found) and an error message
error: function(xhr, status, error) {
alert('(' + status + ', ' + error + ')');
},
success: function(data) {
alert(data);
}
});
You can find all settings on the following jQuery web page.
If you want to override the default value globally you can use the jQuery ajaxSetup method.
//all $.ajax() requests will be executed synchronously, not really Ajax
$.ajaxSetup({
async: false
});
Example 1: Load and Embed HTML snippet
I saved an external HTML with the location http://developers-blog.org/resources/jquery-ajax/snippet.html.
Hello developers-blog.org reader.
After a click on load the jQuery Ajax method will get the HTML snippet and will append the content to the white box.
//wait for HTML document
$(document).ready(function() {
$('#load-button').click(function() {
$.ajax({
url: 'http://developers-blog.org/resources/jquery-ajax/snippet.html',
success: function(data) {
$('#load-button').empty();
$('#load-button').append(data);
}
});
});
});
Example 2: Load JSON and create List
This examples load an JSON resource and creates a HTML list
JSON Code:
[
{"name":"Superman"},
{"name":"Spiderman"},
{"name":"Flash Gordon"}
]
jQuery Ajax Code:
//wait for HTML document
$(document).ready(function() {
$('#load-button-json').click(function() {
$.ajax({
url: 'http://developers-blog.org/resources/jquery-ajax/heroes-list.json',
type: "GET",
dataType: "json",
cache: false,
success: function(data) {
$('#load-button-json').empty();
var $ul = $('Derived methods
The first derived method from the jQuery Ajax wrapper function that I often use is the getJson() method.
$.getJSON('ajax/data.json', function(data) {
});
Another method that is sometimes useful is the post() method.
$.post("/resource", { firstName: "Rafael", secondName: "Sobek" } );
jQuery Ajax
Ajax Read the original post on DZone... Related topics Do you like this post? You may