减少 AJAX 请求大小。与投票系统的简单聊天

Posted 2023-02-27

【中文标题】减少 AJAX 请求大小。与投票系统的简单聊天

【英文标题】：Reduce AJAX request size. Simple chat with Polling system

【发布时间】：2015-08-16 18:02:49

【问题描述】：

^{_{注意：我将投票系统替换为websockets，但我仍然想知道上述问题的答案。}}

我正在尝试减少 传统轮询消息系统的 AJAX 请求，但我不知道如何获取它：

$chatbox = $("#chatbox");

setInterval(function()
    // I send the sha1 of the chatbox html content to verify changes.
    $.post("post.php", checksum: hex_sha1($chatbox.html()), function (data, status) 

        switch (status) 
            case "success": 
                // If version of "post.php" checksum is different than mine (there are changes) data isn't empty; I assign data as the new content of the chatbox.
                if(data) 
                    $chatbox.html(data);      
                    $chatbox.scrollTop($chatbox[0].scrollHeight); 
                 
            break;

            default: 
                $chatbox.html('Connection error...'); 
            break;                       
                               
    );
, 1000);

好吧，正如你所见，我使用 setInterval() 和 1000 毫秒作为参数，并且感谢 SHA1 校验和系统，我可以将所有 AJAX 响应的大小减小到 343 B（除了“ post.php" 显然会返回一些新消息)

问题：

为什么我所有的 AJAX 请求都大小相同（343 B) 即使我将 SHA1 (20 B) 哈希更改为 MD5 (16 B)？ p>

我的校验和变量 (SHA1) 占用 20 B：剩下的在哪里 323 B？

我可以进一步减少 AJAX 请求的大小吗？ 如何？

注意：

hex_sha1() 是 javascript 的 SHA1 算法的实现：http://pajhome.org.uk/crypt/md5/sha1.html

注意 2：

不幸的是，我不能使用像node.js 这样的服务器推送技术。我只能使用 Javascript（客户端）和 PHP。

【问题讨论】：

为什么不使用 websockets？

@JayBlanchard 据我所知，websockets 尚未得到所有浏览器的支持。我错了吗？

所有现代浏览器都以一种或另一种形式支持它们。

@JayBlanchard 我只是假装接受一个答案，不要误会我的意思。

谢谢大家；我用 websockets 替换了我的投票系统，但 我仍然想知道上面三个问题的答案，所以我不会关闭我的问题。

【参考方案1】：

这是我对您的问题的看法，尽管您最好使用像 socket.io 这样的库，该库具有对旧版浏览器的后备支持（通过长轮询等模拟 websocket）。

为什么我所有的 AJAX 请求都具有相同的大小 (343 B)，即使我 将 SHA1 (20 B) 哈希更改为 MD5 (16 B)？

默认情况下，浏览器和服务器之间的大多数 HTTP 通信都是使用 gzip 压缩的。您的请求/响应流的大部分由 HTTP 标头组成，由于 gzip 压缩，散列算法输出中的 4 个字节的差异可能不会有效地产生影响。

我的校验和变量 (SHA1) 占用 20 B：剩下的 323 B 在哪里？

见上文，如果要亲自查看，您可以使用 http 监视器、tcpdump 或开发人员工具来查看传输的原始数据。

我可以进一步减少 AJAX 请求的大小吗？怎么样？

与 HTTP 请求相比，WebSocket 的占用空间要小得多，因此在这里使用它似乎是最好的选择（并且间隔轮询几乎从来都不是一个好主意，即使没有 WebSocket，您最好在服务器中实现长轮询） .

【参考方案2】：

为什么不使用纯 javascript AJAX 请求？可能你的 AJAX 数据太长了，所以它的尺寸很大：你唯一能做的就是让 AJAX 数据有一些数据。

你想要什么？像 Facebook AJAX 轮询？在服务器 PHP 上这样做：

$chat_data = "(this is the chat data variable if there is no chat data it will idle)";
while (!$chat_data) 
     // when there's no chat data let's idle the request without disconnecting
     // the client from the AJAX request.
     sleep(1);

exit(json_encode($chat_data));

在 JavaScript 客户端：

function repoll () 
     chat_poll = new XMLHttpRequest();
     // the chat_req variable is for sending POST data to the server.
     chat_req = new FormData();
     chat_req.append("do", "chatpoll");
     chat_poll.open("POST", "post.php");
     chat_poll.send(chat_req);
     chat_poll.onload = function () 
     // do something here with the chat data
     // repoll the server
     repoll();


repoll();

通过这样做，您可以实现 Facebook 之类的服务器轮询。

---

对于 JavaScript 客户端中的 websocket 示例：

web_socket = new WebSocket("ws://[thesocket]:[theport]");
web_socket.onmessage = function (w) 
     // do something here. this will fire if messages is received from the websocket.
     // you will get the message from w.data variable.
     alert("Data Received: " + w.data);


// to send data to the web socket do this:
web_socket.send("the data you want. I prefer JSON for sending configuration and chat data or XML if you want");

【讨论】：

您好 Gian，我的信息中列出了三个问题。我怀疑您的long polling 系统会一直“挂起”“发送消息”AJAX 请求，所以它不会很流畅。正如我的回答所说，我最终使用websockets；但我仍然想知道我的三个问题的答案。我尝试在没有 JQuery 的情况下使用 XMLHttpRequest，但结果是一样的。谢谢。

1 & 2：jQuery 正在发送标头中的其他信息，这些信息将包含在您的 AJAX 请求中。那是剩下的323B去的地方。 3：删除AJAX请求头应该减少请求大小。这是我知道的全部。对不起。

我又试了XMLHttpRequest，结果和JQuery一样。

var req = new XMLHttpRequest(); req.setRequestHeader("授权", ""); --> 在发送之前尝试这样做。它将删除使用 XMLHttpRequest 发送的标头。

我尝试使用该代码，然后 Danilo Cataldo 写下了她的答案。但不起作用； AJAX 请求具有相同的大小，因为它不会更改标头。

【参考方案3】：

我已经用 jQuery $.post 请求组装了一个简单的页面。它会生成一个请求标头，格式如下：

   POST /post_.js HTTP/1.1

   Host: localhost

   User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0

   Accept: */*

   Accept-Language: it-IT,it;q=0.8,en-US;q=0.5,en;q=0.3

   Accept-Encoding: gzip, deflate

   Content-Type: application/x-www-form-urlencoded; charset=UTF-8

   X-Requested-With: XMLHttpRequest

   Referer: http://localhost/test.html

   Content-Length: 49

   Connection: keep-alive

   Pragma: no-cache

   Cache-Control: no-cache

您可以在 Firefox 上使用 Firebug 或在 Chrome 上使用 F12 查看响应和请求标头。 在我看来，额外的字节是 Http 请求中涉及的。

【讨论】：

嗨，这不能回答我的问题...谢谢。

@tomloprod 怎么没有？额外的 323 个字节来自请求中发送的标头。

@idbehold 嗨。我的信息中有三个问题，Danilo Cataldo 的回答只回答了一个问题（第二点）。另外，我想看看证据证明哪些额外的323 B 来自标题。 （应该根据用户代理调整大小的标题——因为它们有不同的大小——；但不是那样的。）感谢您的评论。

也许固定长度是由于 IPv4 包的大小。 en.wikipedia.org/wiki/IPv4 如果你能说出字节是如何测量的，它会有所帮助。

嗨，我不明白这一点：如果你能说出如何测量字节。你的意思是？谢谢。