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. Vue--基本语法

    Vue语法学习 引入:script的src中导入vue包 创建:在script中创建vue对象 双向绑定: el----选择器,锁定标签 data----定义变量,将标签内容绑定给变量 {{变量}}- ...

  2. WARNING: Package of target [javax.servlet.jsp.jstl.core.LoopTagSupport$1Status@7439e436] or package of member [public int javax.servlet.jsp.jstl.core.LoopTagSupport$1Status.getIndex()] are excluded!

    Struts2爆出045漏洞后,将struts版本升级到了2.3.32.但是在验证时发现有些jstl循环未出现预期的结果. debug发现,数据没有问题,断定是前端页面显示出了问题.根据日志信息WAR ...

  3. CSS3 圆角（border-radius）

    值:半径的长度 前缀 -moz(例如 -moz-border-radius)用于Firefox -webkit(例如:-webkit-border-radius)用于Safari和Chrome. 例1 ...

  4. [转]jvm加载类规则

    jvm包括三种类加载器: 第一种:bootstrap classloader:加载Java的核心类. 第二种:extension classloader:负责加载jre的扩展目录中的jar包. 第三种 ...

  5. Dubbo(3)Dubbo admin管理控制台

    dubbo-admin管理控制台: 可以管理服务,消费,以及其他配置: 在dubbo项目的zip包中有个demo-admin项目,可以打成war包,发布到tomcat运行里面: 我这里将dubbo-a ...

  6. 学习笔记之Python全栈开发/人工智能公开课_腾讯课堂

    Python全栈开发/人工智能公开课_腾讯课堂 https://ke.qq.com/course/190378 https://github.com/haoran119/ke.qq.com.pytho ...

  7. [转][html5]网页横屏

    @@media screen and (orientation:portrait){ body{ transform: rotate(90deg); } } 将以上 CSS 加入网页,可以发现手机上查 ...

  8. es中的一些知识点记录

    1. forcemerge接口 强制段合并,设置为1时,是期望最终只有1个索引段.但实际情况是,合并的结果是段的总数会减少,但仍大于1,可以多次执行强制合并的命令. 设置的的目标值越小.合并消耗的时间 ...

  9. Jmeter（十六）Logic Controllers 之 Runtime Controller

    Runtime Controller-----运行时间控制器:控制其下的Sampler运行时间. 该控制器较为简单,官方文档也没作太多说明.照着Blazemeter写个例子: 运行,查看结果. 可以看 ...

  10. SCCM2012 R2实战系列之五：发现方法

    打开SCCM2012的控制台 点击左侧栏的“管理”选项,然后展开“层次结构配置”,点击“发现方法”来配置客户端发现. 勾选“启用Active Directory林发现”.“发现Active Direc ...