ajax基础概念

let xhr = new XMLHttpRequest; // 无参时候可以不加括号
xhr.open('GET', '/userInfo?id=1'); //=>router Query
// xhr.open('GET', '/userInfo/1'); //=>这种router Params后端处理解析url 获取参数

xhr.onreadystatechange = function () {
    if (xhr.status !== 200) return;
     /**监听请求的过程，在不同的阶段做不同的处理「包含获取服务器的响应信息」
     + ajax状态  xhr.readyState
       + 0 UNSENT  代理被创建，但尚未调用 open() 方法
       + 1 OPENED    方法已经被调用
       -----
       + 2 HEADERS_RECEIVED 响应头信息已经返回
       + 3 LOADING 响应主体信息正在处理
       + 4 DONE 响应主体信息已经返回**/
    if (xhr.readyState === 4) { // 要等到数据全部返回因此判断状态为4
        console.log(xhr.response);
    }
};
xhr.send();

var formData = new FormData();
  formData.append('username', 'johndoe');
  formData.append('id', 123456);
  //创建xhr对象 
  var xhr = new XMLHttpRequest();
  //设置xhr请求的超时时间
  xhr.timeout = 3000;
  //设置响应返回的数据格式
  xhr.responseType = "text";
  //创建一个 post 请求，采用异步
  xhr.open('POST', '/server', true);
  //注册相关事件回调处理函数
  xhr.onload = function(e) { 
    if(this.status == 200||this.status == 304){
        alert(this.responseText);
    }
  };
  xhr.ontimeout = function(e) { ... };
  xhr.onerror = function(e) { ... };
  xhr.upload.onprogress = function(e) { ... };
  
  //发送数据
  xhr.send(formData);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(Qs.stringify({
        lx: 0,
        name: 'xxx'
    }))
// 不用qs 自己拼接字符串
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.send("name=why&age=18&address=广州市")

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')

param.toString() //  'username=admin&pwd=admin'

function myAjax({
  url,
  method = "get",
  data = {},
  timeout = 10000,
  headers = {}, // token
} = {}) {
  // 1.创建对象
  const xhr = new XMLHttpRequest()

  // 2.创建Promise
  const promise = new Promise((resolve, reject) => {

    // 2.监听数据
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response)
      } else {
        reject({ status: xhr.status, message: xhr.statusText })
      }
    }

    // 3.设置类型
    xhr.responseType = "json"
    xhr.timeout = timeout

    // 4.open方法
    if (method.toUpperCase() === "GET") {
      const queryStrings = []
      for (const key in data) {
        queryStrings.push(`${key}=${data[key]}`)
      }
      url = url + "?" + queryStrings.join("&")
      xhr.open(method, url)
      xhr.send()
    } else {
      xhr.open(method, url)
      xhr.setRequestHeader("Content-type", "application/json")
      xhr.send(JSON.stringify(data))
    }
  })

  promise.xhr = xhr

  return promise
}

const promise = myAjax({
	url: "",
	data: {
	username: "",
	password: ""
	}
})

promise.then(res => {
	console.log("res:", res)
}).catch(err => {
	console.log("err:", err)
})
promise.xhr.abort() // 取消请求

/* 
 * 两个时间：
 *   + 目标时间 18:00:00
 *   + 当前时间 
 *   目标时间-当前时间=时间差 「毫秒差：计算时间差中包含多少小时，多少分钟，多少秒」 
 *   每间隔一秒中都需要重新获取当前时间「定时器 setInterval」，重算时间差等
 * 
 * 核心的问题：
 *   当前时间是不可以获取客户端本地的（因为本地的时间客户自己可以肆意的修改），需要统一获取服务器的时间「响应头->Date」
 *   + 获取服务器时间会存在时间偏差问题  --> HEAD  AJAX状态码为2
 * 
 *   在页面不刷新的情况下，每间隔1秒，不是再次从服务器获取（如果这样：服务器会崩溃，用户得到的时间误差也会越大...），而是基于第一次获取的结果之上，手动给其累加1000ms即可
 */
let countdownModule = (function () {
    let textBox = document.querySelector('.text'),
        serverTime = 0,
        targetTime = +new Date('2020/12/05 16:00:00'),
        timer = null;

    // 获取服务器时间
    const queryServerTime = function queryServerTime() {
        return new Promise(resolve => {
            let xhr = new XMLHttpRequest;
            xhr.open('HEAD', '/');
            xhr.onreadystatechange = () => {
                if ((xhr.status >= 200 && xhr.status < 300) && xhr.readyState === 2) {
                    let time = xhr.getResponseHeader('Date');
                    // 获取的时间是格林尼治时间 -> 变为北京时间
                    resolve(+new Date(time));
                }
            };
            xhr.send(null);
        });
    };
    
    // 倒计时计算
    const supplyZero = function supplyZero(val) {
        val = +val || 0;
        return val < 10 ? `0${val}` : val;
    };
    const computed = function computed() {
        let diff = targetTime - serverTime,
            hours = 0,
            minutes = 0,
            seconds = 0;
        if (diff <= 0) {
            // 到达抢购时间了
            textBox.innerHTML = '00:00:00';
            clearInterval(timer);
            return;
        }
        // 没到时间则计算即可
        hours = Math.floor(diff / (1000 * 60 * 60));
        diff = diff - hours * 1000 * 60 * 60;
        minutes = Math.floor(diff / (1000 * 60));
        diff = diff - minutes * 1000 * 60;
        seconds = Math.floor(diff / 1000);
        textBox.innerHTML = `${supplyZero(hours)}:${supplyZero(minutes)}:${supplyZero(seconds)}`;
    };

    return {
        async init() {
            serverTime = await queryServerTime();
            computed();

            // 设置定时器   
            timer = setInterval(() => {
                serverTime += 1000;
                computed();
            }, 1000);
        }
    };
})();
countdownModule.init();