Cross-Domain Proxies and the Browser-Server Dialogue - Real-World Examples of Cross-Domain Proxies

(Page 3 of 4 )

WPLicense

The WPLicense Wordpress plugin (http://yergler.net/projects/wplicense) presents the blogger with some forms to specify their preferred license statement, based on the Creative Commons model. The server is acting as a middleman between the browser and the Creative Commons API (http://api.creativecommons.org/rest/1.0/).

Housing Maps (Craigslist and Google Maps)

Housing Maps (http://housingmaps.com) is a mashup between Google Maps (http://maps.google.com) and Craigslist (http://craigslist.com), a community-oriented classifieds advertising web site. What does that mean? It means you get to see a list of advertised homes on one side and view a map of those homes one the other side, using the familiar Google Maps thumbtacks to pinpoint the locations of the advertised homes. (See Figure 10-11.)

A few features:

• Click on a thumbtack and you'll see a Popup (Chapter 15) balloon appear, showing a summary of the classified ad: price, terms, address, and photos. The balloon contains a hyperlink to the ad at Craigslist
  
• Change a category (e.g., price) and you'll see both the thumbtacks and home lists update. Change the city and you'll see the map change as well.
  
• You can pan and zoom as on Google Maps.
  
  
  

  Figure 10-11.  Housing Maps

Cross-Domain Proxy is used to grab housing data from Craigslist, while the map images are fetched directly from Google's server into the browser.

Bill Gates Wealth Clock

This was not Ajaxian, but noteworthy as the first prominent mashup application and a precursor to the Ajaxian Cross-Domain Proxy pattern. Web guru Philip Greenspun mixed data from several sources to produce a "wealth clock" showing Bill Gates' worth at any time (http://groups-
beta.google.com/group/nf.general/browse_thread/thread/
bc7fc7bfab19937f/88fa32f2cf6dd6bb). This is no longer working, unfortunately (http://rhea.redhat.com/bboard-archive/webdb/0006ad.html), but the code is still available (http://philip.greenspun.com/seia/examples-basics/wealth-clock.tcl.txt). See Figure 10-12.

Figure 10-12.  Bill Gates Wealth Clock

The price per stock was extracted from Yahoo! Finance. The number of stocks in Gates' portfolio came from Microsoft reports (it was not automatically extracted). And the U.S. population came from the U.S. Census Bureau.

Here's what Greenspun said back in 2001 (http://philip.greenspun.com/teaching/teaching-software-engineering):

(M)any of the most interesting and challenging problems of the coming decades will center around the Internet and Web as a distributed computing environment. An "island" site such as amazon.com or photo.net is probably less representative of the future than http://www.webho.com/WealthClock (Bill Gates Personal Wealth Clock).

Another prominent usage of Cross-Domain Proxying in "Web 1.0" was meta-searching, as performed by crawlers such as MetaCrawler.com (http://metacrawler.com). Again, all the work was done in the server, and the browser response was usually opened while the results came back to the server, so at least some information could be shown while requests were still out.

CPaint library

CPaint (http://cpaint.sourceforge.net/:) is a Web Remoting (Chapter 6) library. A special "proxy" URL can be established (http://cpaint.sourceforge.net/doc/frontend.class.cpaint.set_ proxy_url.html), pointing to a proxy on the originating server, so that remoting to external domains has virtually the same API as to the originating server.

Code Example: WPLicense

See the Code Example in Live Form (Chapter 14) for a full background on the WPLicense's license selection process, but here's a quick summary:

1. A field lets the user select a license type (e.g., Creative Commons versus Public Domain versus Sampling).
   
2. Once the license type is chosen, its immediately sent to the server, and the server responds with a form consisting of questions relevant to this particular type. If the license is Creative Commons, for example, one of the questions is "Allow commercial uses of this work?"
   
3. Each time the user changes one of the license options, the server updates some hidden fields. These fields will be uploaded to the server, to be persisted when the user eventually submits the form.

What all this glosses over is the Cross-Domain Proxy pattern that goes on behind the scenes. At each of these three stages, the server is actually interacting with CreativeCommons.org via its public API (http://api.creativecommons.org/rest/1.0/), which you can read about at http://api.creativecommons.org. The plugin provides a clean separation between web server logic and cross-domain mediation: a separate PHP file ( ccwsclient.php ) hosts several API facade operations, accepting and returning data structures in standard PHP style. This client in turn delegates all the XML infrastructure stuff to a third-party library MiniXML, at http://minixml.psychogenic.com.

Let's now zoom in on the three steps.

1.  Retrieving license types

The server doesn't have the license types hardcoded. Instead, it retrieves them via a web service. This is the core of the Cross-Domain Proxy functionality--the PHP function fs will retrieve content from the specified URL:

  $WS_ROOT = http://api.creativecommons.org/rest/1.0/;   ...
  $xml = file_get_contents($WS_ROOT);

In fact, you can see exactly what's pumped into $xml by visiting http://api.creativecommons.org/rest/1.0/, and then choose View Page Source. Alternatively, use a command-like application such as curl ( curl http://api.creativecommons.org/rest/1.0/  ), which yields the following XML (reformatted):

  <licenses>
    <license id="standard">Creative Commons</license>
    <license id="publicdomain">Public Domain</license>
    <license id="recombo">Sampling</license>  
  </licenses>

Once we know what license types are available, it's a matter of transforming the XML into an HTML selector. XSLT could be used here, but it's just as easy to do it manually:

  foreach($license_classes as $key => $l_id) {
    echo '<option value="' . $key . '" >' . $l_id . '</option>';
  };

2. Retrieving license questions

Presenting the questions gets interesting, because the server must now present questions and accept answers without the programmer knowing in advance what those questions will be.

Browser requests for license questions invoke a URL that depends on the user's chosen license type. If the license type is Creative Commons, which has the ID "standard," the URL is http://api.creativecommons.org/rest/1.0/license/standard/. Visit that URL, and you'll see the questions and possible answers. For example:

  <field id="derivatives">
    <label xml:lang="en">Allows modifications of your work?</label>    
    <description xml:lang="en">The licensor permits others to copy, distribute and            perform only

unaltered copies of the work, not derivative works based on it.</description>     <type>enum</type>
    <enum id="y">
      <label xml:lang="en">Yes</label>    
    </enum>
    <enum id="sa">
      <label xml:lang="en">ShareAlike</label>    
    </enum>
     <enum id="n">
      <label xml:lang="en">No</label>    
    </enum>
  </field>

Equipped with all that information about each question, the server must now transform it into an HTML selector. Ultimately, a loop is used to traverse the entire data structure and generate a selector for each field:

  foreach ($fields as $f_id=>$f_data) {
    $result .= '<tr><th><nobr> ' . $f_data['label'] . '</nobr></th><td>';
    // generate the appropriate widget    
    if ($f_data['type'] == 'enum') {      
      $result .= '<select class="lic_q" id="'.$f_id.'" lic_q="true" size="1">';       foreach ($f_data['options'] as  $enum_id=>$enum_val) {
      $result .= '<option value="'. $enum_id . '">' . $enum_val . '</option>';       } // for each option
      ...

As explained in the Live Form (Chapter 14) discussion, this new form HTML is directly placed onto a div.

3. Handling user answers

The Creative Commons' issueLicense web service accepts XML input of all the license criteria, and then outputs a document containing a URL for the license criteria, along with some other, related information. In a similar manner to the previous code, all of this information is transformed into HTML. This time, it's used to populate several fields, rather than generate any new input fields.

Next: Alternatives to Cross-Domain Proxies >>
 

More JavaScript Articles
More By O'Reilly Media

Comments On: Cross-Domain Proxies and the Browser-Server Dialogue

· This article is an excerpt from the book "Ajax Design Patterns," published by...   >>> Post your comment now!

Buy this book...

This article is excerpted from chapter 10 of the book Ajax Design Patterns, written by Michael Mahemoff (O'Reilly, 2006; ISBN: 0596101805). Check it out today at your favorite bookstore. Buy this book now.