www.baike369.com
百科369 > Ajax教程 > XMLHttpRequest(XHR)对象的HEAD请求

XMLHttpRequest(XHR)对象的HEAD请求


XMLHttpRequest(XHR)对象的HEAD请求

HTTP的HEAD方法用来对资源进行检查。在创建HEAD请求时,只会返回这个报头。对于检查文件的存在,或者在提交获取和使用资源之前,来检查最近是否更新了资源,该方法可能是很有用的。

代码格式如下:

xhr.open("HEAD", url, true);
xhr.onreadystatechange = function(){handleResponse(xhr);};
xhr.send(null);

但是,在handleResponse()函数中,对于检查responseText或者responseXML属性,它并不是非常有用。


实例

本例尝试HEAD请求。getAllResponseHeaders()或者getResponseHeader()函数用于查找特定的返回的报头值。

1. test.html文档的源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>XMLHttpRequest(XHR)对象的HEAD请求-www.baike369.com</title>
<script type="text/javascript"> 
function createXHR()
{
  try { return new XMLHttpRequest(); } catch(e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
  return null;
}
function sendRequest()
{
  var url = "http://www.baike369.com/2016/1.html";
  var xhr = createXHR();
  if (xhr)
  {
    xhr.open("HEAD", url, true);
    xhr.onreadystatechange = function(){handleResponse(xhr);};
    xhr.send(null);
  } 
}
function handleResponse(xhr)
{
  if (xhr.readyState == 4 && xhr.status == 200)
  {
    var responseOutput = document.getElementById("responseOutput");
    var converted = xhr.getAllResponseHeaders().replace(/<([^>]*)>/g, "&lt;$1&gt;")
    converted = converted.replace(/\n/g, "<br/>");
    responseOutput.innerHTML = '<h3>responseText</h3><div class="data"> ' + xhr.responseText + '</div>';
    responseOutput.innerHTML += '<h3>getAllResponseHeaders()</h3><div class="data">' + converted + '</div>';
    responseOutput.innerHTML += '<h3>getResponseHeader("Content-Length")</h3><div class="data">' + xhr.getResponseHeader("Content-Length") + '</div>';
    responseOutput.style.display = "";
  }
}
window.onload = function () 
{ 
  document.requestForm.requestButton.onclick = function () { sendRequest(); };
};
</script>
</head>
<body>
<form action="#" name="requestForm">
  <input type="button" name="requestButton" value="Make Head Request" />
</form>
<br />
<div id="responseOutput" style="display:none;">&nbsp;</div>
</body>
</html>

2. 1.html文档的源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>1.html</title>
<script type="text/javascript">
function createXHR()
{
  try { return new XMLHttpRequest(); } catch(e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
  return null;
}
function sendRequest()
{
  var url = "http://www.baike369.com/2016/1.html";
  var xhr = createXHR();
  if (xhr)
  {
    xhr.open("HEAD", url, true);
    xhr.onreadystatechange = function(){handleResponse(xhr);};
    xhr.send(null);
  } 
}
function handleResponse(xhr)
{
  if (xhr.readyState == 4 && xhr.status == 200)
  {
    var responseOutput = document.getElementById("responseOutput");
    var converted = xhr.getAllResponseHeaders().replace(/<([^>]*)>/g, "&lt;$1&gt;")
    converted = converted.replace(/\n/g, "<br/>");
    responseOutput.innerHTML = '<h3>responseText</h3> ' + xhr.responseText;
    responseOutput.innerHTML += '<h3>getAllResponseHeaders</h3> ' + converted;
    responseOutput.innerHTML += '<h3>getResponseHeader("Content-Length")</h3> ' + xhr.getResponseHeader("Content-Length");
    responseOutput.style.display = "";
  }
}
window.onload = function () 
{ 
  document.requestForm.requestButton.onclick = function () { sendRequest(); };
}; 
</script>
</head>
<body>
<form action="#" name="requestForm">
  <input type="button" name="requestButton" value="Make Head Request" />
</form>
<br />
<div id="responseOutput" style="display:none;">&nbsp;</div>
</body>
</html>

3. 显示效果如下:

XMLHttpRequest(XHR)对象的HEAD请求

Copyright© 2011-2016 www.baike369.com All Rights Reserved