下面的HTML/JS测试页面将LZ压缩内容(一个HTML表)上传到PHP测试脚本,该脚本将上传的内容返回到浏览器。
使用如图所示的HTML,返回的内容
不
匹配发送的内容。但是,如果您对HTML进行一些小的更改(例如,将单词“HELLO”更改为“HEADING”,或删除thead),它就会起作用。
在这两种情况下(即,比较结果为真或假),字符看起来是相同的,并通过差异检查器。
我没有检查
LZString.compressToBase64()
因为我希望有更好的压缩效果。
<html>
<head>
<title>LZ-String Test</title>
<style>
table {border-collapse: collapse;}
th, td {border: 1px solid black;}
</style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script>
<script>
var content = `
<table>
<thead>
<tr>
<th>HELLO</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
</tr>
</tbody>
</table>
`;
$(document).ready(function() {
var formData = new FormData();
var compressedContent = LZString.compress(content);
formData.append("fileContent", compressedContent);
$.ajax({
type: "POST",
url: "test.php",
data: formData,
cache: false,
processData: false,
contentType: false
}).done(function(data) {
var result = JSON.parse(data);
if (result.result == "success") {
$("body").append("<p>This is the html I compressed:<br>" + content + "</p>");
$("body").append("<p>This is what I sent to the server:<br>" + result.received + ".</p>");
$("body").append("<p>This is what I received from the server:<br>" + result.received + ".</p>");
$("body").append("<p>Using ===, what was sent matches what was returned is " + (compressedContent === result.received) + ".</p>");
$("body").append("<p>Using localCompare, what was sent matches what was returned is " + (compressedContent.localeCompare(result.received) === 0) + ".</p>");
}
});
});
</script>
</head>
<body></body>
</html>
<?php
$content = $_REQUEST["fileContent"];
echo json_encode(array ("result" => "success", "received" => $content));
?>
