XMLHttpRequest abort 事件

admin發表於2020-06-08
XMLHTTP事件

abort 事件會在 AJAX 傳送的 HTTP 請求中斷時觸發，比如呼叫 abort () 方法。

註冊事件處理函式方式參閱 如何註冊事件處理函式 一章節。

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

瀏覽器支援：

（1）.IE 瀏覽器支援此事件。

（2）.edge 瀏覽器支援此事件。

（3）.火狐瀏覽器支援此事件。

（4）.Opera 瀏覽器支援此事件。

（5）.谷歌瀏覽器支援此事件。

（6）.safari 瀏覽器支援此事件。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"> 
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
let loadXMLDoc = ()=> {
  let xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      document.getElementById("show").innerHTML = xmlHttp.responseText;
    }
  }

  xmlHttp.open("POST", "demo/ajax/async.php?webName=antzone", true);
  xmlHttp.send();

  setTimeout(function () {
    xmlHttp.abort();
  }, 5000);

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

伺服器端 php 程式碼如下：

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

延遲 10 秒後，將 AJAX 請求的響應資料發回客戶端。
通過定時器函式，5 秒後呼叫 abort() 方法中斷 AJAX 傳送的 HTTP 請求，於是事件觸發。

相關文章