客户端调用服务端接口减少请求数据容量的优化例子

最新推荐文章于 2022-12-08 14:08:37 发布
最新推荐文章于 2022-12-08 14:08:37 发布
阅读量1.1w 收藏
点赞数 1
分类专栏： php 文章标签： php request 优化 前端 数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fdipzone/article/details/51540891
版权

因项目需要，需要记录用户未来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
)



总结：本文提供一种可以把大量数据转换为小容量数据传输的方法，但需要加入更多的运算。因此实际开发中需根据实际需求来判断是否适合用时间换空间，或空间换时间的算法。

傲雪星枫
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
普元bps客户端调用服务端例子
12-07
【普元BPS客户端调用服务端例子】是关于如何使用普元BPS（Business Process Service）平台进行客户端和服务端交互的一个示例。这个例子主要展示了在JAVA环境下，如何通过编程方式实现BPS流程的调用，对于理解和掌握...
web Service axis 生成代码设置header参数
qq_42982191的博客
11-18 1301
客户端调用: /** * 使用axis 生成代码调用,并设置header内容 */ public static void invokeService() { try { ServerServiceDemoImplServiceLocator locator = new ServerServiceDemoImplServiceLocator(); ServerServiceDemoImplServiceSoapBin
浏览器模拟API客户端发起POST调用后端API接口，亲测有效
cshongye的专栏
12-08 3798
有时候项目组在生产环境需要验证后端API接口的可访问性或者正确，甚至是调用一个初始化方法会受到端口和来源IP的访问限制，所以本机的POSTMAN或者API工具就不能给力了。发现了浏览器本身就可以执行的脚本分享给大家，不光是POST也是可以GET形式访问后端接口。以下示例为调用后端一个POST接口，提交一段JSON到后端，后端接口返回的也是JSON结果并输出到控制台。 比如在谷歌浏览器直接点击更多工具-开发者工具，点击控制台可直接粘贴fetch脚本，回车执行。并不是所有的浏览器版本都支持fetch，可参考
JAVA客户端调用SAP提供的接口(保姆级教程)
petor_lin的博客
09-04 7716
1.WSDL/REST接口调用就是Restful风格的HTTP请求，比较简单，只需要注意生成认证头即可；2.WSDL/SOAP接口的调用相对比较麻烦，但是可以通过使用SoapUI工具+Axis可以极大的简化开发，在使用一次后就可以很快上手。
如何减少接口响应时间
ifeves的博客
03-14 981
对于程序优化，我一直采取保守的态度，除非万不得已。但是随着业务的不断发展，程序越来越复杂，代码越写越多，优化似乎是终有一天会到来的事情。那么对于一个典型的后台服务接口，我...
易语言客户端调用例子源码,易语言服务端源码,易语言逆鳞asp验证
08-19
客户端通常指的是用户直接交互的部分，比如桌面应用程序或网页的前端，而服务端则是处理业务逻辑和数据存储的部分，通常运行在服务器上。在易语言中，客户端和服务端源码的分离有利于实现分布式系统，提高软件的稳定...
JAVA发送http get/post请求，调用http接口、方法详解
08-26
在Java编程中，发送HTTP GET和POST请求是常见的任务，特别是在与远程服务器交互或调用API接口时。本文将详细讲解如何使用Java实现这两种请求，以及如何处理响应。我们将使用Apache HttpClient库，这是一个广泛使用的...
webservice客户端以及服务端
03-01
Web服务是一种基于网络的、平台无关的交互方式，它允许不同的系统之间进行数据交换和功能调用。在本文中，我们将深入探讨Web服务的核心概念，包括服务端和客户端的实现，特别是关注Java环境下的实现——使用JDK原生...
java实现的opc ua 客户端/服务端的简单例子
03-07
首先，OPC UA 包含了客户端和服务端两部分，客户端用于请求和访问服务器上的数据，而服务端则提供数据和服务。在Java中，我们可以使用开源库如OpenOPC或 OPC-UA-Stack 来实现 OPC UA 的功能。 1. **客户端实现**： ...
webservices客户端方式调用接口
04-27
调用接口方法之一，客户端方式调用，测试开发的webservices接口
计算一个接口的返回值大小（占用内存）
Flyer的后花园
03-05 2878
          String str="您的返回类型是1001"; System.out.println(str.length()); System.out.println(str.getBytes().length); UTF-8编码中，一个英文字符等于一个字节，一个中文（含繁体）等于三个字节。所以结果如下1125用一个txt文档做实验 1000个汉字---utf-8编码格式---占用2...
WebService接口客户端调用
qq_44838329的博客
05-27 585
WebService接口客户端调用 接口url： http://ip:port/…?wsdl 将该地址输入到浏览器会返回xml文件显示在浏览器上 鼠标右键另存为wsdl文本。 下载红色框中的,我这里下载的apache axis2 打开idea：file->setting->tools 选中项目鼠标右键： 我这里选的事JAXBRI，共有三种，另外两种没生成。 生成后的代码如下： 都会生成一个以Stub结尾的类，该类继承apache.axis2.client.Stub。 看一下该类的构造： 该
接口性能优化
无意摘花
01-12 5863
性能优化之接口优化（spring/java/http接口） 这篇文章介绍了一些常用的接口性能优化工具，如CAT，放水系统。接口优化的依据。接口优化的具体措施
java调用webserver 服务端接口
最新发布
05-31
要调用Web服务端接口，可以使用Java的HTTP客户端来发送HTTP请求。以下是一个简单的示例，其中使用Java的HttpURLConnection类发送GET请求： ```java import java.net.HttpURLConnection; import java.net.URL; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值