Click here to Skip to main content
15,867,453 members
Articles / Web Development / XHTML
Article

Binary Formats in JavaScript: Base64, Deflate, and UTF8

Rate me:
Please Sign up or sign in to vote.
5.00/5 (11 votes)
15 Jun 2008MIT3 min read 148.9K   1.9K   34   25
This article demonstrates using binary formats in JavaScript.

Introduction

This article demonstrates the using of binary formats in JavaScript code. JavaScript, by its nature, cannot operate with binary data represented as a fragment of memory – as a byte array. That makes it difficult to use community developed algorithms and encodings. A good example is the DEFLATE compressed format. This raises more problems if the JavaScript code has to be run on a web browser: data has to be delivered over HTTP.

In the proposed implementation, a byte array is emulated by a regular JavaScript array of objects. Also, the given implementation tries to solve the problem of binary data transfer to a client-side script. Let’s assume we have DEFLATE compressed data (.NET’s System.IO.Compression namespace, Java’s java.util.zip.*, PHP’s http_deflate) and there is a way to transfer it to the client in BASE64 format.

Using the Code

The deflate.js contains the functions and classes that implement the decompression part of the DEFLATE algorithm (RFC 1951). To use this algorithm, its input has to be presented as a stream of bytes.

JavaScript
// create BASE64 byte stream reader
var reader = new Base64Reader(base64string);

The class exposes the readByte() method that returns the next byte, or -1 if it’s the end of the stream.

JavaScript
// create inflator
var inflator = new Inflator(reader);

The Inflator class, as in the previous class, exposes the readByte() method that returns the next byte from the decompressed byte stream. The binary stream can be consumed at that point.

If regular text is compressed, and it needs to be re-encoded from UTF-8 bytes to characters, we use the Utf8Translator class to retrieve the characters instead of the bytes.

JavaScript
// create translator
var translator = new Utf8Translator(inflator);

The class exposes the readChar() method that returns a one-character string with the next available character, or null to indicate the end of the stream. The deflate.js file also contains UnicodeTranslator and DefaultTranslator.

For convenience, there is the TextReader class that exposes not only the readChar() method, but also the readToEnd() and readLine() methods.

Those functions/classes can be used not only within the web browser's context, but in OS scripting or legacy ASP programming.

The SamplePage.htm, included in the package, displays the RFC 1951 memo content.

Points of Interest

The deflate.js functions will help to perform selective compression of data for AJAX requests. Most of the data transmitted in AJAX operations is text or a textual presentation of the binary data.

Since not all web browsers can retrieve remote data as an array of bytes (as responseBody in IE’s XmlHTTPRequest), BASE64 encoded data has to be transmitted to the client from the server. Even if BASE64 data grows 133% for its original, compression of textual data by 75% will still reduce the amount of data to be stored/transferred.

Emulation of byte array as an array of objects in JavaScript reduces the performance of the solution, e.g., to extract 50K takes 1-2 sec(s) in a web browser context.

RFC 1951, 2779, 2781, and 4648 were used to implement the underlying algorithms. There are well written memos. There are lots of formats based on the open DEFLATE compressed format (e.g., GZIP, PNG, SVGZ, SWF); implementing it in JavaScript gives one more way to access/reuse data.

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
Software Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionDeflating with JavaScript? Pin
Member 1048663624-Dec-13 22:56
Member 1048663624-Dec-13 22:56 
Generalbugs Pin
Member 776065128-Mar-11 13:44
Member 776065128-Mar-11 13:44 
GeneralRe: bugs Pin
Member 74021662-Aug-11 18:35
Member 74021662-Aug-11 18:35 
Questionslight issue with licience, looking for a recommendation Pin
Member 776065122-Mar-11 8:32
Member 776065122-Mar-11 8:32 
AnswerRe: slight issue with licience, looking for a recommendation Pin
Member 74021662-Aug-11 18:40
Member 74021662-Aug-11 18:40 
Questionhow can get char by index? Pin
baihongmei23-Mar-09 23:50
baihongmei23-Mar-09 23:50 
AnswerRe: how can get char by index? Pin
notmasteryet24-Mar-09 12:30
notmasteryet24-Mar-09 12:30 
Generalgot stuck Pin
arun_srajan30-Jan-09 2:26
arun_srajan30-Jan-09 2:26 
GeneralRe: got stuck Pin
notmasteryet30-Jan-09 7:26
notmasteryet30-Jan-09 7:26 
GeneralRe: got stuck Pin
arun_srajan30-Jan-09 18:01
arun_srajan30-Jan-09 18:01 
AnswerRe: got stuck Pin
notmasteryet31-Jan-09 4:24
notmasteryet31-Jan-09 4:24 
GeneralRe: got stuck Pin
arun_srajan31-Jan-09 17:47
arun_srajan31-Jan-09 17:47 
GeneralRe: got stuck Pin
Xyrka25-Jan-10 6:59
Xyrka25-Jan-10 6:59 
Generalinflate and deflate Pin
Mike_One25-Aug-08 6:01
Mike_One25-Aug-08 6:01 
GeneralRe: inflate and deflate Pin
notmasteryet10-Nov-08 6:21
notmasteryet10-Nov-08 6:21 
GeneralRe: inflate and deflate Pin
novhard4-Mar-09 3:01
novhard4-Mar-09 3:01 
GeneralRe: inflate and deflate Pin
notmasteryet5-Mar-09 13:08
notmasteryet5-Mar-09 13:08 
GeneralRe: inflate and deflate Pin
novhard13-Mar-09 4:25
novhard13-Mar-09 4:25 
GeneralRe: inflate and deflate Pin
notmasteryet14-Mar-09 3:38
notmasteryet14-Mar-09 3:38 
AnswerRe: inflate and deflate Pin
henchan7-Jul-09 11:16
henchan7-Jul-09 11:16 
AnswerRe: inflate and deflate [modified] Pin
da05-Dec-10 16:06
da05-Dec-10 16:06 
GeneralRe: inflate and deflate Pin
Grant Shirreffs30-May-11 13:28
Grant Shirreffs30-May-11 13:28 
Generalsimple base64 encoder and decoder Pin
da011-Aug-08 14:58
da011-Aug-08 14:58 
GeneralThank You Pin
jsc4224-Jun-08 22:14
professionaljsc4224-Jun-08 22:14 
Generalexcellent Pin
Huisheng Chen18-Jun-08 23:05
Huisheng Chen18-Jun-08 23:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.