AJAX

定义：JavaScript 脚本发起 HTTP 通信（脚本发起通信）
步骤：
1.创建 XMLHttpRequest 实例
2.发出 HTTP 请求
3.接收服务器传回的数据
4.更新网页数据

XMLHttpRequest 实例

XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。

XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/page.php', true);

一旦新建实例，就可以使用open()方法初始化 HTTP 请求头。
指定回调函数，监听通信状态（readyState属性）的变化

xhr.onreadystatechange = handleStateChange;

function handleStateChange() {
  // ...
}

readystate为4时表示，响应体已经下载成功

button.addEventListener('click', function () {
  var request = new XMLHttpRequest
  request.open('GET', 'url', true);//http方法
  request.send()
  request.onreadystatechange=()=>{console.log(request.onreadystate)}
//当前所处的状态改变一旦回调函数，
//当状态变为4的时候，即响应完毕请求体下载成功，
//这时回调函数就可以处理服务器传送回来的数据。
}

1. 设置一个状态（如button的 click）
2. 创建XMLHttpRequest对象
   3 初始化 XMLHttpRequest.open('method',''url',true)
   4 XMLHttpRequest.send()发送请求
3. 可以通过onReadyStateChange属性，指定这个事件的监听函数，对不同状态进行不同处理。

request.onreadystatechange=()=>{
  if(request.status>=200&&request.status<=300){
      let string = request.responseText
      let object = window.JSON.parse(string)
      console.log('object.note.from')
}

下面的例子：
假设服务器返回的是JSON字符串
把从服务器接收到的符合JSON语法的字符串转换成js中的数据类型，让js能够调用。后端返回的只能是字符串
比如返回的是

{
  "note":{
      "from":"z",
      "to":"f"
  }
}