// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest()
// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', './time.php')
// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null)
// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
if (this.readyState === 4) {
  // 通过 xhr 的 responseText 获取到响应的响应体
  console.log(this)
  }
}

var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0
// 初始化 请求代理对象
xhr.open('GET', 'time.php') console.log(xhr.readyState)
// => 1
// open 方法已经调用，建立一个与服务端特定端口的连接
xhr.send()
xhr.addEventListener('readystatechange', function () {
  switch (this.readyState) {
    case 2:
    // => 2
    // 已经接受到了响应报文的响应头
    // 可以拿到头
    // console.log(this.getAllResponseHeaders()) console.log(this.getResponseHeader('server')) // 但是还没有拿到体console.log(this.responseText)
    break
    case 3:
    // => 3
    // 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整
    // 在这里处理响应体不保险（不可靠）console.log(this.responseText) break
    case 4:
    // => 4
    // 一切 OK （整个响应报文已经完整下载下来了）
    // 这里处理响应体console.log(this.responseText) break
  }
})

xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
  // 后续逻辑......
  }
}

// 设置请求报文的请求行xhr.open('GET', './time.php') // 设置请求头
xhr.setRequestHeader('Accept', 'text/plain')
// 设置请求体
xhr.send(null)
xhr.onreadystatechange = function () {
  if (this.readyState === 4) { 
    // 获取响应状态码console.log(this.status)
    // 获取响应状态描述console.log(this.statusText) // 获取响应头信息
    console.log(this.getResponseHeader('Content‐Type')) // 指定响应头
    console.log(this.getAllResponseHeader()) // 全部响应头// 获取响应体
    console.log(this.responseText) // 文本形式console.log(this.responseXML) // XML 形式，了解即可不用了
  }
}

var xhr = new XMLHttpRequest()
// GET 请求传递参数通常使用的是问号传参
// 这里可以在请求地址后面加上参数，从而传递数据到服务端
xhr.open('GET', './delete.php?id=1')
// 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传
xhr.send(null)
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {  
    console.log(this.responseText)  
  }
}
// 一般情况下 URL 传递的都是参数性质的数据，而 POST 一般都是业务数据

var xhr = new XMLHttpRequest()
// open 方法的第一个参数的作用就是设置请求的 method
xhr.open('POST', './add.php')
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded // 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 需要提交到服务端的数据可以通过 send 方法的参数传递// 格式：key1=value1&key2=value2 xhr.send('key1=value1&key2=value2') xhr.onreadystatechange = function () {
  if (this.readyState === 4) {  
    console.log(this.responseText)  
  }
}

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 默认第三个参数为 true 意味着采用异步方式执行xhr.open('GET', './time.php', true) xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) { // 这里的代码最后执行console.log('request done')
}
}
console.log('after ajax')

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', './time.php', false)
// 同步方式 执行需要 先注册事件再调用 send，否则 readystatechange 无法触发
xhr.onreadystatechange = function () {
  if (this.readyState === 4) { 
    // 这里的代码最后执行
    console.log('request done')
  }
}
xhr.send(null) console.log('after ajax')

 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')

/**
* 发送一个 AJAX 请求
* @param {String}  method 请求方法* @param {String}  url   请求地址* @param {Object}  params 请求参数
* @param {Function} done  请求完成过后需要做的事情（委托/回调）
*/
function ajax (method, url, params, done) {
  // 统一转换为大写便于后续判断
  method = method.toUpperCase()
  // 对象形式的参数转换为 urlencoded 格式
  var pairs = []
  for (var key in params) {
    pairs.push(key + '=' + params[key])
  }
  var querystring = pairs.join('&')
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
  xhr.addEventListener('readystatechange', function () {
    if (this.readyState !== 4) 
      return
    // 尝试通过 JSON 格式解析响应体
    try {
      done(JSON.parse(this.responseText))
    } catch (e) {
      done(this.responseText)
    }
  })
  // 如果是 GET 请求就设置 URL 地址 问号参数
  if (method === 'GET') {
    url += '?' + querystring
  }
  xhr.open(method, url)
  // 如果是 POST 请求就设置请求体
  var data = null
  if (method === 'POST') {
    xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
    data = querystring
  }
  xhr.send(data)
}
ajax('get', './get.php', { id: 123 }, function (data) {
  console.log(data)
})
ajax('post', './post.php', { foo: 'posted data' }, function (data) {
  console.log(data)
 })

$.ajax({
  url: './get.php', 
  type: 'get', 
  dataType: 'json', 
  data: { id: 1 },
  beforeSend: function (xhr) {
    console.log('before send')
  },
  success: function (data) {
    console.log(data)
  },
  error: function (err) {
    console.log(err) 
  },
  complete: function () {
    console.log('request completed')
  }
})

var xhr = new XMLHttpRequest() 
xhr.open('GET', './time.php') 
xhr.onload = function () {
  // onload readyState === 4 
  console.log(this.readyState)
}
xhr.onprogress = function () { 
  // onload readyState === 3 
  console.log(this.readyState)
}
xhr.send(null)