تجزیه و تحلیل ایکس اِم اِل در جیکوئری
یکی از فرمتهای رایج در انتقال اطلاعات، فرمت XML میباشد که با ساختاری مرتب و منظم میتواند اطلاعات طبقهبندی و دستهبندی شده را در خودش نگهداری کند. به علت همین نظمی که در ساختار XML وجود داره، به راحتی میشه که اطلاعات اون رو در جایی دیگر استفاده کرد.
یکی از بارزترین مثالهایی که میشه از استفاده از فرمت XML در انتقال اطلاعات دنیای وب، عنوان کرد، RSS Feed هست. RSS در واقع شکلی از XML به همراه ساختار استاندارد و ثابت میباشد که همین تعریف ساختار یکسان برای اون باعث میشه تا کاربردپذیری اون در وب بسیار بالا باشه. مثلا شما اگر یک برنامه بنویسید که RSS Feed یک سایت رو بخونه، میتونید مطمئن باشید که این برنامه شما هر RSS Feed رو میتونه بخونه چون ساختار این فایلها یکسان هستند.
اگر بخواهید از مطالب موجود در آر اِس اِسِ بخشی از سایت خودتون مثلا وبلاگ سایت، در قسمتی دیگر از سایت استفاده کنید، به طور مثال در قسمت محصولات سایت شرکتی، بخواهید که چند پست آخری که در وبلاگ شرکت نوشتهشده نمایش داده بشه، دو راه پیش رو دارید:
راه اول استفاده از برنامهنویسی سمت سرور برای سایت شماست. برای این کار شما اول نیاز به داشتن دسترسی به سورس سایت و هاست سایت دارید. بعد از فراهم شدن این امکانات، میتوانید RSS وبلاگ را از طریق برنامه نویسی سمت سرور مثلا با استفاده از تکنیک Linq to XML خوانده و به شکل دلخواه بنویسید.
در حالتی که امکانات بیشتری نیاز دارید، باید با ساختار دیتابیس وبلاگ و یا نحوه دسترسی به اطلاعات اون رو از طریق کدنویسی آشنا باشید. مثلا با ASP.Net از دیتابیس وبلاگ (و یا لایه دیتا و یا هر الگوی دیگری که در کدنویسی دارید) پست های آخر رو بخونید و اونها رو توسط مثلا یک Repeater در وب فرم خودتون قرار بدید. مثلا شما از بلاگ انجین دات نت و یا وردپرس برای وبلاگ شرکت در کنار سایت اصلی اون، استفاده کردهاید. برای اینکه در سمت سرور بتونید به پست های وردپرس دسترسی داشته باشید، نیاز به شناخت از API وردپرس و یا هر سیستمی که از اون استفاده کردید، دارید.
راه دوم استفاده از جاوا اسکریپت و در واقع استفاده از برنامه نویسی سمت کلاینت و البته برای سهولت کار استفاده از jQuery هست. ممکن است مدل طراحی رابط کاربری شما، نیازمند استفاده از jQuery باشد و یا اصلا دسترسی به هاست نداشته باشید و یا دچار محدودیتهایی که در روش اول گقته شد، باشید. به هر حال، هر دلیلی که هست، شما نیاز به خواندن RSS به وسیله جاوا اسکریپت در سمت کلاینت دارید.
خواندن XML در jQuery
همونطور که اشاره شد، RSS هم از فرمت XML استفاده میکنه، پس نحوه خواندن XML در jQuery ، خواندن RSS هم در برمیگیره. خواندن فایلهای XML در jQuery بر خلاف جاوا اسکریپت معمولی، بسیار ساده هست. فایل info.xml را به صورت زیر را در نظر بگیرید:
<?xml version="1.0" encoding="UTF-8"?>
<products>
<product>
<productname>Product one</productname>
<productprice>100</productprice>
</product>
<product>
<productname>Product two</productname>
<productprice>200</productprice>
</product>
<product>
<productname>Product three</productname>
<productprice>300</productprice>
</product>
</products>
برای خواندن مطالب این فایل، ابتدا نیاز به دسترسی به این فایل رو داریم. بنابراین یک درخواست برای دسترسی به این فایل به سرور ارسال میکنیم؛ البته document.ready که نشان دهنده آغاز jQuery هست رو فراموش نمیکنیم:
$(document).ready(function() {
$.ajax({
type: "GET",
url: "info.xml",
dataType: "xml",
success: ReadXML
});
});
با استفاده از دستور ajax در jQuery، درخواستی را به سرور ارسال میکنیم تا فایلی که در url مشخص شده است به ما بازگرداند. چون اطلاعاتی را به سرور منتقل نمیکنیم و هدف فقط خواندن هست از متد GET استفاده کرده و نوع مقدار بازگشتی هم که xml هست، توسط dataType مشخص میکنیم و نکته مهم اینکه باید به jQuery، تابعی که قرار است اطلاعات رسیده از سرور رو تجزیه تحلیل کنه، معرفی کنیم. در این مثال، فایل info.xml از سرور گرفته میشود و اطلاعات داخل آن به تابع ReadXML پاس داده میشود.
در این مرحله تمام کار ما با تابع ReadXML خواهد بود. این تابع رو به صورت زیر تعریف میکنیم:
function ReadXML(xmldata) {
$(xmldata).find("product").each(function() {
$("#fromxml").append('<p>' + 'Name: '
+ $(this).find("productname").text()
+ '<br />Price: '
+ $(this).find("productprice").text()
+ '</p>');
});
}
تابع ReadXML داری یک ورودی به اسم xmldata هست که در واقع همان مطالب info.xml هست که از طریق ajax (بخوانیم اِیجکس و نخوانیم آژاکس) به تابع پاس داده میشود و من هم اسم اون رو xmldata گذاشتم. شما هر اسمی خواستید بگذارید!
سادگی کار با xml در jQuery از اینجا شروع میشود که با استفاده از find تگ تگرار شونده رو پیدا میکنیم که در مثال ما product هست. بعد از پیدا کردن تگ تکرارشونده که در واقع همان سرفصل اطلاعات xml هستند، با استفاده از each، یک تابع را به هرکدام از این product ها که در فایل هستند نسبت میدهیم. تابع each را مثل یک حلقه for در برنامهنویسی تصور کنید که ابتدا و انتهای آن در این مثال از اولین تگ product هست تا آخرین.
سپس برای خواندن اطلاعات زیرشاخههای هر product باز هم از find استفاده میکنیم با نسبت دادن آن به this که this در این مثال برمیگردد به آبجکتی که این تابع برای آن نوشته میشود یعنی product و در نهایت با استفاده از قابلیت text مقدار داخل تگهای داخلی را میخوانیم و با استفاده از append به قسمتی از صفحه که تعیین شده، اضافه میکنیم. با استفاده از each، این پروسه برای تمامی product های موجود در فایل، تکرار میشود و در نهایت به هدف خود میرسیم.
نکته: اگر از IE استفاده میکنید، به دلایل نا معلومی، وقتی فایل html نهایی را از روی هارد خود به صورت لوکال باز میکنید، این روش جواب نمیدهد. البته اگر روی وب سرور، چه در لوکال خودتون چه روی اینترنت، امتحان کنید، همه چیز به درستی کار خواهد کرد. برای تست لوکال اگر با فایل html کار میکنید و میخواهید با اجرا کردن فایل با کلیک، کد را تست کنید از فایرفاکس استفاده کنید. اگر هم که از php یا asp و یا هر فرمت تحت سرور دیگری استفاده میکنید که خوب مجبورید فایل رو از طریق وب سرور ببینید و در این صورت اصلا مشکلی شما رو تهدید نمیکنه!
همه چیز با هم به صورت زیر خواهد شد:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Read XML with jQuery</title>
<script type="text/javascript" src="path_to_jquery"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#fromxml").text("loading...");
$.ajax({
type: "GET",
url: "info.xml",
dataType: "xml",
success: ReadXML
});
function ReadXML(xmldata) {
$("#fromxml").empty();
$(xmldata).find("product").each(function() {
$("#fromxml").append('<p>' + 'Name: '
+ $(this).find("productname").text()
+ '<br />Price: '
+ $(this).find("productprice").text()
+ '</p>');
});
}
});
</script>
</head>
<body>
<div id="fromxml"></div>
</body>
</html>
اگر به کد کامل دقت کرده باشید، قبل از ارسال ajax، عبارتی در formxml نوشته میشود تا کاربر در هنگام دیدن این صفحه، متوجه شود که در قسمتی از صفحه، اطلاعاتی در حال لود شدن هست؛ و البته در نهایت، در تابع ReadXML یعنی وقتی که پاسخ درخواست رسیده است، اول formxml زا با استفاده از روش empty خالی میکنیم و سپس اطلاعات خوانده شده و به شکل دلخواه درآمده را در آن قسمت اضافه میکنیم.
در ضمن برای استفاده از کتابخونه اصلی jQuery که در مثال به صورت path_to_jquery آمده است، آدرس دهی مناسب رو یا از روی فایلهای خودتان و یا از طریق CDN انجام دهید. این نکته رو برای این یادآوری کردم چون اگر همین کد را copy-paste کنید، کار نخواهد کرد :دی
به همین ترتیب میتوان RSS را هم در قسمتی از صفحه وب اضافه کرد. تنها تفاوت با نمونه کد نوشته شده، نام تگ های موجود در RSS هست که به سادگی میتوان آن ها را در کد نوشته شده، جایگزین کرد. مثلا در RSS، تگ تکرار شونده item هست و تگ های داخلی اون هم تگ هایی مثل title، description و link هست که این تگ ها رو به سادگی با دیدن سورس RSS سایت خودتون میتونید پیدا کنید.
نکته: در جاوا اسکریپت به علت رعایت مسائل امنیتی، فقط و فقط درخواست ajax باید از فایلهای موجود در دامین مشابه با جایی که درخواست دهنده هست، صورت بپذیرد. مثلا از mytoolbox.ir نمیتوان به styles.ir درخواست فایل RSS را توسط jQuery داد.
برای استفاده از jQuery یرای درخواست های بین دو سایت با دامین مختلف که به اصطلاح به اون Cross Domain گفته میشه، راه های دیگری وجود دارد که در پست های آینده جعبه ابزار به اونها اشاره خواهد شد؛ پس منتظر باشید.
*این مطالب از خودم میباشد! اگر در اون مورد اشتباهی میبینید، ممنون میشم که اعلام کنید و استفاده از این مطلب آزاد هست و اگر دوست دارید با انصاف باشید، منبع رو هم ذکر کنید.