首頁 > 教學 > PHP 教學

最佳化用戶端調用服務端介面減少請求資料容量

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
因項目需要，需要記錄使用者未來3天的預約時間，每個預約時段為1小時。

例如：00:00:00～00:59:59 或 01:00:00～01:59:59 等為一個預約時段

前端代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head>  <meta http-equiv="content-type" content="text/html;charset=utf-8">  <title> 提交預約日期 </title>  <style type="text/css">  .title{color:#FF0000;}  .topic{font-size:18px; font-weight:bold;}  </style>  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  <script type="text/javascript">    function fsubmit(){        var timetable = [];        $("#myform input[type=checkbox]").each(function(){            if(this.checked){                timetable.push($(this).val());            }        });        if(timetable.length==0){            alert('請選擇預約時間');            return false;        }        $.post("http://localhost/server.php",{timetable:timetable}).done(function(data){            if(data['success']==true){                alert('提交成功');                            }else{                alert('提交失敗');            }        });    }  </script> </head> <body>  <p class="topic">請選擇預約時間：</p>  <form name="form1" id="myform" method="post" onsubmit="return false">    <p class="title">2015-05-28:</p>    <p>      <input type="checkbox" name="timetable" value="2015-05-28 00:00:00"> 00:00      <input type="checkbox" name="timetable" value="2015-05-28 01:00:00"> 01:00      <input type="checkbox" name="timetable" value="2015-05-28 02:00:00"> 02:00      <input type="checkbox" name="timetable" value="2015-05-28 03:00:00"> 03:00      <input type="checkbox" name="timetable" value="2015-05-28 04:00:00"> 04:00      <input type="checkbox" name="timetable" value="2015-05-28 05:00:00"> 05:00      <input type="checkbox" name="timetable" value="2015-05-28 06:00:00"> 06:00      <input type="checkbox" name="timetable" value="2015-05-28 07:00:00"> 07:00      <input type="checkbox" name="timetable" value="2015-05-28 08:00:00"> 08:00      <input type="checkbox" name="timetable" value="2015-05-28 09:00:00"> 09:00      <input type="checkbox" name="timetable" value="2015-05-28 10:00:00"> 10:00      <input type="checkbox" name="timetable" value="2015-05-28 11:00:00"> 11:00    </p>    <p>      <input type="checkbox" name="timetable" value="2015-05-28 12:00:00"> 12:00      <input type="checkbox" name="timetable" value="2015-05-28 13:00:00"> 13:00      <input type="checkbox" name="timetable" value="2015-05-28 14:00:00"> 14:00      <input type="checkbox" name="timetable" value="2015-05-28 15:00:00"> 15:00      <input type="checkbox" name="timetable" value="2015-05-28 16:00:00"> 16:00      <input type="checkbox" name="timetable" value="2015-05-28 17:00:00"> 17:00      <input type="checkbox" name="timetable" value="2015-05-28 18:00:00"> 18:00      <input type="checkbox" name="timetable" value="2015-05-28 19:00:00"> 19:00      <input type="checkbox" name="timetable" value="2015-05-28 20:00:00"> 20:00      <input type="checkbox" name="timetable" value="2015-05-28 21:00:00"> 21:00      <input type="checkbox" name="timetable" value="2015-05-28 22:00:00"> 22:00      <input type="checkbox" name="timetable" value="2015-05-28 23:00:00"> 23:00    </p>    <p class="title">2015-05-29:</p>    <p>      <input type="checkbox" name="timetable" value="2015-05-29 00:00:00"> 00:00      <input type="checkbox" name="timetable" value="2015-05-29 01:00:00"> 01:00      <input type="checkbox" name="timetable" value="2015-05-29 02:00:00"> 02:00      <input type="checkbox" name="timetable" value="2015-05-29 03:00:00"> 03:00      <input type="checkbox" name="timetable" value="2015-05-29 04:00:00"> 04:00      <input type="checkbox" name="timetable" value="2015-05-29 05:00:00"> 05:00      <input type="checkbox" name="timetable" value="2015-05-29 06:00:00"> 06:00      <input type="checkbox" name="timetable" value="2015-05-29 07:00:00"> 07:00      <input type="checkbox" name="timetable" value="2015-05-29 08:00:00"> 08:00      <input type="checkbox" name="timetable" value="2015-05-29 09:00:00"> 09:00      <input type="checkbox" name="timetable" value="2015-05-29 10:00:00"> 10:00      <input type="checkbox" name="timetable" value="2015-05-29 11:00:00"> 11:00    </p>    <p>      <input type="checkbox" name="timetable" value="2015-05-29 12:00:00"> 12:00      <input type="checkbox" name="timetable" value="2015-05-29 13:00:00"> 13:00      <input type="checkbox" name="timetable" value="2015-05-29 14:00:00"> 14:00      <input type="checkbox" name="timetable" value="2015-05-29 15:00:00"> 15:00      <input type="checkbox" name="timetable" value="2015-05-29 16:00:00"> 16:00      <input type="checkbox" name="timetable" value="2015-05-29 17:00:00"> 17:00      <input type="checkbox" name="timetable" value="2015-05-29 18:00:00"> 18:00      <input type="checkbox" name="timetable" value="2015-05-29 19:00:00"> 19:00      <input type="checkbox" name="timetable" value="2015-05-29 20:00:00"> 20:00      <input type="checkbox" name="timetable" value="2015-05-29 21:00:00"> 21:00      <input type="checkbox" name="timetable" value="2015-05-29 22:00:00"> 22:00      <input type="checkbox" name="timetable" value="2015-05-29 23:00:00"> 23:00    </p>    <p class="title">2015-05-30:</p>    <p>      <input type="checkbox" name="timetable" value="2015-05-30 00:00:00"> 00:00      <input type="checkbox" name="timetable" value="2015-05-30 01:00:00"> 01:00      <input type="checkbox" name="timetable" value="2015-05-30 02:00:00"> 02:00      <input type="checkbox" name="timetable" value="2015-05-30 03:00:00"> 03:00      <input type="checkbox" name="timetable" value="2015-05-30 04:00:00"> 04:00      <input type="checkbox" name="timetable" value="2015-05-30 05:00:00"> 05:00      <input type="checkbox" name="timetable" value="2015-05-30 06:00:00"> 06:00      <input type="checkbox" name="timetable" value="2015-05-30 07:00:00"> 07:00      <input type="checkbox" name="timetable" value="2015-05-30 08:00:00"> 08:00      <input type="checkbox" name="timetable" value="2015-05-30 09:00:00"> 09:00      <input type="checkbox" name="timetable" value="2015-05-30 10:00:00"> 10:00      <input type="checkbox" name="timetable" value="2015-05-30 11:00:00"> 11:00    </p>    <p>      <input type="checkbox" name="timetable" value="2015-05-30 12:00:00"> 12:00      <input type="checkbox" name="timetable" value="2015-05-30 13:00:00"> 13:00      <input type="checkbox" name="timetable" value="2015-05-30 14:00:00"> 14:00      <input type="checkbox" name="timetable" value="2015-05-30 15:00:00"> 15:00      <input type="checkbox" name="timetable" value="2015-05-30 16:00:00"> 16:00      <input type="checkbox" name="timetable" value="2015-05-30 17:00:00"> 17:00      <input type="checkbox" name="timetable" value="2015-05-30 18:00:00"> 18:00      <input type="checkbox" name="timetable" value="2015-05-30 19:00:00"> 19:00      <input type="checkbox" name="timetable" value="2015-05-30 20:00:00"> 20:00      <input type="checkbox" name="timetable" value="2015-05-30 21:00:00"> 21:00      <input type="checkbox" name="timetable" value="2015-05-30 22:00:00"> 22:00      <input type="checkbox" name="timetable" value="2015-05-30 23:00:00"> 23:00    </p>    <p><input type="submit" name="b1" onclick="fsubmit()" value="提交"></p>  </form> </body></html>

後端代碼如下：

<?php$data = $_POST['timetable'];file_put_contents('timetable.log', json_encode($data));header('content-type:applicaiton/json;charset=utf8');echo json_encode(array('success'=>true));?>


例如要提交某個使用者的3天預約資料，所有時段都預約（全選）
後端收到的請求資料如下：

["2015-05-28 00:00:00","2015-05-28 01:00:00","2015-05-28 02:00:00","2015-05-28 03:00:00","2015-05-28 04:00:00","2015-05-28 05:00:00","2015-05-28 06:00:00","2015-05-28 07:00:00","2015-05-28 08:00:00","2015-05-28 09:00:00","2015-05-28 10:00:00","2015-05-28 11:00:00","2015-05-28 12:00:00","2015-05-28 13:00:00","2015-05-28 14:00:00","2015-05-28 15:00:00","2015-05-28 16:00:00","2015-05-28 17:00:00","2015-05-28 18:00:00","2015-05-28 19:00:00","2015-05-28 20:00:00","2015-05-28 21:00:00","2015-05-28 22:00:00","2015-05-28 23:00:00","2015-05-29 00:00:00","2015-05-29 01:00:00","2015-05-29 02:00:00","2015-05-29 03:00:00","2015-05-29 04:00:00","2015-05-29 05:00:00","2015-05-29 06:00:00","2015-05-29 07:00:00","2015-05-29 08:00:00","2015-05-29 09:00:00","2015-05-29 10:00:00","2015-05-29 11:00:00","2015-05-29 12:00:00","2015-05-29 13:00:00","2015-05-29 14:00:00","2015-05-29 15:00:00","2015-05-29 16:00:00","2015-05-29 17:00:00","2015-05-29 18:00:00","2015-05-29 19:00:00","2015-05-29 20:00:00","2015-05-29 21:00:00","2015-05-29 22:00:00","2015-05-29 23:00:00","2015-05-30 00:00:00","2015-05-30 01:00:00","2015-05-30 02:00:00","2015-05-30 03:00:00","2015-05-30 04:00:00","2015-05-30 05:00:00","2015-05-30 06:00:00","2015-05-30 07:00:00","2015-05-30 08:00:00","2015-05-30 09:00:00","2015-05-30 10:00:00","2015-05-30 11:00:00","2015-05-30 12:00:00","2015-05-30 13:00:00","2015-05-30 14:00:00","2015-05-30 15:00:00","2015-05-30 16:00:00","2015-05-30 17:00:00","2015-05-30 18:00:00","2015-05-30 19:00:00","2015-05-30 20:00:00","2015-05-30 21:00:00","2015-05-30 22:00:00","2015-05-30 23:00:00"]

請求資料content-length:2879

使用這種方式請求資料容量比較大，影響回應時間。

改進方法1:把DateTime格式時間轉為時間戳記再提交

前端代碼修改如下：修改javascript fsubmit方法

  <script type="text/javascript">    function fsubmit(){        var timetable = [];        $("#myform input[type=checkbox]").each(function(){            if(this.checked){                // 把時間轉為時間戳記                var time = $(this).val();                var timestamp = Date.parse(new Date(time));                timestamp = timestamp / 1000;                timetable.push(timestamp);            }        });        if(timetable.length==0){            alert('請選擇預約時間');            return false;        }        $.post("http://localhost/server.php",{timetable:timetable}).done(function(data){            if(data['success']==true){                alert('提交成功');                            }else{                alert('提交失敗');            }        });    }  </script>

後端收到的請求資料如下：

["1432742400","1432746000","1432749600","1432753200","1432756800","1432760400","1432764000","1432767600","1432771200","1432774800","1432778400","1432782000","1432785600","1432789200","1432792800","1432796400","1432800000","1432803600","1432807200","1432810800","1432814400","1432818000","1432821600","1432825200","1432828800","1432832400","1432836000","1432839600","1432843200","1432846800","1432850400","1432854000","1432857600","1432861200","1432864800","1432868400","1432872000","1432879200","1432882800","1432886400","1432890000","1432893600","1432897200","1432900800","1432904400","1432908000","1432911600","1432915200","1432918800","1432922400","1432926000","1432929600","1432933200","1432936800","1432940400","1432944000","1432947600","1432951200","1432954800","1432958400","1432962000","1432965600","1432969200","1432972800","1432976400","1432980000","1432983600","1432987200","1432990800","1432994400","1432998000"]

請求資料content-length:1916

後端收到後可把時間戳記轉為datetime格式使用

改進方法2:使用一個32位的整型變數，把每一小時作為32位整型的其中一位來儲存

時段與32位整型的對應關係是
從右至左開始是00:00,01:00,02:00,03:00 以此類推，如果有選擇的時段則為1，否則為0

例如：需要預約2016-05-28的 10:00,12:00,14:00,16:00,18:00

 0   0    0   0   0   0   0    0   0  0  0  0  0  1  0  1  0  1  0  1  0  1  0  0  0  0  0  0  0  0  0  0忽略 忽略 忽略 忽略 忽略 忽略 忽略 忽略 23 22 21 20 19 18 17 16 15 14 13 12 11 10 09 08 07 06 05 04 03 02 01 00

則用32位二進位表示為 1010101010000000000 即10進位349184 ＝ 2的10次方 + 2的12次方 + 2的14次方 + 2的16次方 + 2的18次方
前端代碼修改如下：修改javascript fsubmit方法

  <script type="text/javascript">    function fsubmit(){        var timetable = [];        var tmp = {};        $("#myform input[type=checkbox]").each(function(){            if(this.checked){                // 拆分日期與時間                var datetime = $(this).val();                var datetime = datetime.split(' ');                var day = datetime[0];                var time = parseInt(datetime[1].substring(0,2));                // 建立日期與時間數組                if(typeof(tmp[day])=='undefined'){                    tmp[day] = [];                }                tmp[day].push(time);            }        });        // 合拼資料，轉換格式        for(day in tmp){            // 根據資料集合，合拼，建立10進位資料            var time = tmp[day];            var timeint = 0;            for(var i=0; i<time.length; i++){                timeint += Math.pow(2,time[i]);            }            timetable.push(day+' '+timeint);        }        if(timetable.length==0){            alert('請選擇預約時間');            return false;        }        $.post("http://localhost/server.php",{timetable:timetable}).done(function(data){            if(data['success']==true){                alert('提交成功');            }else{                alert('提交失敗');            }        });    }  </script>

後端收到的請求資料如下：

["2015-05-28 16777215","2015-05-29 16777215","2015-05-30 16777215"]

請求資料content-length:107

使用這種方法，一天不管選了多少個預約時段，都只會有一條記錄，大量減少提交的資料大小。
後端把10進位轉換為時間的方法：
1.把10進位轉為2進位，並反轉
2.迴圈判斷每一位，記錄值為1的
3.記錄儲存
代碼如下：

<?php$datetime = '2015-05-28 1398016';list($day, $time) = explode(' ', $datetime);$bintime = decbin($time);$bintime = strrev($bintime);$result = array();for($i=0,$len=strlen($bintime); $i<$len; $i++){    if(substr($bintime, $i, 1)==1){        $result[] = $day.' '.str_pad($i, 2, '0', STR_PAD_LEFT).':00:00';    }}print_r($result);?>

輸出：

Array(    [0] => 2015-05-28 08:00:00    [1] => 2015-05-28 10:00:00    [2] => 2015-05-28 12:00:00    [3] => 2015-05-28 14:00:00    [4] => 2015-05-28 16:00:00    [5] => 2015-05-28 18:00:00    [6] => 2015-05-28 20:00:00)

總結：本文提供一種可以把大量資料轉換為小容量資料轉送的方法，但需要加入更多的運算。因此實際開發中需根據實際需求來判斷是否適合用時間換空間，或空間換時間的演算法。

本篇文章講解了最佳化用戶端調用服務端介面減少請求資料容量，更多相關內容請關注php中文網。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More