جعبه ابزار

<< Cross Domain Javascript | jQuery Plugins >>

jQuery Cross Domain RSS Reader

28. February 2010

خواندن آر اِس اِس فید سایتهای دیگر با استفاده از جی کوئری

jqueryrss در سری مطالب قبلی، چگونگی استفاده از فرمت XML و متد JSONP برای خواندن فایلهای موجود در سایتهای دیگر از طریق جاوا اسکریپت را دیدیم. برای کار با JSONP نیاز هست که سرور مورد نظر از این روش پشتیبانی کند. حالا فرض کنید می‌خواهید RSS Feed سایتهای انتخاب شده رو در وبلاگ یا وب‌سایت خودتون نشون بدید. البته با استفاده از جاوا اسکریپت در سمت کلاینت!

به صورت مستقیم نمیتونید آدرس یک RSS Feed را در صفحه خود بخوانید مگر اینکه اون فید، مربوط به دامین خودتون باشه. در اکثر موارد هم سایتهای مختلف برای تشکیل خروجی RSS خودشون از JSONP پشتیبانی نمیکنند. پس چه باید کرد؟

تبلیغات: سفارش خرید The Smashing Book در ایران؛ کلیک کنید.

ارسال درخواست به سایتها و دامین‌های دیگر از طرف برنامه نویسی سمت سرور مثل ASP.Net مشکلات حالت جاوا اسکریپت را ندارد و محدود نیست. بنابراین برای خواندن RSS های دیگران، میتوانیم با برنامه سمت سرور، آنها را بخوانیم و سپس مطالب خوانده شده را به سمت کلاینت منتقل کنیم. در واقع در این روش، از سایت خود به عنوان یک واسطه بین جاوااسکریپت و سایت مورد نظر استفاده میکنیم و در سمت کلاینت، فرمت XML را که از سرور و دامین خودمان رسیده میخوانیم، بنابراین دیگر محدودیت Cross Domain وجود ندارد.

علاوه بر روش بالا، میتوان از Google API هم استفاده کرد. یکی از API های گوگل، فید خوان گوگل هست که در واقع یک پیوندی هست بین شما و RSS Feed سایت مورد نظر؛ یعنی همان کار واسطه را انجام میدهد. کاری که API فید خوان گوگل انجام میدهد بسیار مورد پسند jQuery هست چرا که از JSONP پشتیبانی میکند و فقط کافیست به آدرس مشخص شده از این API، از جی کوئری یک درخواست getJSON داده شود تا گوگل فید را در سرور خودش خوانده و نتیجه را با فرمت JSON برای ما می‌فرستد.

برای استفاده از این API فقط کافیست یک درخواست به آدرس زیر فرستاده شود. به جای آدرس فید نوشته شده، شما هر آدرسی که بنویسید، فید مورد نظر را با فرمت تبدیل شده به JSON تحویل میگیرید. برای تعیین تعداد فیدهای برگشتی هم باید متغیر num رو تغییر بدید. در این مطلب، از RSS Feed سایت iDevCenter، قسمت لینکهای تازه ارسال شده، برای مثال استفاده میشه و درخواست 2 مقدار شده است:

http://ajax.googleapis.com/ajax/services/feed/load?
v=1.0&callback=?&q=http://www.idevcenter.com/links/upcoming/feed/&num=2

این آدرس رو اگر در مرورگر خودتون بنویسید، پیغام خطا میگیرید. چون برای تابع برگشتی JSONP اسم تعیین نشده (متغیر callback) و به جای آن ؟ گذاشته شده. به جای علامت سوال، هر اسمی که دوست دارید بنویسید و نتیجه رو مشاهده کنید. این که چرا از ؟ استفاده میشه، در ادامه متوجه خواهید شد.

حالا با jQuery یک درخواست به این آدرس میدهیم. در جی‌کوئری تابع getJSON برای گرفتن پاسخ به فرمت JSON استفاده میشود به این صورت که آدرس مورد نظر را به آن پاس داده و نامی برای تابع برگشتی از JSONP تعیین نمیکنیم (callback) و علامت سوال ؟ به جای آن میگذاریم. علت استفاده از ؟ این است که برای سادگی کار، خود jQuery در هر درخواستی که ارسال میکند یک نام به صورت تصادفی برای این تابع انتخاب کند و ما دیگر درگیر نام تابع نشویم.

برای خواندن این تابع، چون نام آن را نمیدونیم، از این روش استفاده میشه که در خود getJSON یک تابع را به صورت داینامیک و بدون اسم تعریف کرده و برای آن یک ورودی در نظر میگیریم. به این صورت، جی‌کوئری خودش میاد یه تابع با اسم رندوم درست میکنه، اون رو به جای ؟ پاس میده و بعد تابع برگشتی رو مرتبط میکنه با این تابع بدون اسمی که نوشتیم و مقدار بازگشتی با فرمت JSON به ورودی این تابع پاس داده میشه:

var googleapi = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&";
var feedurl = "http://www.idevcenter.com/links/upcoming/feed/";
var num = 2
var fullurl = googleapi + "q=" + feedurl + "&num=" + num;
$.getJSON(fullurl, function(data){

//data is the RSS Feed converted to JSON
}

یک نمونه فرمت JSON رو که از گوگل API برمیگرده و توسط jQuery در متغیر data قرار داده میشه، در کد زیر ببینید. به نام تابع که به صورت رندوم توسط jQuery ایجاد شده دقت کنید.

jsonp1267359064813(
    {"responseData":
        {"feed":
            {"title":"iDevCenter Upcoming Links",
             "link":"http://www.idevcenter.com/links/upcoming/",
             "entries":[
                 {
                  "title":"\u202bسیستم\u200cهای متن\u200cباز مشابه StackOverflow",
                  "link":"http://www.idevcenter.com/link/1156/",
                  "author":"lajevardi",
                  "publishedDate":"Fri, 26 Feb 2010 03:19:08 -0800"
                 },
                 {
                  "title":"\u202bطراحی برنامه یا سایت تحت وب با استفاده از فونت های ویندوز",
                  "link":"http://www.idevcenter.com/link/1153/",
                  "author":"hajloo",
                  "publishedDate":"Thu, 25 Feb 2010 00:34:11 -0800"
                }
             ]
            }
        },
        "responseDetails": null,
        "responseStatus": 200
    }
)

هر چه که داخل تابع jsonp1267359064813 برمیگردد، توسط جی کوئری، به متغیر data که در تابع getJSON معرفی کردیم، پاس داده می‌شود. مقدار data در واقع همون RSS Feed سایت idevcenter هست که توسط سویس گوگل به JSON تبدیل میشه و به تابع ما پاس داده میشه. بنابراین در حال حاضر، اطلاعاتی که نیاز داشتیم رو داریم، حالا باید اون رو بخونیم و در صفحه بنویسیم.

خوندن فرمت JSON در جاوااسکریپت خیلی ساده هست. فقط کافیه ساختار درختی JSON رو شناسایی کنید و سپس به صورت سلسله مراتبی، به قسمت های مختلفش دست پیدا کنید. مثلا برای رسیدن به آدرس وب سایت مربوط به فید، باید این مسیر را طی کنید: responseData.feed.link و برای رسیدن به عنوان مورد دوم در فید ها به این صورت responseData.feed.entries[1].title عمل میکنیم.

در JSON آرایه ها در [ ] قرار میگیرند و entries هم یک آرایه از فید های سایت هست که در این مثال تعداد 2 فید برگشت داده شده است. برای بیشتر شدن فید های ارسالی، مقدار num را در API گوگل تغییر بدهید. برای خواندن entries از یک حلقه for استفاده میکنیم و مقادیر هر فید رو در قسمتی از html که تعیین کردیم مینویسیم.

for(var i=0; i<responseData.feed.entries.length; i++){
    var entry = responseData.feed.entries[i];
    var feedtitle = entry.title;
    var feedlink= entry.link;
    var feeddate= entry.publishedDate;
    // add variables to html

}

در مدل کار ما، تمامی این اطلاعات با فرمت JSON داخل متغیر data ریخته میشود. بنابراین شروع ساختار JSON از data میشود. در زیر کد کامل این مثال رو میتونید ببینید. در این مثال، از Google CDN برای استفاده از JQuery استفاده شده. (در مورد CDN بیشتر بخوانید)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jQuery RSS Reader</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>

<body>
<script type="text/javascript">
$(function() {
    var googleapi = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&";
    var feedurl = "http://www.idevcenter.com/links/upcoming/feed/";
    var num = 5
    var fullurl = googleapi + "q=" + feedurl + "&num=" + num;
    $.getJSON(fullurl, function(data){
        //Website title
        var webtitle;
        webtitle = data.responseData.feed.title;
        //Website Link
        var weblink;
        weblink = data.responseData.feed.link;

        $("#feeds").html("<div><b><a href=\"" + weblink + "\">" + webtitle + "</a></b></div>");
        for(var i=0; i<data.responseData.feed.entries.length; i++){
            var entry = data.responseData.feed.entries[i];
            $("#feeds").append("<div><a href=\"" + entry.link + "\">" + entry.title + "</a></div>" );
        }
    });

});
</script>

</body>

</html>

این مطلب به صورت اختصاصی برای وبلاگ جعبه ابزار نوشته شده است. استفاده از این مطلب به شرط ذکر منبع، آزاد می‌باشد.

دسته بندی موضوعی: jQuery
برچسب ها: jquery - cross domain - xml - rss - json - جی کوئری

Cross Domain Javascriptبه علت یک سری مسایل امنیتی و امکان استفاده های نادرست و غیرقانونی، مرورگرهای اینترنتی از طریق جاوا ا...Parse XML in jQueryیکی از فرمت‌های رایج در انتقال اطلاعات، فرمت XML می‌باشد که با ساختاری مرتب و منظم می‌تواند اطلاعات ...jQuery in Plain Persian - Part 1jQuery به زبان خیلی ساده، مجموعه ای از دستورات و توابعی هست که با جاوا اسکریپت نوشته شده و داخل یک ف...

Comments