jQuery Ajax in a nutshell

The following instruction will show you how to send, receive and handler information from a server using AJAX and jQuery.

This posts is related with sandorBlog(Javascript Ajax in a nutshell) where is explained how to communicate via AJAX using Javascript

Calling AJAX objects using jQuery is more simple then using javascript, that because in jQuery the objects are integrated into the jQuery functions.

.jQuery event handler

Before sending a request to the server, a User can trigger an event clicking on a button or activating one of the DOM events.

The following example shows how to trigger an event clicking on a button:

• <button class="btn btn-outline-secondary" type="button" name="TEST-AJAX-BUTTON" id="FIND-PRIME-NUMBER">DELETE</button> Give a name to a button like "TEST-AJAX-BUTTON".
• $('[name="TEST-AJAX-BUTTON"]') The name is listening by the jQuery selector that if the user clicks on the button with the selected name, the event methods .click(function(){} will trigger and execute the function.

.jQuery AJAX .post() method

In this case, I used the jQuery's method $.post().

Using the Method $.post() or $.get you will not need to explicitly declare the method which is mandatory with the $.ajax() method.

$.post(url, data, function(), dataType)

• Set the url to specified and eventually change, during the execution, the request's destination path.
• { data1: $('#data1').val(), data2: $('#data2').val(), data3: 'anyDataHere'} It is possible to add all data you need to send, separating them by a comma.
• function(parameter){ code; } The third parameter is used to execute and handling the answer receive from the server.
• dataType The type of data expected from the server (xml, json, script, text, html).

.done() .fail() .always()

The .post() methods as $.ajax and $.get, return an object. In my example calls three methods .done(), fail() and .always() whom given a function as parameter

• .done(function(data, textStatus, jqXHR) { code; }) is executed if the AJAX request succeeds.
• .fail(function(jqXHR, textStatus, errorThrown) { code; }) is called if the AJAX request fails
• .always(function(jqXHR || data, textStatus, jqXHR || errorThrown) { code; }) is called whenever the AJAX request finishes.

.function( parameters meaning )

• data is the data returned by the server
• textStatus is the textual status message returned by the server.
• jqXHR is the object which is also returned by the $.ajax() function ( jQuery.ajax/#jqXHR )
• errorThrown is the error thrown by jQuery

.jQueryAjax( structure )

.jQueryAjax( example )

The following example showings a jQuery Ajax request to the server about searching all prime numbers that the number you choose contains. If the number is small, the server could handles and sends back the result with the server response 200 OK.

If the number is big, the default timeout will be triggered and the connection will be lost with the ERROR 500 - Internal Server Error. The timeout of the browser is normally about 30 seconds.

There is also a button to simulate the ERROR 404 - Not Found.

.more Articles