jQueryпозволяет частично снизить нагрузку с сервера на клиентское приложение. К тому же, это может помочь сделать ваше приложение более гибким. Естественно, речь не столько о любительских PHP-скриптах, а о применении обработки данных в мощных приложениях, например, SharePoint, WebSphereи т.п., когда для решения локальной задачи проще обойтись подручными средствами, чем создавать и устанавливать отдельное приложение.

Очень частой задачей является отображение на странице данных, которые были получены из RSSили веб-сервиса. С помощью фреймворка jQueryи небольшого кода можно вывести на страницу содержимое XML-файла.

Для примера возьмем кусок кода из Яндекс.Новости и сохраним его в файле news.xml

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
  <channel>
    <title>Яндекс.Новости: Hi-Tech</title>
    <link>http://news.yandex.ru/computers.html</link>
    <description>
      Первая в России служба автоматической обработки и систематизации новостей. Сообщения ведущих российских и мировых СМИ. Обновление в режиме реального времени 24 часа в сутки.
    </description>
    <image>
      <url>http://company.yandex.ru/i/50x23.gif</url>
      <link>http://news.yandex.ru/computers.html</link>
      <title>Яндекс.Новости: Hi-Tech</title>
    </image>
    <lastBuildDate>11 Aug 2014 21:09:49 +0400</lastBuildDate>
    <item>
      <title>ФАС разрешила «Яндексу» купить портал Auto.ru</title>
      <link>http://news.yandex.ru/yandsearch?cl4url=vev.by%2Fhigh-tech%2F5216-fas-razreshila-yandeksu-kupit-portal-autoru.html</link>
      <description>Федеральной антимонопольной службой России (ФАС) было принято решение об удовлетворение ходатайства IT-компании &amp;quot;Яндекс&amp;quot; о приобретение интернет-ресурса Auto.ru, такая информация появилась на сайте антимонопольного ведомства. Сделка была анонсирована «Яндекс» в прошедшем месяце.</description>
      <pubDate>11 Aug 2014 21:00:51 +0400</pubDate>
      <guid>http://news.yandex.ru/yandsearch?cl4url=vev.by%2Fhigh-tech%2F5216-fas-razreshila-yandeksu-kupit-portal-autoru.html</guid>
    </item>
    <item>
      <title>Данные зондирования Земли в России планируется сделать открытыми</title>
      <link>http://news.yandex.ru/yandsearch?cl4url=ria.ru%2Fscience%2F20140811%2F1019626785.html</link>
      <description>В соответствии с перечнями сведений Минобороны России и Минэкономразвития России, подлежащих засекречиванию, космические снимки, полученные с зарубежных космических аппаратов и российских космических аппаратов гражданского назначения, засекречиванию не подлежат.</description>
      <pubDate>11 Aug 2014 18:44:14 +0400</pubDate>
      <guid>http://news.yandex.ru/yandsearch?cl4url=ria.ru%2Fscience%2F20140811%2F1019626785.html</guid>
    </item>
    <item>
      <title>Роскомнадзор обяжет топ-блогеров указывать возрастную маркировку</title>
      <link>http://news.yandex.ru/yandsearch?cl4url=runews24.ru%2Ftechnology%2F11082014-blogerov-obyazhut.html</link>
      <description>Напомним, что закон о блогерах вступил в силу в Российской Федерации 1 августа текущего года. Данный закон подразумевает внесение популярных блогеров в реестр Роскомнадзора. Кроме того, от них требуется указывать свое настоящее имя и контактную информацию.</description>
      <pubDate>11 Aug 2014 17:29:27 +0400</pubDate>
      <guid>http://news.yandex.ru/yandsearch?cl4url=runews24.ru%2Ftechnology%2F11082014-blogerov-obyazhut.html</guid>
    </item>
  </channel>
</rss>

 

С помощью небольшого кода можно легко разобрать и вывести на страницу содержимое XML-файла.

    <script src="js/jquery-2.1.1.min.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $.get('news.xml', function (d) {
                $('body').append('<h1>Яндекс.Новости</h1>');
                $('body').append('<dl />');
                $(d).find('item').each(function () {
                    var $item = $(this);
                    var title = $item.find('title').text();
                    var link = $item.find('link').text();
                    var description = $item.find('description').text();
                    var pubdate = $item.find('pubDate').text();
                    var hyperlink = '<a href="' + link + '">' + title + '</a>';
                    var html = '<dt> ' + hyperlink + '<br /> ' + pubdate + '<br />' + description + ' </dt>';
                    $('dl').append($(html));
                });
            });
        });
    </script>

 

Javascript, приведенный выше, нужно вставить в коде HTML-страницы, в корректной работы необходимо наличие тэга <body>.