Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Using AJAX calls with jQuery

Friday, September 28th, 2012 by Servage

It’s incredibly simple to build AJAX functionality using the JavaScript jQuery library. The jQuery library provides tons of easy-to-use functionality which enables you to integrate new, awesome features insanely fast. Let’s take a look at how to create a simple AJAX cll with jQuery.

Params

Start out with specifying query params:

  • type (post/get…)
  • url (target addresse for the AJAX request)
  • data (to be sent with the request, e.g. as get params.
  • dataType (the expected dataType of the return)
  • success (callback method if the AJAX request gets a return)
  • error (callback method if the AJAX request fails)
  • complete (callback method, running no matter if the request fails or not)

Example

$.ajax({
	type: 'get',
	url: 'some url',
	data: 'some data',
	dataType: 'json',
	success: function(responseText, statusText, XMLHttpRequest) {
		// Do something with the response on success...
	},
	error: function(XMLHttpRequest, statusText, errorThrown) {
		// Do something with the response on error...
	},
	complete: function(XMLHttpRequest, statusText) {
		// Do something with the response no matter the result...
		console.log(XMLHttpRequest);
	},
});

In this case the use the normal $.ajax method, which provides what we need.

Move on

So how can you use this? Well, you can trigger AJAX calls on any type of event, for example a mouse-click, and then you can do something with the return value inside the callback methods. For example update a part of a page. A typical example is a “delete” button. Clicking the delete button triggers an AJAX call to the server, the server removes the item from the database, and sends an “ok, item deleted” back. Inside the success-callback, you could then have some jQuery to manipulate the DOM and remove the item representation (for example a table row).

Using AJAX calls with jQuery, 4.7 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.