XMLHttpRequest abort()

admin發表於2020-05-23
XMLHTTP

XMLHttpRequest abort() 方法可以中止已經傳送的 HTTP 請求。

呼叫此方法後，AJAX 請求會有如下狀態變化：

（1）.readyState 屬性值變為 0。

（2）.status 屬性值變為 0。

（3）.abort 事件觸發。

特別說明：中斷 AJAX  請求屬正常行為，不屬於發生錯誤。

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

語法結構：

[JavaScript] 純文字檢視 複製程式碼
xhr.abort()

程式碼例項如下：

[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("GET", "demo/ajax/async.php?webName=antzone", true);
  xmlHttp.send();

  setTimeout(function () {
    xmlHttp.abort();
    console.log(xmlHttp.readyState);
    console.log(xmlHttp.status);
  }, 5000);

  xmlHttp.onabort = ()=>{
    console.log("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"]; 
?>

上述程式碼演示了 abort() 方法的功能，以及 AJAX 請求狀態的一些變化。

程式碼分析如下：

（1）.伺服器端會延遲 10 秒向客戶端傳送響應資料。

（2）.通過定時器函式，5 秒後呼叫 abort() 方法中斷 HTTP 請求。

（3）.中斷後，AJAX 請求狀態發生了一些變化，可以在谷歌開發者工具檢視列印資料。

相關文章