Ajax(Asynchronous JavaScript and XML)
这种技术就是无须刷新页面即可从服务器中取得数据，但不一定是XML数据。在原生方法上，Ajax技术的核心是XMLHttpRequest对象（简称XHR）。
XHR用法
-
open(method, url, isAsync)
开启一个method类型的请求，url是相对于当前页面（也可以是绝对路径），open方法并不会真正发送请求，而只是启动一个请求已备发送。
-
send(data)
接收作为请求主体发送的数据，如果不需要必须传入null，因为这个参数对有些浏览器是必要的。调用send后请求就会被分派到服务器。
-
XHR的属性
在发送请求收到响应后，响应的数据会自动填充XHR对象的属性：
-
responseText：作为响应主体被返回的文本
-
responseXML：如果响应的内容类型是”text/xml“或”application/xml“，这个属性中将保存包含着相应数据的XML DOM文档。
-
status：响应的HTTP状态
-
statusText：HTTP状态的说明
-
readyState：表示请求/响应过程中的当前活动阶段，只要这个值发生变化都会触发一次readystatechange事件，因此可以利用这个事件监听异步请求后的响应结果是否可用。（=0表示尚未调用open；=1表示已调用open但没调用send；=2表示已调用send但未收到响应；=3表示已接收到部分数据；=4收到全部响应并且数据可用）
let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ //在open前指定并用DOM0级保证浏览器兼容 if(xhr.readyState == 4){ if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){ console.log(xhr.responseText); console.log(xhr.response); }else{ alert('request was unsuccessful:' + xhr.status); } } } xhr.open("GET", "http://127.0.0.1:3011", true); xhr.send(null); -
abort：取消异步请求，会停止触发事件，不再允许访问任何与响应有关的对象属性（若访问可能会出错，最好将访问的语句放在try...catch语句中），并在终止请求后对XHR对象进行解引用操作。
-
HTTP头部信息
- setRequestHeader(name, value) 自定义请求头部信息，在open之后send之前调用。
- getResponseHeader(name) 取得相应的响应头部信息
- getAllResponseHeaders() 取得一个包含所有头部信息的长字符串
GET请求
常用于向服务器查询某些信息，将查询的字符串追加到URL末尾以便将查询条件发给服务器（？name1=value1&name2=value2...）。
特别注意查询信息中的name和value值都必须使用encodeURIComponent()进行编码才能放到URL的末尾。
发送信息有限，因为URL有长度限制。
POST请求
常用于向服务器发送应该被保存的数据，POST请求主体可以包含非常多的数据，而且格式不限。
通过设置Content-Type头部信息表明发送的数据类型，规定数据的编码方式。
-
application/x-www-form-urlencoded;charset=utf-8
表单形式的内容类型，body中的数据会以key=values的形式进行序列化，而这个编码的过程中，一些特殊符号会通过URL转码转成如4%D3%3F。。。等形式
-
application/json;charset=utf-8
请求体里面显示的内容是一个标准的json串，而不会像经过URL转码后的数据那样
发送同样的数据，GET请求比POST快（GET有缓存，POST在真正接受数据之前会先将请求头发送给服务器进行确认，然后才真正发送数据）。
XMLHttpRequest2级
对XHR的进一步发展
FormData
序列化表单对象，使用FormData的方便之处体现在不比明确在XHR对象上设置请求头，XHR对象能够识别传入的数据类型是FormData的实例并配置适当的头部信息。
let data1 = new FormData(document.form[0]); //接收表单元素，预先填入键值对
let data = new FormData();
data.append('name', 'simple') //用append方法添加键值对
timeout
xhr对象的timeout属性表示请求在等待响应多少毫秒后终止，并触发ontimeout事件。设置为0表示不设置超时。
xhr.timeout = 1000; //1s
xhr.ontimeout = function(){
alert("Request did not return in a second.");
}
overrideMimeType（‘dataType’）
用于重写从服务器返回的响应MIME的类型
进度
-
xhr.onprogress 在接收响应期间不断触发，其事件对象event的target属性指向xhr对象，并且包含了三个属性：
- lengthComputable：表示进度信息可否用的布尔值
- position: 表示已经接收的字节数
- totalSize: 表示根据Content-Length响应头部确定的预期字节数
因此有以上的属性，可以创建一个等待响应的进度指示器了
xhr.onprogress = function(event){ var divStatus = document.getElementById("status"); if(event.lengthComputable){ divStatus.innerHTML = "Received " + event.position + "of" + event.totalSize + " bytes."; } } -
xhr.upload.onprogress 监听POST请求体上传进度
- event.loaded 已经发送的字节数
- event.total 数据体总的字节数
其他类型的HTTP请求
- HEAD 获取资源的头部
和GET方法一样，只是不返回报文主体部分。资源网站 -> 资源服务器里面（查看是否有重复的资源/更新日期，是否存在请求的资源/URI有效性） - CONNECT 隧道通讯
客户端 -> 服务端之间的数据通讯会建立一个通道进行传输,也就是加密 (SSL)
https 其实就是披SSL外皮的http - PUT 发送文件
类似FTP 的文件上传,不带验证机制因此存在安全性问题, REST架构设计才有可能使用 - DELECT 删除文件，PUT相反的方法，同样不带验证机制存在安全隐患问题。
- OPTIONS 询问请求,服务返回支持的请求类型 (GET,POST,HEAD)