1, 下载 pako.js => https://github.com/nodeca/pako/tree/master/dist
2, 首先需要了解一下 XMLHttpRequest 2.0 => https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
3, 已 GET 请求为例, 红色注释部分为关键步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网络请求获取 GZIP 格式的数据流, 并解析</title>
<script src="../commom/pako.min.js"></script>
</head>
<body>
<div id="box" style="font-size: 30px"></div>
</body>
<script type="text/javascript">
var Ajax = (function () {
var Utf8ArrayToStr = function(array) { // 数据流转化为字符串, 兼容汉字
var out = "", i = 0, len = array.length, char1, char2, char3, char4;
while(i < len) {
char1 = array[i++];
// 当单个字节时, 最大值 '01111111', 最小值 '00000000' 右移四位 07, 00
// 当两个字节时, 最大值 '11011111', 最小值 '11000000' 右移四位 13, 12
// 当三个字节时, 最大值 '11101111', 最小值 '11100000' 右移四位 14, 14
if (char1 >> 4 <= 7) {
out += String.fromCharCode(char1);
} else if (char1 >> 4 == 12 || char1 >> 4 == 13) {
char2 = array[i++];
out += String.fromCharCode(((char1 & 0x1F) << 6) | (char2 & 0x3F));
} else if (char1 >> 4 == 14) {
char2 = array[i++];
char3 = array[i++];
char4 = ((char1 & 0x0F) << 12) | ((char2 & 0x3F) << 6);
out += String.fromCharCode(char4 | ((char3 & 0x3F) << 0));
}
}
return out;
};
return function (url, json, fn) { // 返回一个网络请求方法
var ajax = new XMLHttpRequest(); // 实例化一个 网络请求
url += "?";
for(key in json) {
url += key + "=" + json[key] + "&";
}
url = url.substr(0, url.length - 1);
ajax.open("get", url, true); // 开启一个网络请求
ajax.responseType = "arraybuffer"; // 声明返回的是二进制数据流
ajax.onload = function () {
if(ajax.response) {
var byteArray = new Uint8Array(ajax.response); // 切换数据编码为
byteArray = pako.ungzip(byteArray); // 调用 pako 的方法解压数据
fn(Utf8ArrayToStr(byteArray));
} else {
fn("没有获取到任何数据");
}
};
ajax.send(null); // 发起请求
}
})();
Ajax("../files/gzip.gz", {}, function (ret) {
console.log(ret + "1")
});
Ajax("../files/gzips.gz", {}, function (ret) {
console.log(ret + "2")
});
</script>
</html>