The Magical Source of YUI Get's Power

October 3, 2008. Filed under javascript 18 yui 2

I've been using the Yahoo! User Interface Library at work recently, and have developed a newfound respect for it. Previously my impression of YUI was that it was heavy and awkward (note that I had never actually used it, so this impression was based on equal parts of general atmosphere and absolutely nothing). Basically, my complaint with YUI was that it wasn't jQuery. I still prefer jQuery in many ways, but it's much more a matter of tradeoffs rather than a clear dominance (I find YUI's Event library is more flexible than jQuery's, but jQuery's chaining methods is a win when doing dom traversals).

But I'm not here to talk about jQuery versus YUI. I'm here to talk about something in YUI that is either bewildering or amazing. I'm here to talk about the Yahoo.util.Get component.

First, a bit of a pop quiz. Go look at the Get source and try to figure out how it accomplishes the impossible: it dynamically loads content from other domains without using an XMLHttpRequest or proxying through a local server.

I'll be waiting.

A picture of Kamioka in the winter.

I had a project I was working on, and wanted to take advantage of this genius magic that somehow bypassed the XMLHttpRequest restrictions on cross site requests. All I wanted to do was grab a text file from a server. Something magical enough to load scripts and css remotely must be able to handle something like that no sweat.

Wrong. Wrong. Wrong.

I browsed the code trying to figure out how it was requesting the data. What mythical tool was accomplishing this transfer of data? After about an hour of great confusion and even greater failure, I finally figured it out.

The library is retrieving scripts and css by injecting link and script tags into the DOM, which causes the browser to download the additional files. It blows my mind that this works.