案例：倒计时

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>倒计时</title>
  6. </head>
  7. <body>
  8.     <div id="box"></div>
  9.     <script>
  10.         //new Date() 获取客户端本地当前时间（不能拿它做重要依据，因为用户可以随意修改）
  11.         /* 
  12.          * 倒计时抢购需要从服务器获取当前时间  AJAX
  13.          *    问题：时间差（从服务器把时间给客户端，到客户端获取到这个信息，中间经历的时间就是时间差，而时间差是不可避免的，我们应尽可能减少这个误差）
  14.          *    - 从响应头获取时间（AJAX异步）
  15.          *    - 基于 HEAD 请求（只获取响应头信息）
  16.          */
  17.         let target = new Date('2019/09/14 13:27:00'),
  18.             now = null,
  19.             timer = null;
  21.         // 从服务器获取时间：获取到时间后再做其他的事情
  22.         function func(callback) {
  23.             let xhr = new XMLHttpRequest;
  24.             xhr.open('HEAD', 'json/data.json', true);
  25.             xhr.onreadystatechange = function () {
  26.                 if (!/^(2|3)\d{2}$/.test(xhr.status)) return;
  27.                 if (xhr.readyState === 2) {
  28.                     now = new Date(xhr.getResponseHeader('Date'));
  29.                     callback && callback();
  30.                 }
  31.             }
  32.             xhr.send(null);
  33.         }
  35.         // 开启倒计时模式
  36.         function computed() {
  37.             let spanTime = target - now;
  38.             if (spanTime <= 0) {
  39.                 // 到抢购时间：结束定时器
  40.                 clearInterval(timer);
  41.                 timer = null;
  42.                 box.innerHTML = "开抢~~";
  43.                 return;
  44.             }
  45.             let hours = Math.floor(spanTime / (60 * 60 * 1000));
  46.             spanTime -= hours * 60 * 60 * 1000;
  47.             let minutes = Math.floor(spanTime / (60 * 1000));
  48.             spanTime -= minutes * 60 * 1000;
  49.             let seconds = Math.floor(spanTime / 1000);
  50.             box.innerHTML =
  51.                 `距离抢购还剩 ${hours<10?'0'+hours:hours}:${minutes<10?'0'+minutes:minutes}:${seconds<10?'0'+seconds:seconds}`;
  53.             // 每一次计算完，我们需要让NOW在原来的基础上加上一秒（第一次从服务器获取到时间，后期直接基于这个时间自己加即可，不要每隔一秒重新从服务器拿）
  54.             now = new Date(now.getTime() + 1000);
  55.         }
  56.         func(() => {
  57.             // 已经从服务器获取时间了
  58.             computed();
  59.             timer = setInterval(computed, 1000);
  60.         });
  61.     </script>
  62. </body>
  63. </html>

封装AJAX库

AJAX库的封装.png

  1. /*
  2.  * 支持的参数配置项
  3.  *    url
  4.  *    method:'GET'
  5.  *    data:null
  6.  *    dataType:'json'
  7.  *    async:true
  8.  *    cache:true
  9.  *    success:null
  10.  *    error:null
  11.  *    headers:null
  12.  *    timeout:null
  13.  */
  14. ~ function () {
  15.     function ajax(options) {
  16.         return new init(options);
  17.     }
  19.     /* == AJAX处理的核心 == */
  20.     let regGET = /^(GET|DELETE|HEAD|OPTIONS)$/i;
  21.     let defaults = {
  22.         url: '', // 请求的API接口地址
  23.         method: 'GET', // 请求方式 GET / POST / DELETE / PUT / HEAD / OPTIONS
  24.         data: null, // 传递给服务器的信息：支持格式 STRING 和 OBJECT，如果是 OBJECT，我们需要把其处理为 x-www-form-urlencoded 格式；GET 请求是把信息作为问号参数传递给服务器，POST 请求是放到请求主体中传递给服务器；
  25.         dataType: 'JSON', // 把服务器返回结果处理成为对应的格式 JSON / TEXT / XML
  26.         async: true, // 是否异步请求
  27.         cache: true, // 只对 GET 请求有作用：设置为 FALSE,在 URL 的末尾加随机数来清除缓存
  28.         timeout: null, // 超时时间
  29.         headers: null, // 设置请求头信息（请求头信息不能是中文，所以我们需要为其编码）
  30.         success: null, // 从服务器获取成功后执行 把获取的结果、状态信息、XHR 传递给它
  31.         error: null // 获取失败后执行 把错误信息传递给它
  32.     };
  34.     function init(options = {}) {
  35.         // 参数初始化：把传递的配置项替换默认的配置项
  36.         this.options = Object.assign(defaults, options);
  37.         this.xhr = null;
  38.         this.send();
  39.     }
  41.     ajax.prototype = {
  42.         constructor: ajax,
  43.         version: 1.0,
  44.         // 发送AJAX请求
  45.         send() {
  46.             let xhr = null,
  47.                 {url, method, async, data, cache, timeout, dataType, headers, success, error} = this.options;
  48.             this.xhr = xhr = new XMLHttpRequest;
  50.             // 处理DATA:如果是GET请求把处理后的DATA放在URL末尾传递给服务器
  51.             data = this.handleData();
  52.             if (data !== null && regGET.test(method)) {
  53.                 url += `${this.checkASK(url)}${data}`;
  54.                 data = null;
  55.             }
  57.             // 处理CACHE:如果是GET并且CACHE是FALSE需要清除缓存
  58.             if (cache === false && regGET.test(method)) {
  59.                 url += `${this.checkASK(url)}_=${Math.random()}`;
  60.             }
  62.             xhr.open(method, url, async);
  64.             // 超时处理
  65.             timeout !== null ? xhr.timeout = timeout : null;
  67.             // 设置请求头信息
  68.             if (Object.prototype.toString.call(headers) === "[object Object]") {
  69.                 for (let key in headers) {
  70.                     if (!headers.hasOwnProperty(key)) break;
  71.                     xhr.setRequestHeader(key, encodeURIComponent(headers[key]));
  72.                 }
  73.             }
  75.             xhr.onreadystatechange = () => {
  76.                 let {
  77.                     status,
  78.                     statusText,
  79.                     readyState: state,
  80.                     responseText,
  81.                     responseXML
  82.                 } = xhr;
  83.                 if (/^(2|3)\d{2}$/.test(status)) {
  84.                     // 成功
  85.                     if (state === 4) {
  86.                         switch (dataType.toUpperCase()) {
  87.                             case 'JSON':
  88.                                 responseText = JSON.parse(responseText);
  89.                                 break;
  90.                             case 'XML':
  91.                                 responseText = responseXML;
  92.                                 break;
  93.                         }
  94.                         success && success(responseText, statusText, xhr);
  95.                     }
  96.                     return;
  97.                 }
  98.                 // 失败的
  99.                 typeof error === "function" ? error(statusText, xhr) : null;
  100.             }
  101.             xhr.send(data);
  102.         },
  103.         // 关于DATA参数的处理
  104.         handleData() {
  105.             let {
  106.                 data
  107.             } = this.options;
  108.             if (data === null || typeof data === "string") return data;
  109.             // 只有DATA是一个对象，我们需要把它变为xxx=xxx&xxx=xxx这种格式字符串
  110.             let str = ``;
  111.             for (let key in data) {
  112.                 if (!data.hasOwnProperty(key)) break;
  113.                 str += `${key}=${data[key]}&`;
  114.             }
  115.             str = str.substring(0, str.length - 1);
  116.             return str;
  117.         },
  118.         // 检测URL中是否存在问号
  119.         checkASK(url) {
  120.             return url.indexOf('?') === -1 ? '?' : '&';
  121.         }
  122.     };
  123.     init.prototype = ajax.prototype;
  125.     window._ajax = ajax;
  126. }();