XMLHttpRequest timeout 屬性

admin發表於2020-06-02
XMLHTTP

timeout 屬性返回或者設定 AJAX 發出的 HTTP 請求等待時間，屬性值為表示毫秒的數字。

如果 HTTP 請求在 timeout 規定時間後仍沒有獲取響應結果，那麼自動結束。

屬性預設值為 0，表示並未設定響應等待超時限制。

關於 XMLHttpRequest 更多內容參閱 XMLHttpRequest  物件 一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let num = xhr.timeout;
xhr.timeout = num;

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"> 
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function loadXMLDoc() {
  let xmlHttp = new XMLHttpRequest();
  xmlHttp.timeout = 3000;
  xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      let oShow = document.getElementById("show");
      oShow.innerHTML = xmlHttp.responseText;
    }
  }
  
  // timeout事件觸發
  xmlHttp.ontimeout = function () {
    console.log("timeout事件觸發");
  }
  
  // abort事件不會觸發
  xmlHttp.onabort = function () {
    console.log("abort事件觸發");
  }

  xmlHttp.open("GET", "async.php", true);
  xmlHttp.send();
}

window.onload = ()=> {
  let oBt = document.getElementById("bt");
  oBt.onclick = ()=> {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
  <div id="show"></div>
  <input id="bt" type="button" value="檢視效果"/>
</body>
</html>

後臺伺服器 PHP 程式碼如下：

[PHP] 純文字檢視 複製程式碼
<?php 
  time_sleep_until(time() + 10);
  echo $_GET["webName"]; 
?>

谷歌控制檯程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202006/02/010929yimmgrpmkzc1p610.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.xmlHttp.timeout = 3000 設定請求等待時間為 3 秒。

（2）.time_sleep_until(time() + 10) 伺服器端設定延遲 10 秒執行程式碼。

（3）.於是 AJAX 發起的 HTTP 請求等待響應超時。

（4）.timeout 事件觸發，最終列印出對應的結果。

相關文章