fredagsrapporter kod

Yahoo! Query Language

peter / 27.feb.2009

YQL gör det möjligt att hämta data från en mängd olika källor med ett SQL-liknande frågespråk. Man kan även använda det för sina egna applikationer.

Yahoo! kallar det:

A “mediator service” that enables developers to query, filter, and combine data across Yahoo! and beyond.

“YQL går att beskriva som ett API för den publika webben”

Exempel

YQL Fråga

SELECT url,title,abstract FROM search.web WHERE query="pizza"

REST URL (Returnerar JSONP)

12	http://query.yahooapis.com/v1/public/yql?q=select%20url%2Ctitle%2Cabstract%20from%20search.web%20where%20query%3D%22pizza%22&format=json&callback=?

Ersätt det avslutande frågetecknet med din callback-metod. Om du använder jQuery kommer den att sköta det åt dig.

Kod

Övningsuppgiften på gårdagens Athegatorsdag bestod i att man med data returnerat av en YQL sökning på Flickr samt jQuery skulle skapa ett bildgalleri.

Ett enkelt exempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Latest images tagged Athega</title>
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script>
    <script type="text/javascript">
      // We don't want any conflicts
      jQuery.noConflict();
      
      // SELECT * FROM flickr.photos.search 
      // WHERE text='Athega' LIMIT 8
      var query = 'http://query.yahooapis.com/v1/public/yql?q=' + 
                  'select%20*%20from%20flickr.photos.search%20' +
                  'where%20text%3D%22Athega%22%20limit%208' +
                  '&format=json&callback=?';
      
      // Get the data
      (function($) {
        $.getJSON(query, function(yql) {
          $.each(yql.query.results.photo, 
          function(index, photo) {
            // Build the url
            photo.url = 'http://farm' + photo.farm + 
                        '.static.flickr.com/' + photo.server + 
                        '/' + photo.id + '_' + photo.secret + '_s.jpg';
            
            // Create and append the img to the #images div
            $('<img />').attr({ 
              src: photo.url, 
              title: photo.title
            }).appendTo('#images');
            
          });
        });
      })(jQuery);
    </script>
    <style type="text/css">
      #images {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div id="images"></div>
  </body>
</html>