一、使用方法

  使用 AJAX 的过程可以类比平常我们访问网页过程

var xhr = new XMLHttpRequest();              //打开浏览器
xhr.open('请求方式','URL地址','异步同步模式'); //地址栏输入网址
xhr.send();                                  //回车or点击访问
xhr.onreadystatechange = function(){         //处理网页呈现后操作
  if(this.readyState!==4) return;
  console.log('后续处理逻辑');
}

二、readyState状态描述

  由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次，所以我们有必要了解每一个状态值代表的含义：

readyState状态

  通过理解每一个状态值的含义得出一个结论：一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑

三、AJAX遵循HTTP协议

  本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，所以我们发送出去的请求任然是HTTP 请求，同样符合 HTTP 约定的格式：

//设置请求行
xhr.open('POST','./FFF.php'); 
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode');
//设置请求体
xhr.send('key1=value1&key2=value2');
-----------------以下是获取响应报文中内容---------------
//获取状态码以及描述
console.log(xhr.status,xhr.statusText);
//获取全部响应头
console.log(xhr.getAllResponseHeaders());
//获取指定响应头
console.log(xhr.getResponseHeader('User-Agent'));
//获取响应体
console.log(xhr.getResponseText);

四、GET请求

  通常情况下GET请求过程中，不要设置请求体，参数可通过URL中?传递

var xhr = new XMLHttpRequest();
xhr.open('GET','./FFF.php');
xhr.send(); //不写或者传null都行
xhr.onreadystatechange = function(){
  if(this.readyState!==4) return;
  console.log(this.responseText); //打印响应体
}

五、POST请求

  POST 请求过程中，都是采用请求体承载需要提交的数据。因此请求头的Content-Type也要随请求体的格式变化而变化

var xhr = new XMLHttpRequest();
xhr.open('POST','./FFF.php');
xhr.send('key1=value1&key2=value2');
//标识此次请求的请求体格式为urlencoded 以便于 服务端接收数据
xhr.setRequestHeader('Content-Type','application/www-x-form-urlencoded');
xhr.onreadystatechang = function(){
  if(this.readyState!==4) return;
   console.log(this.responseText); //打印响应体
}