[NOTE] XMLHttpRequest
前言
是对浏览器接口 XMLHttpRequest的学习笔记
主要是因为最近学习的些安全内容(CSRF等)都涉及到了这个
因此来简单学习下
很多Web应用认为
通过仅使用application/json作为content-type,就可以防御CSRF
原因是这种请求仅能通过XHR(XMLHttpRequest)请求生成
这样在发出正常请求之前,一个pre-flight request会先发送给服务端
若返回的pre-flight response不允许跨源(cross origin)请求
则浏览器不会发出随后的正常请求
目标不是为了学会编程
只是想简单了解
它是干什么的,有什么作用,有哪些于安全有关的特性等
学习资料:
- XMLHttpRequest Level 2使用指南-阮一峰
XMLHttpRequest对象-W3school- JS XMLHttpRequest入门教程-C语言中文网
XMLHttpRequest—必知必会-简书-xiaosan666
实际上摆那么多学习资料,顶屁用
正文
是一个浏览器接口,使得JavaScript可以进行HTTP请求
用法大概类似于这样:
// 首先,新建一个XMLHttpRequest的实例
var xhr = new XMLHttpRequest();
// 然后,向远程主机发出一个GET请求
xhr.open('GET', 'example.php');
xhr.send();
// 或者是POST请求
xhr.open('POST', 'example.php');
xhr.send("username=Archeri&password=123456");
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// 接着,就等待远程主机做出回应
// 这时需要监控XMLHttpRequest对象的状态变化,指定回调函数
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 && xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert( xhr.statusText );
}
};
// XMLHttpRequest对象通过responseText、responseBody、responseStream或responseXML属性获取响应信息
xhr.responseBody; // 将响应信息正文以Unsigned Byte数组形式返回
xhr.responseXML; // 将响应信息格式化为XML文档格式返回
xhr.responseText; // 将响应信息作为字符串返回
早些时候不同浏览器有各自的实现
在HTML 5的概念形成之后,W3C正在着手该接口的标准化
新旧版本有较大的不同,包括:
- 是否收到同源策略(Same Origin Policy)限制
- 跨域需要浏览器和服务端双重支持
- 是否支持使用FormData对象管理表单数据
- 是否可以获取二进制数据
- 是否可以上传文件
- 是否支持设置HTTP请求时限等
关于FormData对象的使用,一个例子如下:
// 首先,新建一个FormData对象
var formData = new FormData();
// 然后,为它添加表单项
formData.append('username', '张三');
formData.append('id', 123456);
// 最后,直接传送这个FormData对象
// 这与提交网页表单的效果,完全一样
xhr.send(formData);
// FormData对象也可以用来获取网页表单的值
var form = document.getElementById('myform');
var formData = new FormData(form);
formData.append('secret', '123456'); // 添加一个表单项
xhr.open('POST', form.action);
xhr.send(formData);
总之大概就是这么一个东西