在现代web应用开发中，xmlhttprequest (xhr) 作为实现客户端与服务器端异步通信的核心技术，扮演着至关重要的角色。它允许网页在不重新加载整个页面的情况下与服务器交换数据，从而提升用户体验。然而，当需要发送多个请求或处理复杂的实时数据流（如键盘事件记录）时，如何高效地管理请求状态、整合数据并确保数据传输的可靠性，便成为开发者面临的挑战。不恰当的实现可能导致数据丢失、竞态条件或服务器负载增加。
问题分析：原始实现中的潜在缺陷原始代码旨在记录用户按键（'w', 'a', 'd', 's'）并定时发送至服务器。然而，其keylog.send方法存在几个关键问题：
-
条件判断过于严格：
if (!keylog.sending && keylog.cacheW.length != 0) { // ... }此条件语句要求keylog.sending为false（表示当前没有请求正在发送）并且keylog.cacheW数组中必须有数据。这意味着，如果用户只按了'a'、'd'或's'键，而没有按'w'键，即使其他缓存中有数据，数据也不会被发送。这导致了数据发送的遗漏。
-
sending标志管理不当： 代码为每个键（W, A, D, S）创建了独立的XMLHttpRequest对象并发送。在每个xhr.onload回调中，都将keylog.sending设置为false：
xhrW.onload = function() { keylog.sending = false; }; xhrA.onload = function() { keylog.sending = false; }; // ...当四个请求几乎同时发出时，第一个完成的请求会立即将keylog.sending设为false。这可能导致在其他请求尚未完成时，setInterval触发的下一次keylog.send调用会发现keylog.sending为false，从而启动新的请求批次。这不仅可能导致竞态条件，使得数据处理逻辑混乱，也可能在服务器端造成处理负担，因为它无法保证前一批次的数据已完全接收。
多请求的低效性： 为四个相关的数据集创建四个独立的FormData对象和四个XMLHttpRequest实例，并发送到同一个PHP脚本，这种方式效率较低。每次请求都会产生额外的HTTP开销，增加了网络延迟和服务器处理的复杂性。
解决上述问题的最佳实践是将所有相关的键盘数据整合到一个结构中，并通过一个XMLHttpRequest发送。这不仅简化了客户端逻辑，减少了网络开销，也使得服务器端处理更加集中和高效。
JavaScript客户端实现我们将修改keylog.send方法，将所有缓存的按键数据合并到一个JavaScript对象中，然后将其序列化为JSON字符串，并通过单个XMLHttpRequest发送。
var keylog = {
// (A) SETTINGS & PROPERTIES
cacheW: [], // TEMP STORAGE FOR KEY PRESSES
cacheA: [],
cacheD: [],
cacheS: [],
delay: 500, // HOW OFTEN TO SEND DATA TO SERVER
sending: false, // ONLY 1 UPLOAD ALLOWED AT A TIME
// (B) INITIALIZE
init: function() {
// (B1) CAPTURE KEY STROKES
window.addEventListener("keydown", function(evt) {
if (evt.key == "w") {
keylog.cacheW.push(evt.key);
} else if (evt.key == "a") {
keylog.cacheA.push(evt.key);
} else if (evt.key == "d") {
keylog.cacheD.push(evt.key);
} else if (evt.key == "s") {
keylog.cacheS.push(evt.key);
}
});
window.addEventListener("keyup", function(evt) {
if (evt.key == "w") {
keylog.cacheW.push("!" + evt.key);
} else if (evt.key == "a") {
keylog.cacheA.push("!" + evt.key);
} else if (evt.key == "d") {
keylog.cacheD.push("!" + evt.key);
} else if (evt.key == "s") {
keylog.cacheS.push("!" + evt.key);
}
});
// (B2) SEND KEYSTROKES TO SERVER
window.setInterval(keylog.send, keylog.delay);
},
// (C) AJAX SEND KEYSTROKES
send: function() {
// 检查是否有任何数据需要发送
if (!keylog.sending && (keylog.cacheW.length !== 0 || keylog.cacheA.length !== 0 || keylog.cacheD.length !== 0 || keylog.cacheS.length !== 0)) {
keylog.sending = true; // 锁定，直到本次批次发送完成
// (C1) 整合所有按键数据
var allKeysData = {
keysW: keylog.cacheW,
keysA: keylog.cacheA,
keysD: keylog.cacheD,
keysS: keylog.cacheS
};
// 清空缓存，准备接收新的按键
keylog.cacheW = [];
keylog.cacheA = [];
keylog.cacheD = [];
keylog.cacheS = [];
// (C2) 创建 FormData 对象并添加整合后的数据
var formData = new FormData();
// 将 JavaScript 对象转换为 JSON 字符串，然后添加到 FormData
formData.append("allKeys", JSON.stringify(allKeysData));
// (C3) AJAX 发送
var xhr = new XMLHttpRequest();
xhr.open("POST", "index4.php");
xhr.onload = function() {
keylog.sending = false; // 请求完成后解锁
if (xhr.status >= 200 && xhr.status < 300) {
// console.log("数据发送成功:", this.response);
} else {
// console.error("数据发送失败:", this.status, this.statusText);
// 可以在此处实现重试逻辑或错误通知
}
};
xhr.onerror = function() {
keylog.sending = false; // 发生网络错误时解锁
// console.error("网络错误，数据发送失败。");
};
xhr.send(formData);
}
}
};
window.addEventListener("DOMContentLoaded", keylog.init); 关键改动点：
- 条件判断优化： if (!keylog.sending && (keylog.cacheW.length !== 0 || ...)) 确保只要有任何缓存区有数据，就会尝试发送。
- 数据整合： 创建一个allKeysData对象，将所有按键缓存作为其属性。
- JSON序列化： 使用JSON.stringify将allKeysData对象转换为JSON字符串，这是前后端交换复杂数据结构的常用且推荐方式。
- 单一FormData和XMLHttpRequest： 只创建一个FormData实例，将JSON字符串作为单个字段allKeys添加。然后使用一个XMLHttpRequest实例发送。
- sending标志的正确管理： keylog.sending仅在一个xhr.onload或xhr.onerror回调中被重置，确保整个数据批次发送完成或失败后才允许新的发送。
- 错误处理： 添加了xhr.onerror回调以处理网络错误，并根据xhr.status判断请求成功与否。
服务器端需要相应地修改，以接收单个allKeys参数，并使用json_decode解析JSON字符串，然后处理其中的数据。
<?php
// 检查 POST 请求中是否存在 'allKeys' 参数
if (isset($_POST['allKeys'])) {
$json_data = $_POST['allKeys'];
$data = json_decode($json_data, true); // 将 JSON 字符串解码为关联数组
if ($data === null && json_last_error() !== JSON_ERROR_NONE) {
// JSON 解析失败
error_log("JSON decoding error: " . json_last_error_msg());
http_response_code(400); // Bad Request
echo "Error: Invalid JSON data.";
exit;
}
// 从解码后的数据中提取各个按键数组
$keysW = $data['keysW'] ?? [];
$keysA = $data['keysA'] ?? [];
$keysD = $data['keysD'] ?? [];
$keysS = $data['keysS'] ?? [];
// 定义文件路径
$keylogFiles = [
'W' => 'player2KeylogW.txt',
'A' => 'player2KeylogA.txt',
'D' => 'player2KeylogD.txt',
'S' => 'player2KeylogS.txt'
];
// 写入文件函数
function writeKeylogToFile($filename, $keysData) {
$fileHandle = fopen($filename, "a") or die("Unable to open file: " . $filename); // 使用 "a" 模式追加内容
// 确保写入的是可读的格式，例如每行一个按键事件，或者再次 JSON 编码整个数组
foreach ($keysData as $keyEvent) {
fwrite($fileHandle, $keyEvent . "\n"); // 写入每个按键事件并换行
}
// 也可以选择将整个数组再次 JSON 编码后写入一行：
// fwrite($fileHandle, json_encode($keysData) . "\n");
fclose($fileHandle);
chmod($filename, 0755); // 设置文件权限
}
// 分别处理并写入文件
if (!empty($keysW)) {
writeKeylogToFile($keylogFiles['W'], $keysW);
}
if (!empty($keysA)) {
writeKeylogToFile($keylogFiles['A'], $keysA);
}
if (!empty($keysD)) {
writeKeylogToFile($keylogFiles['D'], $keysD);
}
if (!empty($keysS)) {
writeKeylogToFile($keylogFiles['S'], $keysS);
}
echo "Keylog data processed successfully.";
} else {
http_response_code(400); // Bad Request
echo "Error: 'allKeys' parameter is missing.";
}
?> 关键改动点：
- 接收单个参数： 服务器只期望接收一个名为allKeys的POST参数。
- JSON解码： 使用json_decode($_POST['allKeys'], true)将接收到的JSON字符串解析为PHP关联数组。
- 错误检查： 增加了对json_decode返回值的检查，确保JSON解析成功。
- 数据提取： 从解码后的数组中安全地提取keysW、keysA等数据，使用?? []操作符避免因缺少键而报错。
- 文件写入模式： 将fopen的模式从"w"（覆盖写入）改为"a"（追加写入），以保留历史记录。
- 文件写入格式： 示例中将每个按键事件写入一行，以提高可读性。
- 权限设置： 确保文件权限在写入后得到正确设置。
- 错误处理： 在客户端和服务器端都应实现健壮的错误处理机制。客户端应处理网络错误、超时以及服务器返回的错误响应。服务器端应验证输入数据，并提供清晰的错误信息。
- 数据格式约定： 客户端和服务器端应就数据交换格式（如JSON）达成一致。JSON是Web API中最常用的数据格式之一，因为它易于解析和生成。
-
安全性：
- 服务器端输入验证： 永远不要信任来自客户端的数据。服务器端必须对接收到的所有数据进行严格的验证和清理，以防止恶意输入（如代码注入、路径遍历等）。
- 文件权限： chmod的使用应谨慎，给予文件必要的最小权限。
- 用户体验： 避免频繁发送空数据。在keylog.send中，我们已经增加了判断是否有数据需要发送的逻辑。
- 异步与同步： XMLHttpRequest是异步的。这意味着send()方法会立即返回，而不会等待服务器响应。所有依赖服务器响应的逻辑都应放在onload或onreadystatechange回调中。
- FormData与JSON： 当发送复杂数据结构时，将数据JSON.stringify后通过FormData的单个字段发送，或直接设置Content-Type: application/json并发送JSON字符串，都是推荐的做法。后者通常更适用于纯API交互。
通过对键盘事件记录案例的分析和优化，我们学习了在XMLHttpRequest场景下，如何有效地管理多个请求的状态和整合数据。核心思想是将分散的数据统一到一个请求中发送，这不仅解决了原始代码中条件判断和sending标志管理不当的问题，还提高了数据传输的效率和可靠性。在实际开发中，理解并应用这些优化策略，能够帮助我们构建更健壮、更高效的Web应用程序。
以上就是优化XMLHttpRequest数据发送：解决多请求状态管理与数据整合问题的详细内容，更多请关注知识资源分享宝库其它相关文章！
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。