javascript之Ajax获取和设置标头

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].onclick=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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-21 08:46:58

javascript之Ajax获取和设置标头的相关文章

JavaScript设置获取和设置属性的方法

这篇文章主要介绍了JavaScript设置获取和设置属性的方法,学会使用getAttribute.setAttribute的用法,需要的朋友可以参考下 getAttribute 该方法用来获取元素的属性,调用方式如下所示: 复制代码代码如下: object.getAttribute(attribute) 以此前介绍的一些方法不同,getAttribute方法不属于document对象,所以不能通过document对象调用.它只能通过元素节点对象来调用. 该方法只接受一个参数,你指定要查询的属性的

如何用javascript获取和设置css3属性

==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); console.log(test.style); 然而这种方法并没有什么效果,因为style代表的是行间样式. 我突然想起以前学JS运动,有一个叫做getStyle的方法 function getStyle(obj, name){ if(obj.currentStyle){ return obj.cu

JavaScript(19)jQuery HTML 获取和设置内容和属性

jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易. 提示:DOM = Document Object Model(文档对象模型) DOM 定义访问 HTML 和 XML 文档的标准:"W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容.结构以及样式."

javascript学习之路之元素获取和设置属性

收拾心情,学习学习js!总结下自己的学习所得! 现有的有三种方法可以获取元素的节点,分别是通过元素ID,通过标签名和类名来获取的 1.GetElmentById:将返回一个与那个有给定ID属性的值的元素节点对应的对象,方法只有一个参数,元素的id属性的值必须放在单引号或双引号里 documrnt.GetElmentById(id) 2.GetElmentsByTagName:方法返回一个对象数组,每个对象分别对应这文档里有给定标签的一个元素,它的参数就是标签的名字 dovument.GetElm

JavaScript使用Ajax实现异步通信

一.浏览器与服务器的同步和异步通信 1.同步:是阻塞的,浏览器在向服务器发送请求之后一直等待服务器的响应,而没有做其他事情. 2.异步:非阻塞的,浏览器向服务器发送请求之后,继续执行其他代码,得到服务器响应后,浏览器中断当前的任务,处理服务器响应. 二.没有Ajax之前浏览器是通过iframe来实现异步刷新 1.iframe标签:iframe标签通过src连接到一个页面,其实就是将需要实现异步刷新的内容使用iframe标签包裹 A.对iframe实现整个页面刷新,其实是通过刷新一个页面的子页面来

通过Jquery中Ajax获取json文件数据

1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : 名称/值对. 例如: "Student":"Tom" Json值可以是: 数字(整数或浮点数) 字符串(在双引号中) 逻辑值(true或者false) 数组(在方括号中) 对象(在花括号中) null  例如(对象):{"name":"to

Jquery 使用Ajax获取后台返回的Json数据后,页面处理

<!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> <title></title> <sc

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

原文:3 Ways to Preload Images with CSS, JavaScript, or Ajax 译文:利用CSS.JavaScript及Ajax实现图片预加载的三大方法 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性.

vue 中使用 AJAX获取数据的方法

在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se