AJAX 原生方法记录

创建 XMLHttpRequest 对象、open 方法、send 方法

var xhr = new XMLHttpRequest() // 创建原生 XHR 对象
xhr.open("get","example.php",false); // 第一个参数：发送请求类型，第二个参数： 请求URL，第三个参数：是否异步发送（true 为异步）
xhr.send(null);  // 请求主体发送数据，如果不需要则必须传入 null ，调用后请求发送到服务器。

当收到响应后，响应的数据会自动填充 XHR 对象的属性

• responseText：作为响应主体被返回
• responseXML：如果响应的内容类型是“text/xml”或者“application/xml”，这个属性将保存包含着响应数据的 XML DOM 文档
• status：响应的 HTTP 状态码
• statusText： HTTP 状态的说明
• readyState: 表示请求/响应过程的当前活动阶段

// readyState 值
0：未初始化，尚未调用 open()方法
1：启动，已经调用 open() 方法，但尚未调用 send() 方法
2：发送，已经调用 send() 方法，但尚未接收到响应
3： 接受，已经接收到部分响应
4： 完成 ，已经接受全部响应

• 方法： onreadystatechange // 只要 readyState 改变，都会触发 readystatechange 事件

xhr.onreadystatechange = function(){
  // 对状态进行判断
  if(xhr.readyState == 4){
    console.log("balabala");
  }
}

XHR （XMLHttpRequest） 对象方法集结

var xhr = new XMLHttpRequest();
xhr.setRequestHeader('MyHeader','MyValue'); // 设置发送的头部信息
// Content-Type: application/json ——用于通知服务器该请求需要接受何种类型的返回结果
// dataType： json ————把响应的结果当做 JSON 执行，并返回一个 JavaScript 对象

# 进度设定

只要浏览器接收到服务器的响应，都会触发 load 事件
xhr.onload() = function(){
  if((xhr.status>=200 && xhr.status<300) || xhr.status == 304) {
    alert(xhr.responseText);
  } else{
    alert("Request success" );
  }
}

# progress 事件
该事件将会在浏览器接受数据期间**周期性**的触发，主要就是用于显示当前加载情况
并且 onprogress 事件处理程序会接收到一个 event 对象，其中 target 属性是 XHR 对象，但包含着三个格外的属性:
1. lengthComputable： 进度信息是否可用的布尔值
2. position：表示已经接受的字节数
3. totalSize： 表示根据 Content-length 响应头部确定的预期字节数

xhr.onprogress = function(event){
  console.log(event.lengthComputable,event.position, event.totalSize);
}

超时设定

timeout 属性： 超时时间设定

xhr.timeout = 1000 ; // 将超时设定设置为 1秒钟
xhr.ontimeout = function(){
  alert("request did not return in a second");
}//  超时将会调用该函数

XMLHttpRequest 2级

通过 formData 对象

var data = new FormData();
data.append("name"，"laoluo");

---

后期添加上传的方法