nb.io / CSSHttpRequest

CSSHttpRequest is cross-domain AJAX using CSS.

  • Cross-browser—supports IE6+, Firefox 2+, Safari 3+, iPhone
  • 100% JavaScript—no Flash required
  • Small—2.4KB minified

Like JavaScript includes, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. CSSHttpRequest functions similarly to JSONP, and is limited to making GET requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the context of the calling page.

A request is invoked using the CSSHttpRequest.get(url, callback) function:

    CSSHttpRequest.get(
        "http://www.nb.io/hacks/csshttprequest/hello-world/",
        function(response) { alert(response); }
    );

Data is encoded on the server into URI-encoded 2KB chunks and serialized into CSS rules with a modified data: URI scheme. The selector should be in the form #c<N>, where N is an integer index in [0,]. The response is decoded and returned to the callback function as a string:

    #c0 { background: url(data:,Hello%20World!); }
    #c1 { background: url(data:,I’m%20text%20encoded%20in%20CSS!); }
    #c2 { background: url(data:,I%20like%20arts%20and%20crafts.); }

CSSHttpRequest * is open source under an Apache License (Version 2.0).

* Or as Eric refers to it, AJACSS (slightly more electro).

Examples