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. g++编译后中文显示乱码解决方案(c++)

    g++编译后中文显示乱码解决方案   环境:Windows 10 专业版 GCC版本:5.3.0 测试代码: 1 #include <iostream> 2 using namespace ...

  2. Device Tree碎碎念

    首先推荐elinux.org上一篇关于Device Tree的文章: http://elinux.org/Device_Tree_Usage 这是一篇关于Device Tree的入门文章.对英文犯怵的 ...

  3. 发现TCP的一种错误----客户端连接失败（10055错误号）

    在客户端连接7302TCP端口失败,关闭程序,启动sockettool也不行,出现错误号为 10055(发现队列满了或者空间不足).通过查网上资料,发现有两个方法:设置 ( TcpTimedWaitD ...

  4. PAT 甲级 1006 Sign In and Sign Out (25)（25 分）

    1006 Sign In and Sign Out (25)(25 分) At the beginning of every day, the first person who signs in th ...

  5. vue之v-for

    vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对 ...

  6. springboot工程添加404页面

    首先在/src/main/resources下创建文件夹/public/error 在文件夹里创建html页面,jsp页面不可以. <html> <body> <img ...

  7. get和post的解析

    get 直接获取数据 post 将数据发送到服务端缓存下来,当无法缓存数据或用户输入未知字符时用post, get:常用于数据 post:不想缓存数据,不再浏览器中缓存数据,在服务端可以,因为取数据及 ...

  8. IP段，ASN与BGP之间的关系

    概览 IP段就是类似于1.0.2.0-1.0.2.255或者1.0.2.0/24的形式 ASN(Autonomous system number)自治系统编号 BGP(Border Gateway P ...

  9. 2012 - AD GC全局编录服务器(Global Catalog)

    普通域控制器只记录本域对象的信息,而GC全局编录服务器则不仅记录本域所有对象的只读信息,还记录林中所有其他域中部分域对象的只读信息.   GC全局编录服务器作用: 1,存储对象信息副本,提高搜索性能: ...

  10. 2012 - AD FSMO操作主机角色 -- 作用

    林范围:(林中唯一) 架构主机角色(Schema Master) 定义所有域对象属性 域命名主机角色(Domain Naming Master) 控制域林内域的添加或删除(必须为GC)   域范围:( ...