这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > server > 正文
通过Ajax方式获取Http Response Header
2013年12月12日 server ⁄ 共 3897字 等你评论

你有时可能需要从服务器获取一些内容,例如,可能想“ping”一下服务器,验证服务器是否正常运行。此时,你也许只想读取服务器发出的响应首部,而忽略内容。通过读取响应首部,可以得出Content-Type(内容类型)、Content-Length(内容长度),甚至 Last-Modified(最后一次修改)的日期。

如果只关注响应首部,完成这样一个请求的标准做法是使用HEAD请求,而不是前面讨论的GET或POST请求。当服务器HEAD请求做出响应时,它只发送响应首部而忽略内容,即使可以向浏览器返回所请求的内容,也不会零点的把内容返回。由于忽略了内容,对HEAD请求的响应比对GET或POST的响应就小得多。

方法1:

  1. $.ajax({  
  2.     type: 'HEAD', // 获取头信息,type=HEAD即可  
  3.     url : window.location.href,  
  4.     complete: function( xhr,data ){  
  5.         // 获取相关Http Response header  
  6.         var wpoInfo = {  
  7.             // 服务器端时间  
  8.             "date" : xhr.getResponseHeader('Date'),  
  9.             // 如果开启了gzip,会返回这个东西  
  10.             "contentEncoding" : xhr.getResponseHeader('Content-Encoding'),  
  11.             // keep-alive ? close?  
  12.             "connection" : xhr.getResponseHeader('Connection'),  
  13.             // 响应长度  
  14.             "contentLength" : xhr.getResponseHeader('Content-Length'),  
  15.             // 服务器类型,apache?lighttpd?  
  16.             "server" : xhr.getResponseHeader('Server'),  
  17.             "vary" : xhr.getResponseHeader('Vary'),  
  18.             "transferEncoding" : xhr.getResponseHeader('Transfer-Encoding'),  
  19.             // text/html ? text/xml?  
  20.             "contentType" : xhr.getResponseHeader('Content-Type'),  
  21.             "cacheControl" : xhr.getResponseHeader('Cache-Control'),  
  22.             // 生命周期?  
  23.             "exprires" : xhr.getResponseHeader('Exprires'),  
  24.             "lastModified" : xhr.getResponseHeader('Last-Modified')  
  25.         };  
  26.         // 在这里,做想做的事。。。  
  27.     }  
  28. });  

方法二:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <title>Reading Response Headers</title>  
  6.   
  7. <script type="text/javascript">  
  8. var xmlHttp;  
  9. var requestType = "";  
  10.   
  11. function createXMLHttpRequest() {  
  12.     if (window.ActiveXObject) {  
  13.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
  14.     }   
  15.     else if (window.XMLHttpRequest) {  
  16.         xmlHttp = new XMLHttpRequest();  
  17.     }  
  18. }  
  19.       
  20. function doHeadRequest(request, url) {  
  21.     //设置全局请求类型 读取所有头信息、读取最后一次修改时间、资源可用,资源不可用  
  22.     requestType = request;  
  23.     createXMLHttpRequest();  
  24.     xmlHttp.onreadystatechange = handleStateChange;  
  25.     //这里发送的是HEAD请求  
  26.     xmlHttp.open("HEAD", url, true);  
  27.     xmlHttp.send(null);  
  28. }  
  29.       
  30. function handleStateChange() {  
  31.     if(xmlHttp.readyState == 4) {  
  32.         if(requestType == "allResponseHeaders") {  
  33.             getAllResponseHeaders();  
  34.         }  
  35.         else if(requestType == "lastModified") {  
  36.             getLastModified();  
  37.         }  
  38.         else if(requestType == "isResourceAvailable") {  
  39.             getIsResourceAvailable();  
  40.         }  
  41.     }  
  42. }  
  43.   
  44. //打印所有响应头信息  
  45. function getAllResponseHeaders() {  
  46.     //xmlHttp.getAllResponseHeaders()得到所有头部信息  
  47.     alert(xmlHttp.getAllResponseHeaders());  
  48. }  
  49. //打印最后一次修改时间  
  50. function getLastModified() {  
  51.     //xmlHttp.getResponseHeader()最后一次修改时间头部  
  52.     alert("Last Modified: " + xmlHttp.getResponseHeader("Last-Modified"));  
  53. }  
  54.   
  55. function getIsResourceAvailable() {  
  56.     //200表示资源可用  
  57.     if(xmlHttp.status == 200) {  
  58.         alert("Successful response");  
  59.     }//404表示资源未找到  
  60.     else if(xmlHttp.status == 404) {  
  61.         alert("Resource is unavailable");  
  62.     }  
  63.     else {//或是其他状态  
  64.         alert("Unexpected response status: " + xmlHttp.status);  
  65.     }  
  66. }  
  67.   
  68. </script>  
  69. </head>  
  70.   
  71. <body>  
  72.   <h1>Reading Response Headers</h1>  
  73.     
  74.   <a href="javascript:doHeadRequest('allResponseHeaders', 'readingResponseHeaders.xml');">Read All Response Headers</a>  
  75.     
  76.   <br/>  
  77.   <a href="javascript:doHeadRequest('lastModified', 'readingResponseHeaders.xml');">Get Last Modified Date</a>  
  78.     
  79.   <br/>  
  80.   <a href="javascript:doHeadRequest('isResourceAvailable', 'readingResponseHeaders.xml');">Read Available Resource</a>  
  81.     
  82.   <br/>  
  83.   <a href="javascript:doHeadRequest('isResourceAvailable', 'not-available.xml');">Read Unavailable Resource</a>  
  84.   
  85. </body>  
  86. </html>  

 

友荐云推荐
×