XMLHttpRequest getResponseHeader()

admin發表於2020-05-23
XMLHTTPHeader

getResponseHeader() 方法可以返回 HTTP 頭資訊指定欄位的值。

方法主要特點總結如下：

（1）.如果指定的欄位不存在，方法返回 null。

（2）.如果沒有收到伺服器的響應資訊，方法返回 null。

（3）.方法的引數不區分大小寫。

（4）.如果有同名欄位，那麼各欄位值會通過逗號與空格分隔。

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

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"> 
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width: 150px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 5px;
  border: 1px dotted green;
  font-size: 12px;
}  
</style>  
<script>
function loadXMLDoc() {
  let xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      let oHeader = document.getElementById("header");
      let oShow = document.getElementById("show");
      oHeader.innerHTML = xmlHttp.getResponseHeader("Content-type");
      oShow.innerHTML = xmlHttp.responseText;
    }
  }
  xmlHttp.open("POST", "demo/ajax/echo.php", true);
  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlHttp.send("webName=螞蟻部落&age=5");
}
window.onload = ()=> {
  let oBt = document.getElementById("bt");
  oBt.onclick = ()=> {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
  <div id="header"></div>
  <div id="show"></div>
  <input id="bt" type="button" value="檢視效果"/>
</body>
</html>

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

[PHP] 純文字檢視 複製程式碼
<?php echo $_POST["webName"]."成立".$_POST["age"]."年了"?>

點選按鈕程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202005/23/002234p7fzyfq44dnt6699.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼簡單演示了getResponseHeader() 方法的功能。

相關文章