alilg
Member
این آموزش برای برنامه نویسانی که آشنایی کافی با مقدمات ajax دارند تنظیم شده است!
در صورتیکه هنوز با ajax اشنا نشده اید به این تاپیک وب سایت خود را بر پایه ajax بسازید. قسمت اول برای آماتورها مراجعه نمائید
پس شما برنامه نویس وب عزیز الان میتونید با javascript دستوری بنویسید که محتویات یک Url رو دریافت و نمایش بدید. یا به اصطلاح build and ajax http request
این مقدار از ارسال و دریافت برای قسمت های مختلف ها وب سایت ها مانند فرم های ثبت نام, فرم های ارتباط با ما و امثالهم کافی بوده و نیاز شما رو برآورده خواهد کرد.
ولی تصور کنید قصد نوشتن یک برنامه webDesktop یا webTop یا Rich Desktop Application مانند سرویس GMail گوگل رو داشته باشید. مصلما نرم افزار های وب دسکتاپ باید تا حدودی محیط پردازش پایه خد هم باشد! ساده ترین نرم افزار وب دسکتاپ شما نیاز به ارسال و دریافت ده ها نوع اطلاعات مختلف و از یکدیگر تفکیک شده میباشند! در این حالت استفاده از ajax http request و دریافت اطلاعات از طریق صفحات html برای شما ممکن نخواهد بود!
در این حالت برنامه نویس میتواند از XML استفاده کرده و اطلاعات خود را بر این اساس پردازش نماید! ( شکل شماره 1 )
قــــــــــــــــــــــــرمـــــــــــز
1. شامل یک رشتـــــــه اطلاعات که میتوانید شامل صد ها خط کد یک صفحه HTML و یا تنها یک عدد یا یک کلمه باشد که در صورت یک String مقــــدار بیشتر نخواهد بود!
2. یک بسته اطلاعات به فرمت XML - XSLT یا XPath میباشد که نیاز به شکافتن و پردازش دارد که میتوانید شامل بینهایت String جدا از یکدیگر, بینهایت Integer باشد.
آبـــــــــــــــــــــــــــــــــــی
1. برابر با مقدار 1 قرمز
2. آبجکت xml که آماده پردازش برای موتور مروگر شده باشد.
مرورگر اینترنت اکسپلرر بوسیله یکی از نسخه های Microsoft XML DOM که عبارتند از Microsoft.XmlDom MSXML2.DOMDocument MSXML2.DOMDocument.3.0 MSXML2.DOMDocument.4.0 MSXML2.DOMDocument.5.0 و یا ورژن جدیدتر قادر به پردازش اطلاعات درون یک آبجکت ایکس ام ال میباشد
و مرورگر های خانواده Mozilla نظیر firefox توسط xml dom inspectoری که در این نوع مرورگر وجود داره...
3 و 4 هر کدام دارای مقادیر جداگانه ای میباشند! برای مثال A میتواند عدد 2008 باشد و مقدار B میتواند شامل 12 خط خبر جدید برای نمایش در قسمتی از سایت باشد.
همینطوری مقدار C میتواند محتوی تعداد کاربران آنلاین سایت و مقدار E محتوی درجه حرارت امروز پایتخت باشد.
و به همین شکل...
5. مقدار X بجز مقادیری که از attrible های خود ذخیره کرده, 2 مقدار دیگر را بعنوان زیر مجموعه همراه دارد ( با array اشتباه نشود )
6. مانند 3 یا 4 آبی
توضیح تصویر شماره 1
در قسمت بالایی تصویر شما نتیجه درخواستی رو مشاهده میکنید که برای یک url فرستاده و دریافت شده.
ینی یکبار استفاده از دستورات آجاکس بارگذاری انتقال دریافت و همه اینها فقط برای 1 مقدار!
ولی در قسمت پایین با دریافت یک بســـــــــته XML ما تنها با یک درخواســــــــــــــت ajax صبحت بیشتر از 12 مقدار جدا از یکدیگر شده ایم!!!
ارزش استفاده از XML OBJECT در ســـــــــــرویسی مانند سرویس GMail نمایان میشود!
وقتی وارد ایمیل خود در سایت Gmail میشود اگر دقت کرده باشید در بالای باکس شما خبرهای امروز نمایش داده میشوند که هر چند لحظه یکبار تغییر میکنند و خبر جدیدتری را بنمایش میگذارد!
در سمت چپ راست مسنجـــــــر گوگل تالک شما نمایش داده میشود و درصورتیکه پیامی برای شما ارسال شده باشد نمایش داده میشود!
همینطور در صورتیکه ایمیل جدیدی دریافت کنید به لیست میل های شما اضافه خواهد شد.
جیمیل هر چند ثانیه یکبار فقط یک درخواست AJAX بسمت سرور خود میفرستد و در همان یک ارسال همه اطلاعات مورد نیاز پنل شما از قبیل خبرهای جدیدی دنیا, پیام های ارسال شده برای شما در مسنجر, ایمیل های ارسال شده جدید و... رو در یک بسته XSTL دریافت میکند! و بنمایش میگذارد!
وب سایت www.meebo.com نمونه دیگری از استفاده از دریافت و پردازش اطلاعات از طریق آجاکس در بسته های XML میباشد.
خواندن اطلاعات XML (تصــــویر شماره 2) دریافت شده توسط AJAX در مرورگرهای ie و ff ( تصویر شماره 3 )
تصــــــویر شماره 2
تصـــــویر شماره 3
روش خواندن اطلاعات در مرورگر اینترنت اکسپلرر و فایرفاکس متفاوت میباشد.
مرورگر های خانواده mozilla توانایی خواندن اطلاعات XML رو بحمض دریافت توسط ajax دارند ( قسمت شماره 3 - تصویر 3)
ولی در مرورگر اینترنت اکسپلرر ابتدا نیاز هست توسط یکی از نسخه های اکتیوایکس Microsoft.XmlDom یک آبجکــــــــــــــــت xml خالی از اطلاعات بسازیم (قسمت شماره 1 - تصویر شماره 3) و سپس اطلاعاتی که توسط ajax دریافت کردیم رو به اون وارد کنیم ( قسمت شماره 2 - تصویر شماره 3 )
پس از آماده خواندن کردن اطلاعات دریافتی توسط ajax که در این بخش با نام standard_xml_data از آن در تصویر یاد کردیم اطلاعات ما آماده خواندن در مرورگر اینترنت اکسپلرر و فایرفاکس شده است.
در قسمت شماره 4 - تصویر شماره 3 مقـــــــدار XML برابر با شـــــــــــــــــــاخه های ایکس ام الی که در فایل xml_data.php ساخته ایم خواهد شد.
برای مثــــــــال برای گرفتن مقداری که بین تو تگ <time> و </time> ( قسمت شماره 1 - تصویر شماره 2 ) قرار گرفته به این شکل از ریشــــــه درخت ایکس امی که ساخته ایم شـــــــروع به حرکت میکنیم تا به شاخـــــــــه مورد نظر time برسیم!
برابر با مقداری است که بین دو تگ time قرار گرفته است!
0 به معنــــی اولین تگ!
firstChild به معنای اولین شاخه!
و nodeValue به معنای اطلاعاتی که از ابتدا تا انتهای دهانه تگ نوشته شده
به همین شکل برای date و code...
هر چه شاخه ای که به اطلاعات آن نیاز دارید نزدیکتر باشد, گرفتن محتوی آن راحتتر میباشد.
برای رسیدن به شاخه های مانند مثل هفت شاخه خبــــــــری که در عمق 3 از شاخه اصلی میباشد نمیتوان یکباره به آخرین شاخه رفت.
ابتدا باید از طریق شاخه ALLNEWS (قسمت شماره 4 - تصویر شماره 2) و به شاخه TODAYNEWS (قسمت شماره 5 - تصویر شماره 2) و سپس با پایه قرار دادن شاخه TODAYNEWS به news ها (قسمت شماره 6 - تصویر شماره 2) رسید
قسمت 7 از تصویر شماره 3 به تعداد تگ news محتویات تگ های خبر رو جداگانه به شما تحویل میدهد!
شما میتوانید اطلاعات دیگری رو بجای news ها به این شکل دریافت کنید.
برای مثال وب سایت www.meebo.com برای دریافت PM هایی که پنجــــــــــــــره های متعددی که شما باز میکنید دریافت میکنند, از این روش استفاده میکنند و هر چند ثانیه یکبار همه pm های دریافتی شما رو در پنجره مخصوص به خدشون جداگانه با یـــــــــک ارسال ajax نمایش میدهد.
جــــــــدول پــــــــــراپرتی های مورد نیاز
برای درک بهتــــــــر مطلب فایل zip شده پایین این پست رو دانلود و روی وب سرور خدتون unzip کنید
سپس مرورگر خدتون رو به load_xml_data.htm هدایت کنید!
که باید مقــــــــــادیری رو که در فایل xml_data.php بشکل ایکس ام ال تعریف کرده اید رو دریافت کنید
در پست بعدی در مورد فرمت XSLT و XPath توضیح خواهم داد
از فایل zip شده ای که در این پست قرار دادم میتونید برای وب سایت خدتون هم با دستکاری اون استفاده کنید.
اجــــــــــــــرا
دانلود فایل: http://alilg.ir/external/persiantools/ajax_xml.zip
© alilg.ir
در صورتیکه هنوز با ajax اشنا نشده اید به این تاپیک وب سایت خود را بر پایه ajax بسازید. قسمت اول برای آماتورها مراجعه نمائید
پس شما برنامه نویس وب عزیز الان میتونید با javascript دستوری بنویسید که محتویات یک Url رو دریافت و نمایش بدید. یا به اصطلاح build and ajax http request
این مقدار از ارسال و دریافت برای قسمت های مختلف ها وب سایت ها مانند فرم های ثبت نام, فرم های ارتباط با ما و امثالهم کافی بوده و نیاز شما رو برآورده خواهد کرد.
ولی تصور کنید قصد نوشتن یک برنامه webDesktop یا webTop یا Rich Desktop Application مانند سرویس GMail گوگل رو داشته باشید. مصلما نرم افزار های وب دسکتاپ باید تا حدودی محیط پردازش پایه خد هم باشد! ساده ترین نرم افزار وب دسکتاپ شما نیاز به ارسال و دریافت ده ها نوع اطلاعات مختلف و از یکدیگر تفکیک شده میباشند! در این حالت استفاده از ajax http request و دریافت اطلاعات از طریق صفحات html برای شما ممکن نخواهد بود!
در این حالت برنامه نویس میتواند از XML استفاده کرده و اطلاعات خود را بر این اساس پردازش نماید! ( شکل شماره 1 )
قــــــــــــــــــــــــرمـــــــــــز
1. شامل یک رشتـــــــه اطلاعات که میتوانید شامل صد ها خط کد یک صفحه HTML و یا تنها یک عدد یا یک کلمه باشد که در صورت یک String مقــــدار بیشتر نخواهد بود!
2. یک بسته اطلاعات به فرمت XML - XSLT یا XPath میباشد که نیاز به شکافتن و پردازش دارد که میتوانید شامل بینهایت String جدا از یکدیگر, بینهایت Integer باشد.
آبـــــــــــــــــــــــــــــــــــی
1. برابر با مقدار 1 قرمز
2. آبجکت xml که آماده پردازش برای موتور مروگر شده باشد.
مرورگر اینترنت اکسپلرر بوسیله یکی از نسخه های Microsoft XML DOM که عبارتند از Microsoft.XmlDom MSXML2.DOMDocument MSXML2.DOMDocument.3.0 MSXML2.DOMDocument.4.0 MSXML2.DOMDocument.5.0 و یا ورژن جدیدتر قادر به پردازش اطلاعات درون یک آبجکت ایکس ام ال میباشد
و مرورگر های خانواده Mozilla نظیر firefox توسط xml dom inspectoری که در این نوع مرورگر وجود داره...
3 و 4 هر کدام دارای مقادیر جداگانه ای میباشند! برای مثال A میتواند عدد 2008 باشد و مقدار B میتواند شامل 12 خط خبر جدید برای نمایش در قسمتی از سایت باشد.
همینطوری مقدار C میتواند محتوی تعداد کاربران آنلاین سایت و مقدار E محتوی درجه حرارت امروز پایتخت باشد.
و به همین شکل...
5. مقدار X بجز مقادیری که از attrible های خود ذخیره کرده, 2 مقدار دیگر را بعنوان زیر مجموعه همراه دارد ( با array اشتباه نشود )
6. مانند 3 یا 4 آبی
توضیح تصویر شماره 1
در قسمت بالایی تصویر شما نتیجه درخواستی رو مشاهده میکنید که برای یک url فرستاده و دریافت شده.
ینی یکبار استفاده از دستورات آجاکس بارگذاری انتقال دریافت و همه اینها فقط برای 1 مقدار!
ولی در قسمت پایین با دریافت یک بســـــــــته XML ما تنها با یک درخواســــــــــــــت ajax صبحت بیشتر از 12 مقدار جدا از یکدیگر شده ایم!!!
ارزش استفاده از XML OBJECT در ســـــــــــرویسی مانند سرویس GMail نمایان میشود!
وقتی وارد ایمیل خود در سایت Gmail میشود اگر دقت کرده باشید در بالای باکس شما خبرهای امروز نمایش داده میشوند که هر چند لحظه یکبار تغییر میکنند و خبر جدیدتری را بنمایش میگذارد!
در سمت چپ راست مسنجـــــــر گوگل تالک شما نمایش داده میشود و درصورتیکه پیامی برای شما ارسال شده باشد نمایش داده میشود!
همینطور در صورتیکه ایمیل جدیدی دریافت کنید به لیست میل های شما اضافه خواهد شد.
جیمیل هر چند ثانیه یکبار فقط یک درخواست AJAX بسمت سرور خود میفرستد و در همان یک ارسال همه اطلاعات مورد نیاز پنل شما از قبیل خبرهای جدیدی دنیا, پیام های ارسال شده برای شما در مسنجر, ایمیل های ارسال شده جدید و... رو در یک بسته XSTL دریافت میکند! و بنمایش میگذارد!
وب سایت www.meebo.com نمونه دیگری از استفاده از دریافت و پردازش اطلاعات از طریق آجاکس در بسته های XML میباشد.
خواندن اطلاعات XML (تصــــویر شماره 2) دریافت شده توسط AJAX در مرورگرهای ie و ff ( تصویر شماره 3 )
تصــــــویر شماره 2
تصـــــویر شماره 3
روش خواندن اطلاعات در مرورگر اینترنت اکسپلرر و فایرفاکس متفاوت میباشد.
مرورگر های خانواده mozilla توانایی خواندن اطلاعات XML رو بحمض دریافت توسط ajax دارند ( قسمت شماره 3 - تصویر 3)
ولی در مرورگر اینترنت اکسپلرر ابتدا نیاز هست توسط یکی از نسخه های اکتیوایکس Microsoft.XmlDom یک آبجکــــــــــــــــت xml خالی از اطلاعات بسازیم (قسمت شماره 1 - تصویر شماره 3) و سپس اطلاعاتی که توسط ajax دریافت کردیم رو به اون وارد کنیم ( قسمت شماره 2 - تصویر شماره 3 )
پس از آماده خواندن کردن اطلاعات دریافتی توسط ajax که در این بخش با نام standard_xml_data از آن در تصویر یاد کردیم اطلاعات ما آماده خواندن در مرورگر اینترنت اکسپلرر و فایرفاکس شده است.
در قسمت شماره 4 - تصویر شماره 3 مقـــــــدار XML برابر با شـــــــــــــــــــاخه های ایکس ام الی که در فایل xml_data.php ساخته ایم خواهد شد.
برای مثــــــــال برای گرفتن مقداری که بین تو تگ <time> و </time> ( قسمت شماره 1 - تصویر شماره 2 ) قرار گرفته به این شکل از ریشــــــه درخت ایکس امی که ساخته ایم شـــــــروع به حرکت میکنیم تا به شاخـــــــــه مورد نظر time برسیم!
کد:
var time = XML.getElementByTagName("time")[0].firstChild.nodeValue;0 به معنــــی اولین تگ!
firstChild به معنای اولین شاخه!
و nodeValue به معنای اطلاعاتی که از ابتدا تا انتهای دهانه تگ نوشته شده
به همین شکل برای date و code...
هر چه شاخه ای که به اطلاعات آن نیاز دارید نزدیکتر باشد, گرفتن محتوی آن راحتتر میباشد.
برای رسیدن به شاخه های مانند مثل هفت شاخه خبــــــــری که در عمق 3 از شاخه اصلی میباشد نمیتوان یکباره به آخرین شاخه رفت.
ابتدا باید از طریق شاخه ALLNEWS (قسمت شماره 4 - تصویر شماره 2) و به شاخه TODAYNEWS (قسمت شماره 5 - تصویر شماره 2) و سپس با پایه قرار دادن شاخه TODAYNEWS به news ها (قسمت شماره 6 - تصویر شماره 2) رسید
قسمت 7 از تصویر شماره 3 به تعداد تگ news محتویات تگ های خبر رو جداگانه به شما تحویل میدهد!
شما میتوانید اطلاعات دیگری رو بجای news ها به این شکل دریافت کنید.
برای مثال وب سایت www.meebo.com برای دریافت PM هایی که پنجــــــــــــــره های متعددی که شما باز میکنید دریافت میکنند, از این روش استفاده میکنند و هر چند ثانیه یکبار همه pm های دریافتی شما رو در پنجره مخصوص به خدشون جداگانه با یـــــــــک ارسال ajax نمایش میدهد.
جــــــــدول پــــــــــراپرتی های مورد نیاز
برای درک بهتــــــــر مطلب فایل zip شده پایین این پست رو دانلود و روی وب سرور خدتون unzip کنید
سپس مرورگر خدتون رو به load_xml_data.htm هدایت کنید!
که باید مقــــــــــادیری رو که در فایل xml_data.php بشکل ایکس ام ال تعریف کرده اید رو دریافت کنید
در پست بعدی در مورد فرمت XSLT و XPath توضیح خواهم داد
از فایل zip شده ای که در این پست قرار دادم میتونید برای وب سایت خدتون هم با دستکاری اون استفاده کنید.
اجــــــــــــــرا
کد:
var alilg = new alilg();
alilg.ajaxopenXMLurl("xml_data.php");© alilg.ir
