ajax设置请求头setRequestHeader方法,如请求数据类型等

因为平时常用的设置,所以突然被问起来会忘,一般我们ajax是直接利用jQuery的ajax方法,里面的接口直接调用,常用的主要有:

  • url

类型:String

默认值: 当前页地址。发送请求的地址。

  • type

类型:String

默认值: "GET"。请求方式"POST"或"GET", 默认为"GET"。注意:其它HTTP请求方法,如PUT和DELETE也可以使用,但仅部分浏览器支持。

  • data

类型:String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。

必须为 Key/Value 格式。

如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

既然提到processData,因为平常用它的默认值true,所以也容易被遗忘。

  • processData

类型:Boolean

默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

  • dataType

类型:String

是服务器返回的数据类型,有些人以为这个就是可以设置请求头,然而它其实是设置返回数据的类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。

"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)

"json": 返回 JSON 数据(常用) 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

"text": 返回纯文本字符串

  • success

类型:Function

请求成功后的回调函数。

参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

  • error

类型:Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。

error: function(xhr,error,obj) {

     console.log(error);

}

如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

  • complete(XHR, TS)

类型:Function

请求完成后回调函数 (请求成功或失败之后均调用)。

参数: XMLHttpRequest 对象和一个描述请求类型的字符串。

平时参数一般不写,函数内直接写请求完成后需要处理的事。

  • beforeSend(XHR)

类型:Function

发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。


言归正传,设置请求头:

XMLHttpRequest对象提供了一个设置请求头的方法:setRequestHeader,可以在beforeSend回调里面设置请求头:

$.ajax({

    type: "GET",

    url: "fa.php",

    success: function(data) {

        console.log(data);

    },

    beforeSend: function(xhr) {

        xhr.setRequestHeader("User-Agent", "test");

    }

});

W3C标准文档明确规定了以下请求头信息是浏览器控制,开发者不允许设置这些请求头,设置了会提示错误。

Accept-Charset

Accept-Encoding

Access-Control-Request-Headers

Access-Control-Request-Method

Connection

Content-Length

Cookie

Cookie2

Date

DNT

Expect

Host

Keep-Alive

Origin

Referer

TE

Trailer

Transfer-Encoding

Upgrade

User-Agent

Via


一般我们设置的是:content-type,传输数据类型,即服务器需要我们传送的数据类型

xhr.setRequestHeader ("content-type", "application/x-www-form-urlencoded" )

当然还有其他编码方式,如:CONTENT-TYPE:multipart/form-data

PS: setRequestHeader方法只是XMLHTTP为添加或修改HTTP头提供的一个接口方法而已, 至于里面的值则是HTTP协议的含义,当然也可以发自己的东西进去,即使IIS不能识别你的信息也不会报错,如:

xhr.setRequestHeader("sex", "male")

虽然IIS不会报错,但这个信息也可以有用,可以在程序里读取HTTP头信息分析是否有 MyName: Supermanking 信息,可根据你的需求来做处理

如将自定义的数据放入请求头中,避免csrf攻击

CSRF Token

CSRF的另一个特征是,攻击者无法直接窃取到用户的信息(Cookie,Header,网站内容等),仅仅是冒用Cookie中的信息。

而CSRF攻击之所以能够成功,是因为服务器误把攻击者发送的请求当成了用户自己的请求。那么我们可以要求所有的用户请求都携带一个CSRF攻击者无法获取到的Token。服务器通过校验请求是否携带正确的Token,来把正常的请求和攻击的请求区分开,也可以防范CSRF的攻击。

beforeSend: function (xhr) {

     var token1 = $(window.document).find("meta[name=_csrf]").attr("content");

     var header1 = $(window.document).find("meta[name=_csrf_header]").attr("content");

     xhr.setRequestHeader(header1, token1);

}

参考来自:

  1. https://www.cnblogs.com/cdwp8/p/5157377.html
  2. https://www.cnblogs.com/Shannong/p/5300609.html
  3. https://www.cnblogs.com/meituantech/p/9777222.html
  4. http://www.w3school.com.cn/jquery/ajax_ajax.asp

猜你喜欢

转载自blog.csdn.net/yovino/article/details/87805300