Ajax Using Jquery

Posted on  by admin
  • AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
  • Try it Yourself ».
  • AJAX = Asynchronous JavaScript and XML.
  • In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.
  • Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.
  • You can learn more about AJAX in our AJAX tutorial.
  • jQuery provides several methods for AJAX functionality.
  • With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!
  • Without jQuery, AJAX coding can be a bit tricky!Writing regular AJAX code can be a bit tricky, because different browsers have different syntax for AJAX implementation.

This means that you will have to write extra code to test for different browsers. However, the jQuery team has taken care of this for us, so that we can write AJAX functionality with only one single line of code.

In the next chapters we will look at the most important jQuery AJAX methods. The jQuery ajax() method provides core functionality of Ajax in jQuery.

It sends asynchronous HTTP requests to the server. Parameter description:. url: A string URL to which you want to submit or retrieve the data.

Synchronous vs. Asynchronous Communication

options: Configuration options for Ajax request. An options parameter can be specified using JSON format.

What About jQuery and AJAX?

This parameter is optional. The following table list all the options available for configuring Ajax request.

Let's see how to send http requests using $.ajax() (or jQuery.ajax()) method.

  • The ajax() methods performs asynchronous http request and gets the data from the server. The following example shows how to send a simple Ajax request.

  • In the above example, first parameter '/getData' of ajax() method is a url from which we want to retrieve the data. By default ajax() method performs http GET request if option parameter does not include method option.

  • The second parameter is options parameter in JSON format where we have specified callback function that will be executed when request succeeds. You can configure other options as mentioned in the above table.

Send Http POST request using ajax()

The following example shows how to get the JSON data using ajax() method.

In the above example, first parameter is a request url which will return JSON data. In the options parameter, we have specified dataType and timeout options. The dataType option specifies the type of response data, in this case it is JSON.

The timeout parameter specifies request timeout in milliseconds.

jQuery AJAX Methods

We have also specified callback functions for error and success. The ajax() method returns an object of jQuery XMLHttpRequest. The following example shows how to use jQuery XMLHttpRequest object. The ajax() method can send all type of http requests.

Send Ajax Request

The following example sends http POST request to the server.

In the above example, first parameter is a url which is used to submit the data.

  • In the options parameter, we have specified a type option as a POST, so ajax() method will send http POST request.

  • Also, we have specified data option as a JSON object containing data which will be submitted to the server. So this way you can send GET, POST or PUT request using ajax() method.

  • Visit jQuery documentation to know more about ajax() method. $.ajax() method allows you to send asynchronous http requests to submit or retrieve data from the server without reloading the whole page.

Global Event Handlers

$.ajax() can be used to send http GET, POST, PUT, DELETE etc.

It can retrieve any type of response from the server. Syntax: $.ajax(url,[options]). Use option parameter to customize ajax request as per your need. Description: Perform an asynchronous HTTP (Ajax) request. A string containing the URL to which the request is sent.

Type: PlainObject. A set of key/value pairs that configure the Ajax request.

$.ajaxSetup() to Globalize Parameters

All settings are optional. A default can be set for any option with $.ajaxSetup(). See jQuery.ajax( settings ) below for a complete list of all settings. Type: PlainObject. A set of key/value pairs that configure the Ajax request.

$.ajaxPrefilter() to filter Ajax Requests

All settings are optional. A default can be set for any option with $.ajaxSetup(). Type: PlainObject. A set of key/value pairs that map a given dataType to its MIME type, which gets sent in the Accept request header.

This header tells the server what kind of response it will accept in return.

For example, the following defines a custom type mycustomtype to be sent with the request: Note: You will need to specify a complementary entry for this type in converters for this to work properly.

jqXHR (jQuery XMLHttpRequest) vs. XHR (XMLHttpRequest)

async (default: true). By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false.

Sr.No.Methods & Description
1jQuery.ajax( options )

Load a remote page using an HTTP request.

2jQuery.ajaxSetup( options )

Setup global settings for AJAX requests.

3jQuery.get( url, [data], [callback], [type] )

Load a remote page using an HTTP GET request.

4jQuery.getJSON( url, [data], [callback] )

Load JSON data using an HTTP GET request.

5jQuery.getScript( url, [callback] )

Loads and executes a JavaScript file using an HTTP GET request.

6jQuery.post( url, [data], [callback], [type] )

Load a remote page using an HTTP POST request.

7load( url, [data], [callback] )

Load HTML from a remote file and inject it into the DOM.

8serialize( )

Serializes a set of input elements into a string of data.

9serializeArray( )

Serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with.

Invoking HTTP Methods

Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done().

Sr.No.Methods & Description
1ajaxComplete( callback )

Attach a function to be executed whenever an AJAX request completes.

2ajaxStart( callback )

Attach a function to be executed whenever an AJAX request begins and there is none already active.

3ajaxError( callback )

Attach a function to be executed whenever an AJAX request fails.

4ajaxSend( callback )

Attach a function to be executed before an AJAX request is sent.

5ajaxStop( callback )

Attach a function to be executed whenever all AJAX requests have ended.

6ajaxSuccess( callback )

Attach a function to be executed whenever an AJAX request completes successfully.

Other Ajax Powered Functions in jQuery

Type: Function( jqXHR jqXHR, PlainObject settings ).

Recommended Reading:

A pre-request callback function that can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent.

Use this to set custom headers, etc.

The jqXHR and settings objects are passed as arguments.

Additional Notes:

This is an Ajax Event.

Returning false in the beforeSend function will cancel the request.

As of jQuery 1.5, the beforeSend option will be called regardless of the type of request.

jQuery AJAX Example

cache (default: true, false for dataType 'script' and 'jsonp').

If set to false, it will force requested pages not to be cached by the browser.

Note: Setting cache to false will only work correctly with HEAD and GET requests.

$.ajaxSend()

It works by appending "_={timestamp}" to the GET parameters.

The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.

Type: Function( jqXHR jqXHR, String textStatus ).

Advanced Options

A function to be called when the request finishes (after success and error callbacks are executed).

The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request ("success", "notmodified", "nocontent", "error", "timeout", "abort", or "parsererror").

As of jQuery 1.5, the complete setting can accept an array of functions.

$.ajaxStop()

Each function will be called in turn.

This is an Ajax Event.


Type: PlainObject.