Search within TutorialsPark

Jquery Ajax JSON and Global Events


Learn to use jQuery Ajax methods to get JSON data from server and Global Event Handlers


jQuery Ajax : Getting JSON Data

The jQuery method $.getJSON(url,[data], [success]) is used to fetch the file and then process it. The Data fetched is simply a text string in JSON format.

It loads JSON-encoded data from the server using a GET HTTP request.

Example: JSON File demoJSON.js

Example: Getting JSON Data

Give it a TRY! » Note: The method parent() can go only one level up the DOM.


jQuery Ajax : Global Event Handlers

Jquery Provides various methods to register handlers to be called when a certain event takes place for any Ajax Request on the Page.

Table : Jquery ajax() Global Event Method

Method Description
ajaxComplete(function) To Register a function to be called when an Ajax request completes.
ajaxError(function) To Register a functin to be called when an Ajax request encounters an error.
ajaxSend(function) To Register a function to be called before an Ajax Request Commences
ajaxStart(function) To Register a function to be called when an Ajax request commences.
ajaxStop(function) To Register a function to be called when all Ajax Requests are complete
ajaxSuccess(function) To Register a function to be called when an Ajax request succeeds

jQuery Ajax : Global Event ajaxStart() Method

The jQuery Event ajaxStart(function(event, xhr, options)) is triggered when an Ajax request is started, as along as no other requests are active.

In case of concurrent requests, this event is triggered only for the first request.

Example: Global Event ajaxStart() Method

Give it a TRY! » Note:Event is triggerd when the Ajax Request is starting


jQuery Ajax: Global Event ajaxSend() Method

The jQuery Global Event Method ajaxSend(function(event, xhr, options)) is triggered prior to initiating the request in order to allow modification of the XHR instance prior to sending the request to the server.

Example: Global Event ajaxSend() Method

Give it a TRY! » Note:The event triggered prior to sending request


jQuery Ajax : Global Event ajaxError Method

The jQuery Global Event ajaxError(function(event, xhr, options)) is triggered when a request returns an error response. An optional fourth parameter referencing the thrown error, if any , is passed.

Example: Global Event ajaxError() Method

Give it a TRY! » Note:The event triggered when the request returns and error response


jQuery Ajax : Global Event ajaxSuccess() Method

The jQuery method ajaxSuccess(function(event, xhr, options)) is triggered when a request returns a successful response.

Example: Global Event ajaxSuccess() Method

Give it a TRY! » Note: The event is triggered on a successful response


jQuery Ajax: jQuery Global Event ajaxComplete() Method

The jQuery global Event ajaxComplete(function(event, xhr, options)) is triggered when a request completes, regardless of status.This callback is invoked even for synchronous requests.

Example: jQuery Global Event ajaxComplete() Method

Give it a TRY! » Note: The triggered when the request completes


jQuery Ajax : jQuery Global Event ajaxStop() Method

The jQuery Global Event ajaxStop(function(event, xhr, options)) is triggered when an Ajax request completes and there are no other concurrent request active.

Example: jQuery Global Event ajaxStop() Method

Give it a TRY! » Note:The event triggered when All ajax request are complete


jQuery Ajax : Local Event Handling using Ajax

There are also several settings which allows you to specify handler function for events that can be triggered throughout the life of an Ajax request.

These handlers can be used to specify the callback function that are central to Ajax requests

Table : Jquery Local Event Setting

Setting Description
beforeSend To specify a function that will be called before the Ajax request is started.
complete To specify a function that will be called when the Ajax request succeeds or fails.
error To specify a function that will be called when the Ajax request fails
success To specify a function that will be called when the Ajax request succeeds.

Example: Event Handling using jQuery

Give it a TRY! » Note: The handler function for successful Ajax operation