Чтобы вам было более понятно, с чем мы имеем дело, покажу некоторые примеры запросов.

Получение последних записей из твиттера

Этот запрос просто выбирает последние записи пользователя, id которого указывается в условии where (в данном случае аккаунт твиттера мой – http://twitter.com/ischenko ):

select * from twitter.user.timeline where id='ischenko'

Пост в твиттер

В начале запроса мы подключаем таблицу twitter.status.xml, которая позволяет добавлять записи в твиттер – это так называемая Открытая таблица данных (Open Data Table). Кроме того для выполнения запросов CRUD нужно использовать защищенное соединение (https):

use 'http://www.yqlblog.net/samples/twitter.status.xml';
insert into twitter.status (status,username,password) values ("Playing with INSERT UPDATE and DELETE in YQL", "ischenko","****************")

Поиск в Flickr изображений, содержащих в названии "Cat"

select * from flickr.photos.search where text="Cat" limit 10

Выборка пяти последних новостей BBC

Здесь нужные данные выбираются при помощи xpath из веб страницы с указанным url (в данном случае это news.bbc.co.uk). Количество возвращаемых данных ограничиваем при помощи команды LIMIT:

SELECT * FROM html WHERE url='http://news.bbc.co.uk' AND xpath="//*[@id='livestats200']//ul[contains(@class,'popstoryList')]/li/a" LIMIT 5

Теперь о том, где и как эти запросы выполнить и как получать результат. Выполнить запрос можно по следующему адресу: http://query.yahooapis.com/v1/public/yql. В качестве параметров нужно указать следующее: q – запрос, format – тип возвращаемых данных – XML, JSON, JSONP, callback – функция, в которую будут “обернуты” возвращаемые данные (для работы с JavaScript), причем это касается не только JSON, но и XML. Также для некоторых таблиц необходимо указывать параметр env (в том случае, если вы явно не используете директиву USE) – в этом параметре указвыется среда выполнения, например: env=http://datatables.org/alltables.env.

Пример запроса, который выполняет выборку из Delicious последних записей с тегом JavaScript:
http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20delicious.feeds.popular%20where%20tag%3D%27javascript%27&format=xml&env=http%3A%2F%2Fdatatables.org%2Falltables.env.

Также запросы можно выполнять в специальной консоли. В ней очень удобно проверять выполнение запросов, также там содержится множество примеров и большой список доступных таблиц данных.

Теперь остановимся на вопросе использования YQL из JavaScript. Мне кажется, что самый простой вариант это использование JSONP, ибо, как я уже писал выше, YQL запрос поддерживает параметр callback, в который вставляется результат. Реализацию такого подхода я нашел на сайте Джеймса Пэдолси:

// YQL serves JSONP (with a callback) so all we have to do
// is create a script element with the right 'src':
function YQLQuery(query, callback) {
    this.query = query;
    this.callback = callback || function(){};
    this.fetch = function() {

        if (!this.query || !this.callback) {
            throw new Error('YQLQuery.fetch(): Parameters may be undefined');
        }

        var scriptEl = document.createElement('script'),
            uid = 'yql' + +new Date(),
            encodedQuery = encodeURIComponent(this.query.toLowerCase()),
            instance = this;

        YQLQuery[uid] = function(json) {
            instance.callback(json);
            delete YQLQuery[uid];
            document.body.removeChild(scriptEl);
        };

        scriptEl.src = 'http://query.yahooapis.com/v1/public/yql?q='
                     + encodedQuery + '&format=json&callback=YQLQuery.' + uid;
        document.body.appendChild(scriptEl);

    };
}

Используйте его так:

// Составлям запрос
var query = "select * from rss where url='feeds2.feedburner.com/ajaxian' limit 1";

// Создаем обработчик
var callback = function(data) {
    var post = data.query.results.item;
    alert(post.title);
};

// Создаем экземпляр класса
var ajaxianPosts = new YQLQuery(query, callback);

// Выполняем запрос
ajaxianPosts.fetch();

Если вы любите работать с jQuery, то можете воспользоваться следующим простым плагином:

$.YQL = function(query, callback) {

    if (!query || !callback) {
        throw new Error('$.YQL(): Parameters may be undefined');
    }

    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';

    $.getJSON(url, callback);
};

// Использование
$.YQL("select * from rss where url='feeds2.feedburner.com/ajaxian' limit 1", function(data) {
    var post = data.query.results.item;
    alert(post.title);
});

Ну и как обычно, напоследок демо пример, в котором я использую показанный выше плагин для получения и обработки RSS потока сайта Ajaxian. Надеюсь вам понравится такой способ работы с данными

Так вот, чтобы обойти это ограничение поступали следующим образом – динамически создавали и добавляли в документ новый тег <script>, который подгружал скрипт с нужными данными:

<script src="/some/url/here" type="text/javascript"></script>

При динамической подгрузке данных нужно выполнять callback, а для этого в конец подгружаемого скрипта добавляем вызов этой функции. В общем, получаемый от сервера скрипт может выглядеть следующим образом:

var data = {
    one : "12",
    two : "34"
}

someCallback(data);

Если в указанном выше примере не объявлять переменную data, а сразу поместить её в вызов someCallback, то получим то, что сейчас стали называть JSONP:

someCallback({ one : "12",  two : "34" });

В данный момент некоторые популярные сервисы поддерживают как JSON, так и JSONP. Типичным примером является API для поиска от YAHOO. Чтобы получить данные от сервера в виде JSON, мы указываем параметр output=json:

http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&query=finances&format=pdf&output=json

Теперь, чтобы получить данные в виде JSONP, просто добавляем название функции-callback, в которую будут “завернуты” возвращаемые данные. Указанная выше ссылка будет выглядеть так:

http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&query=finances&format=pdf&output=json&callback=loadit

По этой ссылке сервер вернет следующие данные:

loadit({"ResultSet":{"type":"web","totalResultsAvailable":22600000,"totalResultsReturned":10, ... } });

Теперь, короткий пример получения и обработки формата JSONP:

<html>
<head>
<script type="text/javascript">

// callback
function loadit(data) {
  // работаем с данными
  if (!data) {
    return;
  }

  var oTotal = document.getElementById("total");
  oTotal.innerHTML = data.ResultSet.totalResultsAvailable;
}

// здесь будет ссылка на новый элемент script
var oElem = null;

function sendJSONP(url, callback) {
  if (!url || !callback)
    return;

  url += '&callback='+callback;

  // выполняем запрос JSONP
  if (oElem) {
    oElem.parentNode.removeChild(oElem);
  }

  oElem = document.createElement('script');
  oElem.setAttribute('type','text/javascript');
  document.getElementsByTagName('head')[0].appendChild(oElem);
  oElem.setAttribute('src', url);
}

window.onload = function(){
  document.getElementById("searchBtn").onclick = function(){
    var query = document.getElementById("query").value;
    sendJSONP('http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&query='+encodeURIComponent(query)+'&output=json', 'loadit');
  }
}
</script>
</head>
<body>
<input type="text" name="search" value="" id="query" /><input type="button" value="Искать" name="s" id="searchBtn"/>
<div id="total"></div>
</body>
</html>

Этот скрипт работает следующим образом: пользователь вводит в поле поиска искомую фразу и нажимает на кнопку “Искать”. Из возвращаемых результатов поиска мы выделяем значение общего количества результатов totalResultsAvailable и показываем это значение в элементе <div id=total>. Запрос к серверу выполняется в функции sendJSONP, которая принимает 2 параметра – url и callback.

В библиотеке jQuery имеется встроенная поддержка формата JSONP. При использовании этого фреймворка, нет нужды самому код, который добавляет тег SCRIPT в DOM. Всё, что нужно будет сделать, это изменить URL, чтобы указать jQuery, что выполняется JSONP запрос. Заканчивая URL вопросительным знаком, мы даем jQuery понять, что получаемые данные будут в формате JSONP. Не нужно также и указывать название функции обработчика. Пример:

<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
var baseurl = 'http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&output=json&query='

function search() {
     var search = $("#search").val()
     console.log(search)
     var surl = baseurl + escape(search) + '&callback=?'
     $.getJSON(surl, function(data) {
          var res = '<h1>Search for '+search+'</h1>'
          res += '<p>There were '+data.ResultSet.totalResultsAvailable+' results.</p>'
          for(var i=0; i<data.ResultSet.Result.length; i++) {
               var result = data.ResultSet.Result[i]
               var resultStr = '<img src="'+result['Thumbnail']['Url']+'" align="left">';
               resultStr += '<a href="'+result['ClickUrl']+'">'+result['Title']+'</a><br clear="left"/>'
               res+=resultStr
           }
          $("#result").html(res)
      })
}
$(document).ready(function() {
     $("#searchBtn").click(search)
});

</script>
</head>

<body>
    <input type="text" name="search" id="search"> <input type="button" value="Search" id="searchBtn">
    <div id="result"></div>
</body>
</html>

Этот пример для работы с jQuery позаимствован на InsideRIA.

Поддержка JSONP скоро будет доступна и в Mootools. В данный момент она уже есть в версии 1.3rc1. Выглядит это так:

new JsonP('http://api.cnet.com/restApi/v1.0/techProductSearch', {
    data: {
        partTag: 'mtvo',
        iod: 'hlPrice',
        iewType: 'json',
        results: '100',
        query: 'ipod'
    },
    onComplete: myFunction.bind(someObject)
}).request();

На мой взгляд гораздо понятнее и проще, чем чудеса с вопросительными знаками в jQuery