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>

HTML5 实现获取 gzip 压缩数据，并进行解压，同时解决汉字乱码，相关 pako.js的更多相关文章

  1. 浏览器提示ERR_CONTENT_DECODING_FAILED，Gzip压缩数据无法解压

    最近在页面上有个显示数据表格的功能,数据由后台传给前台JS表格插件.数据格式为JSON 由于数据量很大,就想到用GZIP压缩以后传给前台.压缩前,某个表格的数据量达到3M多,用GZIP压缩后就200K ...

  2. 接口接收gzip压缩数据并解压

    asp.net 接收前端gzip 压缩后的数据,接收端需要进行解压 public string GetResponseBody(HttpWebResponse response) { string r ...

  3. 使用Gzip压缩数据，加快页面访问速度

                 在返回的json数据量大时,启用Gzip压缩,可以提高传输效率.下面为Gzip压缩对json字符串压缩并输出到页面的代码. 一.代码 /** 向浏览器输出字符串响应数据,启用 ...

  4. http数据包解析碰到gzip压缩格式的解压

    其中在做http数据包临控时碰到gzip压缩格式,在网友发布的一些技术文章基础上,经过一段时间的研究.调试,终于解析成功.现将核心代码公布于此,希望能够和大家一起共同学习交流.注:以下代码需要依赖zl ...

  5. Python—HTTP处理Gzip压缩数据

    HTTP 请求中包含Accept-encoding: gzip头信息可以告诉服务器,如果它有任何新数据要发送给我时,请以压缩的格式发送.如果服务器支持压缩,它将返回由 gzip 压缩的数据并且使用Co ...

  6. spring boot 过滤器实现接收 压缩数据 并解压

    1.新加类GzipRequestWrapper 继承HttpServletRequestWrapper类 public class GzipRequestWrapper extends HttpSer ...

  7. java对 zip文件的压缩和解压(ant解决中文乱码)

    说明: 1.对于压缩的文件,当文件名称是中文时,若使用JDK API中自带的类(java.util.zip.ZipEntry; java.util.zip.ZipOutputStream;)进行压缩, ...

  8. java GZIP 压缩数据

    package com.cjonline.foundation.cpe.action; import java.io.ByteArrayInputStream; import java.io.Byte ...

  9. 《C# 爬虫 破境之道》：第二境 爬虫应用 — 第三节：处理压缩数据

    续上一节内容,本节主要讲解一下Web压缩数据的处理方法. 在HTTP协议中指出,可以通过对内容压缩来减少网络流量,从而提高网络传输的性能. 那么问题来了,在HTTP中,采用的是什么样的压缩格式和机制呢 ...

随机推荐

  1. 申请免费通配符证书(Let's Encrypt)并绑定IIS

    申请免费通配符证书(Let's Encrypt)并绑定IIS 2018-05-25 18:01 by Giant Liu, 800 阅读, 4 评论, 收藏, 编辑 什么是 Let’s Encrypt ...

  2. 胖子哥的大数据之路（7）- 传统企业切入核心or外围

    一.引言 昨天和一个做互联网大数据(零售行业)的朋友交流,关于大数据传统企业实施的切入点产生了争执,主要围绕两个问题进行了深入的探讨: 问题1:对于一个传统企业而言什么是核心业务,什么是外围业务? 问 ...

  3. 蓝桥杯-四阶幻方（DFS）

    标题:四阶幻方 把1~16的数字填入4x4的方格中,使得行.列以及两个对角线的和都相等,满足这样的特征时称为:四阶幻方. 四阶幻方可能有很多方案.如果固定左上角为1,请计算一共有多少种方案. 比如: ...

  4. 关于“最小的K个数”问题

    从一堆无序的数中(共n个数)找到最小的K个数,这也算是一道比较经典的题目了,关于这道题目的解法,一般有几种: 方法1:先对所有的数据进行排序,然后直接找出前K个数来,即最小的K个数.时间复杂度为O(N ...

  5. apk重签名方法

    转载(http://www.51testing.com/?uid-115892-action-viewspace-itemid-223023) 1.      生成Android APK包签名证书 1 ...

  6. Python类方法、静态方法与实例方法 -----类里面不需要实例化参数 和没带self的函数 调用此函数的方法

    来源: https://www.cnblogs.com/blackmatrix/p/5606364.html 静态方法是指类中无需实例参与即可调用的方法(不需要self参数),在调用过程中,无需将类实 ...

  7. blog决定不用二级域名，改为二级目录

    看了一篇文章,受益匪浅,到底是用二级域名还是二级目录?已转载到得闲佬设计. 分析了一下得闲佬设计的因素,因为得闲佬设计是小站,流量很小,而且更新文章频率也不大,没必要把流量分出去做一个独立的站点 所以 ...

  8. HDOJ 2002 计算球体积

    #include<cstdio> #define PI 3.1415927 int main() { double r; while (scanf_s("%lf", & ...

  9. docker构建tomcat镜像

    下载centos镜像 # docker pull daocloud.io/centos:7 [root@localhost ~]# docker pull daocloud.io/centos: : ...

  10. 【原创】重装Windows系统后Android studio无需重装，直接迁移

    每次重装Windows系统后重装各种开发环境让人苦不堪言,比如VS2013 +补丁,没有个小半天根本搞不定! 对与Android的开发者,同样安装JDK+Android Studio + Adnroi ...