In jQuery, $.ajax() gives you full control over the Ajax request. You should use it if the other methods don't fullfil your needs.
Followings are the basic rule when you use $.ajax()
$.ajax({ name:value, name:value, ... });
You can refer names/values below:
| Value/Description | |
|---|---|
| async | A Boolean value indicating whether the request should be handled asynchronous or not. Default is true |
| beforeSend(xhr) | A function to run before the request is sent |
| cache | A Boolean value indicating whether the browser should cache the requested pages. Default is true |
| complete(xhr,status) | A function to run when the request is finished (after success and error functions) |
| contentType | The content type used when sending data to the server. Default is: "application/x-www-form-urlencoded" |
| context | Specifies the "this" value for all AJAX related callback functions |
| data | Specifies data to be sent to the server |
| dataFilter(data,type) | A function used to handle the raw response data of the XMLHttpRequest |
| dataType | The data type expected of the server response. |
| error(xhr,status,error) | A function to run if the request fails. |
| global | A Boolean value specifying whether or not to trigger global AJAX event handles for the request. Default is true |
| ifModified | A Boolean value specifying whether a request is only successful if the response has changed since the last request. Default is: false. |
| jsonp | A string overriding the callback function in a jsonp request |
| jsonpCallback | Specifies a name for the callback function in a jsonp request |
| password | Specifies a password to be used in an HTTP access authentication request. |
| processData | A Boolean value specifying whether or not data sent with the request should be transformed into a query string. Default is true |
| scriptCharset | Specifies the charset for the request |
| success(result,status,xhr) | A function to be run when the request succeeds |
| timeout | The local timeout (in milliseconds) for the request |
| traditional | A Boolean value specifying whether or not to use the traditional style of param serialization |
| type | Specifies the type of request. (GET or POST) |
| url | Specifies the URL to send the request to. Default is the current page |
| username | Specifies a username to be used in an HTTP access authentication request |
| xhr | A function used for creating the XMLHttpRequest object |
Below example will help you to understand how $.ajax() works:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "demo_test.txt", success: function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
If you want synchronous method, you can do it by simply adding async:false in the .ajax({}) - it will be like below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "demo_test.txt", async:false, success: function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>