jQuery jQuery.ajax( options ) Method

« Previous Chapter Next Chapter »

Description:

The jQuery.ajax( options ) method loads a remote page using an HTTP request.

$.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually.

Syntax:

Here is the simple syntax to use this method:

Example

$.ajax( options )

Parameters:

Here is the description of all the parameters used by this method:

  • options: A set of key/value pairs that configure the Ajax request. All options are optional.

Here is the list of option which could be used as key/value pairs. Except URL, rest of the parameters are optional:

Option Description
async A Boolean indicating whether to perform the request asynchronously. The default value is true.
beforeSend A callback function that is executed before the request is sent.
complete A callback function that executes whenever the request finishes.
contentType A string containing a MIME content type to set for the request. The default value is application/x-www-form-urlencoded.
data A map or string that is sent to the server with the request.
dataFilter A function to be used to handle the raw responsed data of XMLHttpRequest. A pre-filtering function to sanitize the response.
dataType A string defining the type of data expected back from the server (xml, html, json, or script).
error A callback function that is executed if the request fails.
global A Boolean indicating whether global AJAX event handlers will be triggered by this request. The default value is true.
ifModified A Boolean indicating whether the server should check if the page is modified before responding to the request.
jsonp Override the callback function name in a jsonp request.
password A password to be used in response to an HTTP access authentication request.
processData A Boolean indicating whether to convert the submitted data from an object form into a query-string form. The default value is true.
success A callback function that is executed if the request succeeds.
timeout Number of milliseconds after which the request will time out in failure
timeout Set a local timeout (in milliseconds) for the request.
type A string defining the HTTP method to use for the request (GET or POST). The default value is GET.
url A string containing the URL to which the request is sent.
username A username to be used in response to an HTTP access authentication request.
xhr Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise.

Example:

Assuming we have following HTML content in /jquery/result.html file:

Example

<h1>THIS IS RESULT...</h1>

Following is a simple example a simple showing the usage of this method. Here we make use of success handler to populate returned HTML:

Example

<html>
<head>
   <script type="text/javascript"  src="../../js/jquery-2.2.0.js"></script>
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      $("#driver").click(function(event){
          $.ajax( {
             url:'/jquery/result.html',
             success:function(data) {
                $('#stage').html(data);
             }
          });
      });
   });
   </script>
</head>
<body>
   <p>Click on the button to load result.html file:</p>
   <div id="stage" style="background-color:blue;">
          STAGE
   </div>
   <input type="button" id="driver" value="Load Data" />
</body>
</html>
Code It Online

« Previous Chapter Next Chapter »
Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!