Использование API в Javascript

На тестовой странице приведено 3 примера по выборке:

• Законопроектов, рассмотрение которых завершено, зарегистрированных с 01.01.2011 по 31.03.2011;
• Списка действующих комитетов и комиссий;
• Списка действующих депутатов ГД и членов СФ, у которых фамилия начинается на «З».

Рассмотрим первый пример подробнее.

1) Подготовим контейнер под загружаемый контент. Изначально в нем будет отображаться анимированный ajax-бегунок.

<div class="column" id="column-1">
  <div class="ajax"></div>
</div>

2) Подключим javascript-фреймворк jQuery и микро-шаблонизатор. Первый упростит работу с ajax-запросами и отображением результата, а второй позволит формировать результирующие шаблоны и удобно подставлять в них данные.

<!-- Библиотека jQuery и шаблонизатор -->
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/micro_tpl.js"></script>

3) Подготовим шаблон для отображения результата. С синтаксисом шаблонов вы можете ознакомится на сайте шаблонизатора.

<script type="text/html" id="column1_tmpl">
  <h2><b>Ищем:</b> <%=data.wording%></h2>
  <p class="founded">
    <b>Найдено: </b><%=data.count%> 
  </p>

  <h3>Результат поиска:</h3>
  <ul>
  <% for ( var i = 0; i < data.laws.length; i++ ) { %>
    <li>
      <a href="<%=data.laws[i].url%>"><%=data.laws[i].number%></a>. 
      <%=data.laws[i].name%> 
      <i>(внесен на рассмотрение <%=data.laws[i].introductionDate%>, <a href="<%=data.laws[i].transcriptUrl%>">стенограммы обсуждений</a>)</i>      
    </li>
  <% } %>
  </ul>
</script>

4) Подготовим код AJAX-запроса, получения данных, формирования и отображения результата.

var token = "10e644926dae6a63f3fb0a2f47b0e0ac0e544804";

$.ajax({
  "url":  "http://api.duma.gov.ru/api/" + token + "/search.json",
  "data": {
      "status":             6,            // законопроекты, рассмотрение которых завершено
      "registration_start": "2011-01-01", // в датой регистрации
      "registration_end":   "2011-03-31", // с 1 января 2011 по 31 марта 2011
      "limit":              10            // вывести первые 10 найденных законопроектов      
  },
  "dataType": "jsonp",
  "success": function(data) {
    // возникла ошибка, выводим код и сообщение об ошибке
    if (data.code) {
      $(".ajax").remove();
      alert("Error #" + data.code + ": " + data.text);

      return false;
    }

    // отправляем данные в шаблон и получаем конечный html
    var resultHtml = tmpl("column1_tmpl", { data: data });
    // выводим на странице результат
    $("#column-1 .ajax").replaceWith(resultHtml);
  }
});

Данные из API запрашиваются в формате JSONP в силу того, что выполняется кроссдоменный запрос, что запрещено при выполнении классических AJAX-запросов. При этом вызывается метод jQuery.ajax, в котором указывается dataType = jsonp. В остальном при использовании jQuery отличий от обычного AJAX-запроса нет.