极客教程如何通过使用jQuery为ajax设置超时
在网络编程中，Ajax的使用是为了让结果数据显示在网页的一个部分，而不需要重新加载页面。用户需要执行Ajax请求，并希望在一个时间范围内得到结果。在这种情况下，代码中使用了jquery timeout功能。在基于Ajax的Web应用程序中，会话超时一直是一个非常常见的功能。
在响应式界面中，程序员需要延迟ajax请求，以便在响应前完成一些任务。这可以通过使用jQuery setTimeout()函数来实现。这个函数在给定的一些时间后执行给定的Ajax代码。
语法 :
$.ajax(page_url);
$.ajax(page_url,[options]);
参数:
- page_url。该参数用于提交数据或检索数据。
- options。该参数用于保存ajax请求所需的其他配置设置。
下面的例子说明了这个方法。
示例 1:
- 代码 snippet:
$.ajax({
url: "test.php",
error: function(){
//Error code
},
success: function(){
//Success code
}
timeout: 5000 // sets timeout to 5 seconds
});
- 如果请求成功，成功函数将被执行。有时，如果发生了错误，与其等待更长的时间，不如迅速做出反应。这在错误函数中处理。下面的程序，解释了ajax部分代码中超时选项的实现。超时是一个数字，它规定了处理请求的时间，单位为毫秒。
代码:
- HTML FIle:
<!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=
"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</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>
- PHP文件：在上述例子中使用了以下PHP文件。
<?php
if($_GET["dataquery"]=='true')
{
sleep(7);
}
echo "Welcome to GeeksForGeeks";
?>
输出 :
- 在点击按钮之前:
- 点击按钮后:
例子2： setTimeout()是一个jQuery函数，在延迟一个特定的时间限制后执行一个代码片段。例如，延迟一个弹出窗口的特定时间限制，为一个用户访问一些网站。这个方法接受一个指向一个函数的指针作为它的第一个参数。在这个例子中，使用setTimeout()方法将Ajax代码延迟4秒。
代码片段：
function callerFunction(){
alert("jQuery setTimeOut execution is fine!");
}
setTimeout(callerFunction, 4000);
var callerFunction = function(){
alert("Execution point!");
};
setTimeout(callerFunction, 4000);
Program:
- HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set timeout for ajax using jQuery</title>
<style>
<style> body {
width: 450px;
height: 300px;
margin: 10px;
float: left;
}
.height {
height: 10px;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.4.1.js">
</script>
<script>
(function() {
var timedelay = 4000;
('#sendData').on('click', function() {
.ajax({
type: 'POST',
url: 'test.php',
data: {
"data": "checkData"
},
success: function(response) {
setTimeout(function() {
('#ajaxOutput')
.append(response);
}, timedelay);
}
});
});
});
</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" id="sendData">
Set timeout for getting data
</button>
<div class="height"></div>
<div id="ajaxOutput"></div>
</div>
</body>
</html>
- PHP文件：对于上述示例代码，使用以下PHP文件。
<?php
if(isset(_POST['data']) &&_POST['data'] == 'checkData'){
data['value1'] = 'Successfully received first data';
data['value2'] = 'Successfully received second data';
response = json_encode(data);
echo $response;
}
?>
输出:
- 在点击按钮之前:
- 点击按钮后:
取消超时：有时程序员需要通过使用jQuery clearTimeout()方法来取消代码中设置的定时器。
- 代码 snippet:
var timerValue = setTimeout(timerFunction, 5000);
clearTimeout(timerValue);
jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档之间的交互，它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例，从基础开始学习jQuery。