[NOTE] XMLHttpRequest

[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);

总之大概就是这么一个东西