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. win7下python2.6如何安装setuptools和pip

    1. 下载 setuptools-0.6c9.tar.gz 下载地址:http://pypi.python.org/packages/source/s/setuptools/setuptools-0. ...

  2. SpringBoot之退出服务（exit）时调用自定义的销毁方法

    我们在工作中有时候可能会遇到这样场景,需要在退出容器的时候执行某些操作.SpringBoot中有两种方法可以供我们来选择(其实就是spring中我们常用的方式.只是destory-method是在XM ...

  3. Boost:shared_memory_object --- 共享内存

    什么是共享内存 共享内存是最快速的进程间通信机制.操作系统在几个进程的地址空间上映射一段内存,然后这几个进程可以在不需要调用操作系统函数的情况下在那段内存上进行读/写操作.但是,在进程读写共享内存时, ...

  4. Charles问题

    1.内容显示乱码 1.1.使用Charles抓包,text显示乱码,note提示如下 SSL Proxying not enabled for this host: enable in Proxy S ...

  5. HBase - Filter - 过滤器的介绍以及使用

    1 过滤器HBase 的基本 API,包括增.删.改.查等.增.删都是相对简单的操作,与传统的 RDBMS 相比,这里的查询操作略显苍白,只能根据特性的行键进行查询(Get)或者根据行键的范围来查询( ...

  6. ueditor 正在读取目录及网络链接错误

    环境 ueditor1_3_5-gbk-net .NET版本3.5 如果把项目直接改成4.0不会出现这样的问题,查看 问题1:正在读取目录 找到ueditor/ueditor.config.js  找 ...

  7. 00008 - crontab定时执行任务命令详解

    linux 系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个系统服务是默认启动的.另 外, 由于使用者自己也可以设置计划任务,所以, ...

  8. （转）区分LTE,EPS,EPC和SAE

    LTE:Long Term Evolution长期演进,是无线接口部分向4G演进的工作项目. 3GPP:The 3Rd Generation Partnership Project,第三代合作伙伴计划 ...

  9. Qt Opengl

    目前在Qt5中做Opengl的学习时候,发现gluPerspective函数没有定义. 1: gluPerspective( 45.0, (GLfloat)width/(GLfloat)height, ...

  10. angularjs中ng-repeat插入图片

    <tr ng-repeat="item in datas" ng-module="datas"> <td> <img class ...