jQuery | ajax() Method
The ajax() method in jQuery is used to perform an AJAX request or asynchronous HTTP request.
Syntax:
$.ajax({name:value, name:value, ... })
Parameters: The list of possible values are given below:
- type: It is used to specify the type of request.
- url: It is used to specify the URL to send the request to.
- username: It is used to specify a username to be used in an HTTP access authentication request.
- xhr: It is used for creating the XMLHttpRequest object.
- async: It’s default value is true. It indicates whether the request should be handled asynchronous or not.
- beforeSend(xhr): It is a function which is to be run before the request is being sent.
- dataType: The data type expected of the server response.
- error(xhr, status, error): It is used to run if the request fails.
- global: It’s default value is true. It is used to specify whether or not to trigger global AJAX event handles for the request.
- ifModified: It’s default value is false. It is used to specify whether a request is only successful if the response has changed since the last request.
- jsonp: A string overriding the callback function in a jsonp request.
- jsonpCallback: It is used to specify a name for the callback function in a jsonp request.
- cache: It’s default value is true. It indicates whether the browser should cache the requested pages.
- complete(xhr, status): It is a function which is to be run when the request is being finished.
- contentType: It’s default value is: “application/x-www-form-urlencoded” and it is used when data send to the server.
- context: It is used to specify the “this” value for all AJAX related callback functions.
- data: It is used to specify data to be sent to the server.
- dataFilter(data, type): It is used to handle the raw response data of the XMLHttpRequest.
- password: It is used to specify a password to be used in an HTTP access authentication request.
- processData: It’s default value is true. It is used to specify whether or not data sent with the request should be transformed into a query string.
- scriptCharset: It is used to specify the charset for the request.
- success(result, status, xhr): It is to be run when the request succeeds.
- timeout: It is the local timeout for the request. It measured in terms of milliseconds.
- traditional: It is used to specify whether or not to use the traditional style of param serialization.
Example 1: This example use ajax() method to add the text content using ajax request.
<!DOCTYPE html> < html > < head > < title > jQuery ajax() Method </ title > < script src = </ script > < script > $(document).ready(function() { $("li:parent").css("background-color", "green"); }); </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green" > GeeksForGeeks </ h1 > < h2 > jQuery ajax() Method </ h2 > < h3 id = "h11" ></ h3 > < button >Click</ button > <!-- Script to use ajax() method to add text content --> < script > $(document).ready(function() { $("button").click(function() { $.ajax({url: "geeks.txt", success: function(result) { $("#h11").html(result); }}); }); }); </ script > </ body > </ html > |
chevron_right
filter_none
Output:
- Before Clicking the button:
- After Clicking the button:
Example 2: This example illustrates the ajax() method in jQuery.
<!DOCTYPE html> < html > < head > < title > jQuery ajax() Method </ title > < script src = </ script > < script > $(document).ready(function() { $("li:parent").css("background-color", "green"); }); </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green" > GeeksForGeeks </ h1 > < h2 >jQuery ajax() Method</ h2 > < h3 id = "h11" ></ h3 > < button >Click</ button > <!-- Script to use ajax() method to add text content --> < script > $(document).ready(function(){ $("button").click(function(){ $.ajax({url: "geeks_exp.txt", async: false, success: function(result) { $("h11").html(result); }}); }); }); </ script > </ body > </ html > |
chevron_right
filter_none
Output:
- Before Clicking the button:
- After Clicking the button: