js 使用ajax设置和获取自定义header信息的方法小结

本文实例讲述了js 使用ajax设置和获取自定义header信息的方法。分享给大家供大家参考,具体如下:

1、js ajax 设置自定义header

1.1 方法一:

$.ajax({
  type: "POST",
  url: "Handler1.ashx",
  contentType: "application/x-www-form-urlencoded",
  beforeSend: function (request) {
    request.setRequestHeader("token1", "Chenxizhang");
  },
  success: function (data) {
    //your code
  }
});

1.2 方法二:

$.ajax({
  headers: {
    "testheader": "test"
  },
  type: "POST",
  url: "Handler1.ashx",
  contentType: "application/x-www-form-urlencoded",
  success: function (data) {
    //your code
  }
});

2、js ajax 获取请求返回的response的header信息

ajax请求完成,会返回xhr(XMLHTTPRequest)对象,这里面会包含返回的头信息,可以通过getResponseHeader(key)和getAllResponseHeaders()获取header信息;

$.ajax({
  type: "POST",
  url: "Handler1.ashx",
  contentType: "application/x-www-form-urlencoded",
  success: function (data) {
    //your code
  },
  complete: function (xhr, data) {
    /*
      获取相关Http Response header
      getResponseHeader(key):获取指定头信息
      getAllResponseHeaders():获取全部可默认可获取的头信息
    */
    var date=xhr.getResponseHeader('Date');// 服务器端时间

    //获取服务端自定义的header信息
    var stoken = xhr.getResponseHeader('servertoken');

    var list = xhr.getAllResponseHeaders();
    console.log(list);
    /*
    date: Fri, 12 Jul 2019 12:41:00 GMT
    content-encoding: gzip
    server: Microsoft-IIS/10.0
    x-aspnet-version: 4.0.30319
    x-powered-by: ASP.NET
    vary: Accept-Encoding
    content-type: text/plain; charset=utf-8
    servertoken: test1
    cache-control: private
    content-length: 129
    */

  }
});

3、js ajax 跨域请求的情况下获取自定义的header信息

JS AJAX 跨域请求的时候是不能设置自定义的header信息的,但是是可以在response中获取到服务端自定义的header信息,前提是服务端设置了Access-Control-Expose-Headers;

下面是 ASP.NET 的服务端示例:

public void ProcessRequest(HttpContext context)
{
  context.Response.AddHeader("Access-Control-Allow-Origin", "*");
  context.Response.AddHeader("Access-Control-Allow-Headers", "*");
  context.Response.AddHeader("Access-Control-Allow-Methods", "*");
  //自定义header信息
  context.Response.AddHeader("servertoken", "test");
  context.Response.AddHeader("Access-Control-Expose-Headers", "servertoken");
  context.Response.ContentType = "text/plain";
  context.Response.Write("Hello World");
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • 原生JS实现Ajax跨域请求flask响应内容

    Ajax方法好,网站感觉跟高大上,但由于Js的局限,跨域Ajax无法实现,这里,讲一下解决办法,前提是需要能够自己可以控制flask端的响应. 主要技术: 修改服务器相应的相应头,使其可以相应任意域名.and设置响应头,使其能够相应POST方法. 实现代码: 这里先放flask代码: from flask import make_response @app.route('/test',methods=['get','post']) def Test(): if request.method=='

  • ajax响应json字符串和json数组的实例(详解)

    最近上班太忙,晚上抽空整理一下ajax请求中,后台返回json字符串和json数组的场景,以及前台的处理示例. 直接看代码. json字符串的后台响应 package com.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.serv

  • node.js中的http.response.removeHeader方法使用说明

    方法说明: 移除等待隐式发送的头. 语法: 复制代码 代码如下: response.removeHeader(name) 接收参数: name            响应头的类型,注意这个名字是不区分大小写. 例子: 复制代码 代码如下: response.removeHeader("Content-Encoding");

  • 在AngularJs中设置请求头信息(headers)的方法及不同方法的比较

    在AngularJs中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用 http服务的在服务端发送请求时,也就是调用 http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/somePath' , someData , { headers : {'Authorization' : authToken} }).success(function(data, status, headers, config) { //... }).

  • node.js中的http.response.getHeader方法使用说明

    方法说明: 读取已经列队但尚未发送给客户端的头信息. 语法: 复制代码 代码如下: response.getHeader(name) 接收参数: name          响应头的类型,注意这个名字是不区分大小写. 例子: 复制代码 代码如下: var contentType = response.getHeader('content-type');

  • Node.js如何响应Ajax的POST请求并且保存为JSON文件详解

    实现目的 使用D3.js开发的前端应用,用户与图交互更改图的内容后,如何在下一次加载的显示上一次最后交互的内容? 本文提供通过后端的Node.js程序提供一种最小化方案,作为参考. 开发环境 后端:Node.js Node.js模块:Express.body-parser.fs 前端:JQuery 后端 1.安装nodejs,装好后用显示版本号确认是否安装好 node --version 2.新建一工程目录(文件夹),安装模块. npm install express npm install b

  • Ajax 接收服务器返回的json响应方法

    1.什么是JSON? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript 规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率.这是百度百科给出的JSON的定义. 我理解的JSON是JS创建对象的一种方法,后来从JS中独立出来,作为一种字符串数据的表示法,被各种语言

  • node.js中的http.response.setHeader方法使用说明

    方法说明: 设置头文件信息. 如果将要发送的信息已包含头文件,执行该方法后头文件的值将被改写. 如果一个头文件需要传递多个值,可以使用数组. 语法: 复制代码 代码如下: response.setHeader(name, value) 接收参数: name          响应头的类型,注意这个名字是不区分大小写. value           响应头的值 例子: 复制代码 代码如下: response.setHeader("Content-Type", "text/ht

  • Js中使用hasOwnProperty方法检索ajax响应对象的例子

    经常使用百度搜索的同学,一定不会忽视输入框的下拉索引,它是如此方便,然而得天独厚的条件使得这项异步技术多少面临些考验,高并发的服务端请求督促着他们的前端攻城师必须尽可能地减少发送ajax的次数.听起来似乎与本文无关,但并不是这样.首先就暂且让我们为百度免费做个广告吧.在百度首页输入"前端"一词,利用chromebug可以很轻松地看到所发送的响应,结果显示如下: 复制代码 代码如下: window.bdsug.sug({q:'前端';,p:false,s:['前端开发','前端工程师',

  • 原生javascript的ajax请求及后台PHP响应操作示例

    本文实例讲述了原生javascript的ajax请求及后台PHP响应操作.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table id="t">

  • selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)

    本文介绍了selenium设置proxy.headers的方法,把phantomjs.Chrome.Firefox几个浏览器的设置方法都总结一下,分享给大家,也给自己留个笔记 phantomjs 设置ip 方法1: service_args = [ '--proxy=%s' % ip_html, # 代理 IP:prot (eg:192.168.0.28:808) '--proxy-type=http', # 代理类型:http/https '--load-images=no', # 关闭图片加

随机推荐