<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Set timeout for ajax using jQuery</
title
>
<
style
>
body {
width: 450px;
height: 300px;
margin: 10px;
float: left;
}
.height {
height: 10px;
}
</
style
>
<
script
src
=
</
script
>
<
script
language
=
"javascript"
>
var ajaxObject = null;
// ajaxcall function will handle ajax call
function ajaxCall() {
var dataquery = 'true';
if (ajaxObject != null) {
ajaxObject.abort();
$("#ajaxOutput")
.html("Ajax aborted for initialization again! ");
ajaxObject = null;
}
// creating ajax call
ajaxObject = $.ajax({
// setting the url
url: "data.php",
data: {
dataquery: ''
},
// Set to 5 seconds for timeout limit
timeout: 5000,
//Check for success message in ajaxOutput div
success: (function(response, responseStatus) {
if (responseStatus == 'success') {
$("#ajaxOutput").html(response);
}
}),
// Check for existence of file
statusCode: {
404: function() {
$("#ajaxOutput")
.html("File does not exists!");
}
},
// If the time exceeds 5 seconds
// then throw error message
error: function(xhr, textStatus, errorThrown) {
if (textStatus == 'timeout') {
$("#ajaxOutput")
.html("Error : Timeout for this call!");
}
}
});
}
</
script
>
</
head
>
<
body
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
b
> Set timeout for ajax using jQuery </
b
>
<
div
class
=
"height"
> </
div
>
<
div
>
<
button
type
=
"button"
onclick
=
"ajaxCall()"
>
Send Data
</
button
>
<
div
class
=
"height"
> </
div
>
<
div
id
=
"ajaxOutput"
> </
div
>
</
div
>
</
body
>
</
html
>