How to Use the jQuery ajax() Method
See Ajax: Tips and Tricks for similar articles.jQuery's core ajax()
method is a powerful and straightforward way of creating Ajax requests. To start using it, follow these six steps.
- Download the jQuery library from jquery.com or find a link to the latest version of jQuery by going to code.jquery.com.
- Create an HTML document that includes the jQuery library.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> </body> </html>
- Inside a
script
element in your HTML document, write jQuery'sready()
function, which will wait until the selected object (the HTML document in this case) is ready before executing the code passed into it.<script> $(document).ready(function() { }); </script>
- Write the
ajax()
method inside the body of the function passed into theready()
method and pass it an options object as the parameter. The options object must have the URL to send the request to as the first property.<script> $(document).ready(function() { $.ajax({'test.html'}); }); </script>
- After the URL, set any of the optional properties of the options object from the following list:
- type - The type of the request, "POST" or "GET". Defaults to "GET". Other request types, such as "PUT" and "DELETE" can be used, but they may not be supported by all browsers.
- async - Set to
false
if the request should be sent synchronously. Defaults to true. Note that if you set this option to false, your request will block execution of other code until the response is received. - cache - Whether to use a cached response if available. Defaults to
true
for all data types exceptscript
andjsonp
. When set tofalse
, the URL will simply have a cachebusting parameter appended to it. - success - A callback function to run if the request succeeds. The function receives the response data (converted to a JavaScript object if the data type was JSON), as well as the text status of the request and the raw request object.
- error - A callback function to run if the request results in an error. The function receives the raw request object and the text status of the request.
- complete - A callback function to run when the request is complete, regardless of success or failure. The function receives the raw request object and the text status of the request. This function will run after any error or success function, if those are also specified.
- context - The scope in which the callback function(s) should run (i.e., what this will mean inside the callback function(s)). By default, this inside the callback function(s) refers to the object originally passed to
$.ajax
. - data - The data to be sent to the server. This can either be an object, like
{foo:'bar',baz:'bim' }
, or a query string, such asfoo=bar&baz=bim
. - dataType - The type of data you expect back from the server. By default, jQuery will look at the MIME-type (from the Content-Type header) of the response if no data type is specified.
- jsonp - The callback parameter name to send in a query string when making a JSONP request. Defaults to callback. (jQuery will add a parameter
callback=XXXXXX
to the query string; this option sets the parameter name, and the following option sets the parameter value). - jsonpCallback - The value of the callback parameter to send in a query string when making a JSONP request. Defaults to an auto-generated random value.
- timeout - The time in milliseconds to wait before considering the request a failure.
- Use the result of the
ajax(
) method by setting the success property or by chaining another jQuery method to theajax()
method as shown in the following two examples.$.ajax({ url : 'test.txt', type : 'GET', dataType : 'text', success : function(text) { $('<h1/>').text(text).appendTo('body'); } });
The result of running either of these$.ajax({ url : 'test.txt', type : 'GET', dataType : 'text' }).done(function(text){ $('<h1/>').text(text).appendTo('body'); });
ajax()
methods will be that the contents oftest.txt
will be loaded into the script and a new h1 element containing the text will be appended to the body of the document.
Related Articles
- How to Make a Cross-origin Ajax Request
- How to Create a Login Form with Ajax
- How to Set Up Automatic Session Timeout with Ajax
- How to Use the Callback Function in Ajax
- How to Develop a Web Application with Ajax
- How to Make GET, POST, and HEAD Requests Using Ajax
- How to Use the jQuery ajax() Method (this article)
- How to Create a Lookup Form with Ajax
- How to Create a Slideshow with Ajax
- How to Handle the Response from the Server in Ajax
- How to Set Up for Ajax Training on Windows
- Inline Editing Using Ajax
- How to Create a Navigable Table with Ajax