Tutorials Point


  jQuery Tutorial
  jQuery UI
  jQuery References
  jQuery Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

jQuery - jQuery.ajax( options ) Method


previous next AddThis Social Bookmark Button


Advertisements

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:

$.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:

OptionDescription
asyncA Boolean indicating whether to perform the request asynchronously. The default value is true.
beforeSendA callback function that is executed before the request is sent.
completeA callback function that executes whenever the request finishes.
contentTypeA string containing a MIME content type to set for the request. The default value is application/x-www-form-urlencoded.
dataA map or string that is sent to the server with the request.
dataFilterA function to be used to handle the raw responsed data of XMLHttpRequest. This is a pre-filtering function to sanitize the response.
dataTypeA string defining the type of data expected back from the server (xml, html, json, or script).
errorA callback function that is executed if the request fails.
globalA Boolean indicating whether global AJAX event handlers will be triggered by this request. The default value is true.
ifModifiedA Boolean indicating whether the server should check if the page is modified before responding to the request.
jsonpOverride the callback function name in a jsonp request.
passwordA password to be used in response to an HTTP access authentication request.
processDataA Boolean indicating whether to convert the submitted data from an object form into a query-string form. The default value is true.
successA callback function that is executed if the request succeeds.
timeoutNumber of milliseconds after which the request will time out in failure
timeoutSet a local timeout (in milliseconds) for the request.
typeA string defining the HTTP method to use for the request (GET or POST). The default value is GET.
urlA string containing the URL to which the request is sent.
usernameA username to be used in response to an HTTP access authentication request.
xhrCallback 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:

<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:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.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>

To understand it in better way you can Try it yourself.



previous next Printer Friendly

Advertisements


  

Advertisements