خیلی از ما روزانه سایت‌های زیادی را بررسی می‌کنیم. روند انجام این کار هم معمولا به این صورت است که تک‌تک سایت‌ها را بالا می‌آوریم و شروع به خواندن مطالب جدید آن سایت می‌کنیم. به غیر از آن دسته افرادی که بازکردن تک‌تک سایت‌ها بخشی از سرگرمی روزانه‌ی آن‌ها را تشکیل می‌دهد، برای بقیه‌ی افراد، تنها مطالعه‌ی مطالب اهمیت دارد. خیلی وقت‌ها هم نگرانی از بابت هدر رفتن پهنای باند وجود دارد که صرف چند عدد تبلیغ مزاحم می‌شود که حتی خواندن متن را هم مشکل می‌کنند. جدا از این مسائل، گاهی هم نیاز داریم تا از اطلاعات خروجی یک سایت برای ساخت اطلاعات جدید استفاده کنیم (مثلا ساخت نمودار).
rss راه حلی بود که برای رفع این نیازها پا به عرصه گذاشت.

RSS چیست؟

در یک تعریف ساده، rss را می‌توان به عنوان خلاصه‌ی اطلاعات سایت در نظر گرفت که با فرمت XML ارائه می‌شود. کد زیر مثالی از rss استاندارد را نشان می‌دهد.

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
 <title>RSS Title</title>
 <description>This is an example of an RSS feed</description>
 <link>http://www.example.com/main.html</link>
 <lastBuildDate>Mon, 06 Sep 2010 00:01:00 +0000 </lastBuildDate>
 <pubDate>Sun, 06 Sep 2009 16:20:00 +0000</pubDate>
 <ttl>1800</ttl>

 <item>
  <title>Example entry</title>
  <description>Here is some text containing an interesting description.</description>
  <link>http://www.example.com/blog/post/1</link>
  <guid isPermaLink="true">7bd204c6-1655-4c27-aeee-53f933c5395f</guid>
  <pubDate>Sun, 06 Sep 2009 16:20:00 +0000</pubDate>
 </item>

 <item>
  <title>Example entry2</title>
  <description>Here is some text containing an interesting description.2</description>
  <link>http://www.example.com/blog/post/2</link>
  <guid isPermaLink="true">7bd204c6-1655-4c27-aeee-53f933c53960</guid>
  <pubDate>Sun, 06 Sep 2009 17:20:00 +0000</pubDate>
 </item>

</channel>
</rss>

• در خط اول، نوع سند (xml) را مشخص کردیم.
• خط ۲ تا ۹ هم معمولا به همین شکل به کار برده می‌شوند و فقط اطلاعات درون هر tag تغییر می‌کند.
• اگر فرض کنیم قرار است پست‌های سایت را در rss قرار دهیم، خط ۱۱ تا ۱۷ یکی از پست‌ها را مشخص میکنند. اگر قرار باشد تعداد بیشتری پست را در rss قرار دهیم، برای هر پست این چند خط را تکرار می‌کنیم و فقط اطلاعات درون tagها را تغییر می‌دهیم.

* دقت کنید که به صورت استاندارد باید tagهای title, link, description را برای هر item تعریف کنیم؛ یعنی مثلا برای نمایش هر پست در rss باید title و link آن پست را مشخص کرده و توضیحی راجع به آن یا بخشی از متن آن را نیز در rss قرار دهیم. ولی در استفاده از بقیه tagهای موجود در هر item، اجباری وجود ندارد.

بعد از آشنایی با مفهوم rss، نوبت به استفاده از آن می‌رسد که در این بخش قرار است با استفاده از rssی که بانک مرکزی در اختیار کاربران قرار می‌دهد، نرخ ارز را در مرورگر خود نمایش دهیم.

استفاده از RSS بانک مرکزی

برای استفاده از rss هر سایت، سه مرحله را باید طی کنیم. در مرحله‌ی اول اطلاعات را با استفاده از آدرس rss سایت می‌خوانیم. در مرحله‌ی بعد، این اطلاعات که به فرمت xml هستند را به فرمتی تبدیل می‌کنیم که کار با آن راحت تر باشد. در مرحله‌ی آخر این اطلاعات را با ظاهر دلخواه در مرورگر نمایش می‌دهیم.

۱- دریافت اطلاعات

آدرس rss مربوط به هر سایت معمولا در صفحه‌ی اول سایت مورد نظر قرار داده شده است؛ ولی به عنوان راه ساده تر می‌توانیم اسم سایت مورد نظر به همراه عبارت rss را جستجو کنیم و آدرس rss را به دست آوریم (البته اگر rss برای سایت مورد نظر تعریف شده باشد). برای مثال، لینک rssهایی که بانک مرکزی در اختیار ما قرار می‌دهد را می‌توانیم در این آدرس ببینیم. در این آموزش از rss مربوط به “آخرین نرخ ارزهای مرجع” استفاده می‌کنیم که در این آدرس قابل مشاهده است.

بعد از اینکه آدرس rss را پیدا کردیم، با استفاده از Ajax این اطلاعات را دریافت می‌کنیم. برای این‌کار از کتابخانه‌ی jquery کمک می‌گیریم.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

به دلیل اینکه ایجاد درخواست ajax مستقیمی که خطای CORS ایجاد نکند کار مشکلی است، از ابزار کمکی دیگری به اسم yql استفاده می‌کنیم.

کد زیر مربوط به فرآیند دریافت اطلاعات rss مورد نظر است:

var site = 'http://www.cbi.ir/ExRatesRss.aspx';

var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + site + '"') + '&format=xml&callback=?';

$.getJSON(yql, function(data){

});

• آدرس rss مورد نظر را در متغیر site که در خط اول قرار دارد می‌ریزیم.
• نیازی به تغییر خط سوم نداریم. کاری که این خط کد انجام می‌دهد این است که آدرس rss را به عنوان آرگومان سایت دیگری (yahoo) قرار می‌دهد تا فرآیند دریافت اطلاعات از طریق آن سایت انجام بگیرد.
• خط‌های ۵ تا ۷ هم وظیفه‌ی ارسال درخواست ajax را برعهده دارند.

۲- تبدیل اطلاعات به فرمت قابل استفاده

اطلاعاتی که کد بالا در اختیار ما قرار می‌دهد در قالب xml است. برای اینکه این اطلاعات را به راحتی بتوانیم در جاوااسکریپت به‌کار ببریم، از کتابخانه‌ای استفاده می‌کنیم تا xml دریافتی ما را به object تبدیل کند. کتابخانه‌ی xml2json که از این آدرس قابل دریافت است این کار را برای ما انجام می‌دهد.

بعد از فراخوانی این کتابخانه، با استفاده از کد زیر می‌توانیم xml را به object تبدیل کنیم:

var x2js = new X2JS();
var jsonObj = x2js.xml_str2json( data.results[0] );

کدی که تا اینجای کار نوشتیم به شکل زیر است:

var site = 'http://www.cbi.ir/ExRatesRss.aspx';

var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + site + '"') + '&format=xml&callback=?';

$.getJSON(yql, function(data){
    var x2js = new X2JS();
    var jsonObj = x2js.xml_str2json( data.results[0] );
});

3- نمایش اطلاعات

با طی کردن مراحل قبلی، اطلاعات مورد نیاز را از سایت بانک مرکزی دریافت کردیم. برای مرحله‌ی آخر که نمایش این اطلاعات در صفحه‌ی مرورگر است نیاز به کمی CSS داریم. کد زیر مربوط به قسمت style صفحه می‌شود:

body {
    direction: rtl;
    }

.item {
    height: 40px;
    line-height: 40px;
    border-bottom: solid 1px #AAA;
    }

.item-category {
    width: 200px;
    line-height: 40px;
    float: right;
    margin-left: 16px;
    }

کد زیر از روی لیستی که در اختیار داریم elementهای مورد نیاز را ساخته و به صفحه اضافه می‌کند.

var items = jsonObj.rss.channel.item;
for (var i = 0; i < items.length; i++) {
    var div = document.createElement('div');
    div.classList.add('item');
    document.body.appendChild(div);

    var div2 = document.createElement('div');
    div2.classList.add('item-category');
    div2.setAttribute('title', items[i].title);
    div2.innerHTML = items[i].category;
    div.appendChild(div2);

    div2 = document.createElement('div');
    div2.classList.add('item-description');
    div2.innerHTML = items[i].description;
    div.appendChild(div2);
}

کد بالا برای هر item، یک div می‌سازد که خود شامل دو div دیگر برای نمایش نام و قیمت ارز است. برای اطلاعات بیشتر راجع‌به ساخت element توسط جاوااسکریپت می‌توانید از این لینک استفاده کنید.

کد کامل کارهای انجام شده در این مقاله به صورت زیر است:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style type="text/css">
            body {
                direction: rtl;
                }

            .item {
                height: 40px;
                line-height: 40px;
                border-bottom: solid 1px #AAA;
                }

            .item-category {
                width: 200px;
                line-height: 40px;
                float: right;
                margin-left: 16px;
                }
        </style>

        <script src="jQuery-min.js" charset="utf-8"></script>
        <script src="xml2json.min.js" charset="utf-8"></script>
        <script type="text/javascript">
            var site = 'http://www.cbi.ir/ExRatesRss.aspx';

            var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + site + '"') + '&format=xml&callback=?';

            $.getJSON(yql, function(data){
                var x2js = new X2JS();
                var jsonObj = x2js.xml_str2json( data.results[0] );
                
                var items = jsonObj.rss.channel.item;
                for (var i = 0; i < items.length; i++) {
                    var div = document.createElement('div');
                    div.classList.add('item');
                    document.body.appendChild(div);

                    var div2 = document.createElement('div');
                    div2.classList.add('item-category');
                    div2.setAttribute('title', items[i].title);
                    div2.innerHTML = items[i].category;
                    div.appendChild(div2);

                    div2 = document.createElement('div');
                    div2.classList.add('item-description');
                    div2.innerHTML = items[i].description;
                    div.appendChild(div2);
                }
            });
        </script>
    </head>
    <body>

    </body>
</html>

نتیجه‌ی این کد چیزی شبیه به شکل زیر می‌شود. نام و قیمت هر ارز نمایش پیدا کرده و با نگه‌داشتن اشاره‌گر روی هر کدام، اطلاعات اضافه مربوط به آن نمایش داده می‌شود.