javascript之Ajax获取和设置标头

最新推荐文章于 2023-11-18 10:43:45 发布

bboyjoe

最新推荐文章于 2023-11-18 10:43:45 发布

阅读量1.4k

点赞数

分类专栏： Ajax 文章标签：前端网页设计 javascript ajax html5

本文链接：https://blog.youkuaiyun.com/bboyjoe/article/details/47026313

版权

Ajax 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用XMLHttpRequest对象管理HTTP请求标头，包括设置、获取及覆盖HTTP方法等技巧，以实现更灵活的前端网络请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XMLHttpRequest对象中与标头有关的方法：

setRequestHeader(<header>,<value>)——用指定值设置标头；

getResponseHeader(<header>)——获取指定标头的值;

getAllResponseHeaders()——以单个字符串形式获取所有标头；

覆盖请求的HTTP方法，如下代码：可规避防火墙只允许GET和POST请求通过的限制；

httpRequest.setRequestHeader("X-HTTP-Method-Override","DELETE");

禁用内容缓存：

httpRequest.setRequestHeader("Cache-Control","no-cache");

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <style type="text/css">
        #allheaders,#ctheader{
            border: medium solid black;
            padding: 2px;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div>
        <button>Apples</button>
        <button>Cherries</button>
        <button>Bananas</button>
    </div>
    <div id="ctheader"></div>
    <div id="allheaders"></div>
    <div id="target">
        加载内容
    </div>

    </table>
    <script>
        var buttons=document.getElementsByTagName("button");
        for(var i=0;i<buttons.length;i++){
            buttons[i].οnclick=handleButtonPress;
        }
        var httpRequest;
        function handleButtonPress(e){
            httpRequest=new XMLHttpRequest();
            httpRequest.onreadystatechange=handleResponse;
            httpRequest.open("GET", e.target.innerHTML+".html");
            //规避防火墙的限制，使用X-HTTP-Method-Override标头来指定想要的HTTP方法，但形式上市再发送一个POST请求
            //httpRequest.setRequestHeader("X-HTTP-Method-Override","DELETE");
            //禁用内容缓存
            //httpRequest.setRequestHeader("Cache-Control","no-cache");
            httpRequest.send();
        }
        function handleResponse(){
            if(httpRequest.readyState==2){
               document.getElementById("allheaders").innerHTML=httpRequest.getAllResponseHeaders();
                document.getElementById("ctheader").innerHTML=httpRequest.getResponseHeader("Content-Type");
            }else if(httpRequest.readyState==4 && httpRequest.status==200){
                document.getElementById("target").innerHTML= httpRequest.responseText;
            }
        }

    </script><pre name="code" class="html"></body>
</html>