一：使用XHR

XMLHttpRequest (XHR)对象：XHR为发送服务器请求和获取响应提供了合理的接口。这个接口可以实现异步从服务器获取额外数据，意味着用户点击不用页面刷新也可以获取数据。通过XHR对象获取数据后，可以使用DOM方法把数据插入网页。

1、open() 方法

open方法的三个参数：
1、第一个参数：请求类型（"get"、"post"等）
2、第二个参数：请求的URL（只可以请求同源URL，域名相同、端口相同、协议相同）
3、第三个参数：请求是否异步的布尔值
***调用open()方法不会实际发送请求，只是为发送请求做好准备

2、send() 方法

send方法接收一个参数，是作为请求体发送的数据，如果不需要请求体则必须传null。
*** 调用send()以后,请求就会发送到服务器

---

因为这个请求是同步的（open的第三个参数为false），所以JS代码会等待服务器响应之后再继续执行。收到响应后，XHR对象的以下属性会被填充上数据：
1、responseText: 作为响应体返回的文本
2、responseXML: 如果响应的内容类型是“text/xml” 或 “application/xml”，那就是包含响应数据的XML DOM文档（对于非XML数据则为null）
3、status: 响应的HTTP状态
4、statusText: 响应的HTTP状态描述

3、readyState属性

表示当前处在请求/响应过程的哪个阶段,这个属性有如下可能的值：
1、0: 未初始化。尚未调用open()方法
2、1: 已打开。已调用open()方法，但是尚未调用send()方法
3、2: 已发送。已调用send()方法，但是尚未收到响应
4、3: 接收中。已经收到部分响应
5、4:完成。已经收到所有响应，可以使用
*** 每次readyState从一个值变成另一个值，都会触发readystatechange事件。可以借此机会检查readyState的值

4、abort() 方法

abort() 方法，在收到响应之前可以取消异步请求
*** 调用这个方法后，XHR对象会停止触发事件，并阻止访问这个对象上任何与响应相关的属性。中断请求后，应该取消对xhr对象的引用

let xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
  if(xhr.readyState == 4) {
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      alert(xhr.responseText)
    } else {
      alert("Request was unsuccessful: " + xhr.status)
    }
  }
}
xhr.open("get", "example.php", false) 
xhr.send(null)

二：HTTP

1、http头部

Accept: 浏览器可以处理的内容类型
Accept-Charset：浏览器可以显示的字符集
Accept-Encoding：浏览器可以处理的压缩编码类型
Accept-Language：浏览器使用的语言
Connection: 浏览器与服务器的连接类型
Cookie：页面中设置的Cookie
Host：发送请求的页面所在的域
Referer：发送请求的页面的URL
User-agent：浏览器的用户代理字符串

2、setRequestHeader(): 发送自定义请求头 或 重写默认头部

setRequestHeader()方法有两个参数：
1、第一个参数：头部字段的名称
2、第二个参数：头部字段的值
*** 为保证请求头部被发送，必须在open()之后。send()之前调用setRequestHeader()

let xhr = new XMLHttpRequest()
xhr.open('get', 'example.php', true) 
xhr.setRequestHeader('MyHeader', 'MyValue')
xhr.send(null)

3、getResponseHeader(): 从XHR对象获取响应头部

  let myHeader = xhr.getResponseHeader('MyHeader') // 获取名称为 “MyHeader” 响应头

  let allHeaders = xhr.getAllResponseHeaders() //获取所有的响应头

4、GET请求

查询用到的参数必须正确编码后添加到URL后面，然后再传给open()方法
参数中的每个名和值都必须使用encodeURIComponent()编码

xhr.open('get', "example.php?name1=value1&name2=value2", true)

**可以使用以下函数将参数拼接

function addURLParam(url, name, value) {
  url += (url.indexOf("?") == -1) ?  "?" :  "&";
  url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
  return url
}
//使用方式
let url = example.php;
// 添加参数
url = addURLParam(url, "name1", value1);
url = addURLParam(url, "name2," value2)

xhr.open("get", url, true) //初始化参数

5、POST请求

每个POST请求都应该在请求体中携带提交的数据
请求体可以包含非常多的数据，而且数据可以是任意格式。Content-Type设置相关

xhr.send(“请求体数据”)

点击查看POST与GET请求的区别

POST请求相比GET请求要占用更多的资源，从性能方面说，发送相同数量的数据，GET请求比POST请求要快两倍

6、FormData类型

FormDate类型：便于表单序列化，也便于创建与表单类似格式的数据
使用FormData 不需要给XHR对象显式设置任何请求头部了

• append() 接收两个参数：键和值，相当于表单字段名称和该字段的值

let data = new FormData()
data.append('name', 'value')

• 直接给FormData构造函数传入一个表单元素，也可以将表单中的数据作为键/值对填充

let data = new FormData(document.forms[0])

• 通过xhr发送数据

let xhr = new XMLHttpRequest()
xhr.open("post", "example.php", true);
let form1 = document.getElementById('form')
xhr.send(new FormData(form1))

三：进度事件

onload、onprocess必须在调用open()之前添加

loadstart: 在接收到响应的第一个字节时触发
progress：在接收响应期间反复触发
error：在请求出错时触发
abort：在调用abort()终止连接触发时触发
load：在成功接收完响应时触发（无论返回的什么状态码200、404、500等都会触发该事件）
loadend：在通信完成时，且在load、abort、error之后触发

1、进度条实现

onprogress事件处理程序都会收到event对象
额外包含了三个属性：lengthComputable、position和totalSize。
lengthComputable：进度信息是否可用
position：接收到的字节数
totalSize：响应content-type 头部定义的总字节数。
有了这些信息就可以提供进度条了

let xhr = new XMLHttpRequest()
xhr.onload = function(event){
  if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
    alert(xhr.responseText)
  } else {
    alert("请求失败,返回状态值为：" + xhr.status)
  }
}
xhr.onprogress = function(event){
  if(event.lengthComputable){ // 布尔值： 代表进度信息是否可用
    console.log('根据需求做一些业务处理')
  }
}
xhr.open('get', 'example.php', 'true')
xhr.send(null)

四：跨源资源共享

跨域资源共享( CROS )：默认情况下，XHR只访问与发起请求的页面在同一个域内的资源

服务器会通过在响应中发送如下头部与浏览器沟通这些信息：

Access-Control-Allow-Origin: 与简单请求相同
Access-Control-Allow-Methods: 允许的方法（逗号分割的列表）
Access-Control-Allow-Headers：服务器允许的头部（逗号分割列表）
Access-Control-Max-Age：缓存预检请求的秒数

1、XHR通过以下方式向不同域的源发送请求

使用标准的XHR对象并给open()方法传入一个绝对的URL

xhr.open('get', 'http://www.someWhere.com/page/', true)