Updated April 19, 2023
Introduction to jQuery ajax beforeSend
The jQuery ajax beforeSend() function is used to modify the jqXHR object before a request is sent. The jQuery beforeSend() function is a built in function in jQuery. The beforeSend function is a pre-request callback function that runs before the request is sent to the server. The beforeSend() function use to set the custom headers and all, it is an Ajax event that triggers before an Ajax request is started. The false value returning in the beforeSend() function will cancel the Ajax request. Whatever the type of ajax request is there the beforeSend() function is always called.
The syntax of the jQuery ajax beforeSend() function –
$.ajax({ beforeSend: function ( jqXHR, settings) { jqXHR.setRequestHeader(key, value) ); }
});Parameters –
beforeSend – This is an optional function. It is used to add the custom header or overwrites to specify what type of response it can accept from the server. It accepts two parameters which are jqXHR and settings, it modifies the jqXHR object and adds the custom headers with the help of the setRequestHeader function.
//Return value – The return value of this function is XMLHttpRequest object.
Working of ajax beforeSend() function
The jQuery ajax beforeSend() function accepts two parameters. Suppose we have to do the asynchronous HTTP GET request to load the data from the server and before sending the request to the server we want to add or modify the custom headers. So we can use the ajax beforeSend() function as “beforeSend: function( jqXHR ) { jqXHR.overrideMimeType( “application/json” );”, which modify the response content-type header.
Examples for the jQuery ajax beforeSend() function
Here are the following example mention below
Example #1
Example of jQuery ajax beforeSend() function to set the response content-type for send the request and load the data by using ajax request from the specified location –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<title> This is an example for jQuery ajax beforeSend() function </title>
</head>
<body>
<h3> This an example of jQuery ajax beforeSend() function : </h3>
<button id = "Btn" > Send the ajax request with beforeSend() function </button>
<br>
<p id = "p1" style = "color : red"> </p>
<script type = "text/javascript">
$(document).ready( function () {
$('#Btn').click( function(){
// url from where we want to get the data
var ajxReq = $.ajax( { url : 'http://time.jsontest.com',
contentType : 'application/json',
dataType : 'json',
beforeSend: function( jqXHR ) {
jqXHR.overrideMimeType( "application/json" );
$( '#p1' ).append( '<h3> The beforeSend() function called. </h3>');
}
});
ajxReq.success( function ( data, status, jqXhr ) {
$( '#p1' ).append( '<h3> The json data details are : </h3>');
$( '#p1' ).append( '<p> Date : ' + data.date + '</p>');
$( '#p1' ).append( '<p> Milliseconds_since_epoch : ' + data.milliseconds_since_epoch + '</p>');
$( '#p1' ).append ('<p> Time: ' + data.time + '</p>');
$( '#p1' ).append( '<p> The request status is : ' + status + '</p>');
});
ajxReq.error( function ( jqXhr, textStatus, errorMessage ) {
$( "p" ).append( "The status is : " + textStatus);
});
});
});
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, when we click on the button, the ajax() function will call which sends the HTTP request to the server to get the data. The first parameter mentioned the URL from where the data to get and also the beforeSend() callback function set the content-type of the response will accept as “beforeSend:function(jqXHR){jqXHR.overrideMimeType(“application/json”);}”. Next, the received data is of JSON type which gets load and display, as we can see in the above output.
Example #2
Example of jQuery ajax beforeSend() function to load the image before send the request to the server and then load the data from the specified location –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<title> This is an example for jQuery ajax beforeSend() function </title>
</head>
<body>
<h3> This an example of jQuery ajax beforeSend() function : </h3>
<br>
<input id = 'search' type = 'text' >
<input id = 'btn' type = 'button' value = 'Search data'><br/>
<!-- Image load here -->
<div id = 'loader' style = 'display: none;'>
<img src = 'educba.jpg' width = '150px' height = '150px'>
</div>
<h3 class = 'response'> </h3>
<h3 class = 'complete'> </h3>
<script type = 'text/javascript'>
$(document).ready(function(){
$( "#btn" ).click(function(){
var search = $('#search').val();
$.ajax({
url : 'http://time.jsontest.com',
type : 'get',
data : {search : search},
beforeSend : function(){
// Show image container
$( "#loader" ).show();
},
success : function(response){
$('.response').empty();
$('.response').append( "Success." );
},
complete : function(data){
// display messgae on request completed
$( ".complete" ).append( "Completed." );
}
});
});
});
</script>
</body>
</html>An output of the above code is –
Once we enter the search data and click the button, the output is –
In the above code, when we click on the button, the ajax() function will call which sends the HTTP request to the server to get the data. The first parameter mentioned the URL from where the data to get and also the beforeSend() callback function used to load the image before the request send as “beforeSend : function() { $( “#loader” ).show(); }”. Next, on the success of the request, the message will display as “Success” and on the completion of the request, the message will display “Completed”, as we can see in the above output.
Conclusion
The jQuery ajax beforeSend() function is a pre-request callback function, which is used to modify the jqXHR object before a request is sent.
Recommended Articles
This is a guide to jQuery ajax beforeSend. Here we discuss the Working and Examples for the jQuery ajax beforeSend() function. You may also have a look at the following articles to learn more –
