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. 【web】之获取服务器tomcat下webapps目录路径

    String realPath = req.getServletContext().getRealPath("/"); String realPathParent=(new Fil ...

  2. STL基础--流

    流 介绍 // cout: 全局ostream对象,(typedef basic_ostream<char> ostream) // <<: ostream& ostr ...

  3. 在64位平台上的Lucene，应该使用MMapDirectory[转]

    http://blog.thetaphi.de/2012/07/use-lucenes-mmapdirectory-on-64bit.html 从3.1版本开始,Lucene和Solr开始在64位的W ...

  4. Windows 使用windump进行循环抓包

    准备工作 1.下载tcpdump http://www.winpcap.org/windump/  2.下载WinPcaphttp://www.winpcap.org/install/bin/WinP ...

  5. MyBatis 的缓存机制

    缓存机制可以减轻数据库的压力,原理是在第一查询时,将查询结果缓存起来,之后再查询同样的sql, 不是真的去查询数据库,而是直接返回缓存中的结果. 缓存可以降低数据库的压力,但同时可能无法得到最新的结果 ...

  6. 服务容错保护断路器Hystrix之六：缓存功能的使用

    高并发环境下如果能处理好缓存就可以有效的减小服务器的压力,Java中有许多非常好用的缓存工具,比如Redis.EHCache等,当然在Spring Cloud的Hystrix中也提供了请求缓存的功能, ...

  7. spring cglib实现嵌套方法拦截

    使用spring 的拦截器对方法进行拦截,不管是动态代理,还是cglib, 只能拦截到被代理对象的调用方法,对于被调用方法里再调用同一对象里的其他方法就无法拦截到,就是我们说的嵌套拦截,之前文章里提及 ...

  8. 1125 Chain the Ropes （25 分）

    1125 Chain the Ropes (25 分) Given some segments of rope, you are supposed to chain them into one rop ...

  9. [UE4]Is Server判断是否在服务器端

  10. 您真的会修改Active Directory域控制器计算机名称吗

    从我开始做微软这行开始,就经常听说某某公司由于什么原因需要修改Active Directory域控制器计算机名称,但发现好多公司都是直接修改,导致了各种奇葩的问题,今天就给大家推荐一个修改Active ...