[h=2]مقدمه آموزش Ajax - ایجکس چیست و چه کاربردی دارد ؟[/h] [TABLE="width: 100%"] [TR] [TD="class: style1"] [/TD] [TD="class: style2"] AJAX چيست؟ واژه AJAX با تلفظ اي‌جکس يا اي‌ژاکس سرنام عبارت Asynchronous Java and XML و به معني ترکيب نامتقارن جاوا اسکريپت و XML است. ماهيت صفحات وب و پروتکل HTTP به گونه‌اي است که به طور معمول وقتي درحال وب‌گردي هستيم، به ازاي هر کنش و واکنش ميان ما و سايتي که در حال کار با آن هستيم، کل يک صفحه وب از نو بارگذاري و تازه‌سازي (refresh) مي‌شود. [/TD] [/TR] [/TABLE] اي‌جکس فناوري جديدي است که تغيير محسوسي را در اين سناريو به وجود مي‌آورد؛ به اين ترتيب که به جاي بارگذاري مجدد کل صفحه، فقط قسمتي تغيير مي‌کند که قرار است اطلاعات جديد را به نمايش درآورد و کليه عمليات ارسال اطلاعات و دريافت نتايج در پشت صحنه انجام مي‌شود. در نتيجه هيچ‌گاه صفحه سفيد و خالي وب در فواصل کنش و واکنش‌هاي هنگام کار با مرورگر ديده نمي‌شود و احساسي مشابه تجربه کار با يک نرم‌افزار دسکتاپ به کاربر دست مي‌دهد. جادوي اي‌جاکس چيزي نيست جز يک فکر بکر و آن هم ترکيب کردن جاوا اسکريپت و XML در قالب يک موجود نرم‌افزاري جديد. اصطلاح AJAX را اولين بار کارشناسي از شرکت Adaptive Path به نام جسي جيمزگرت در مقاله‌اي با عنوان اي‌جکس؛ رهيافت جديدي در برنامه‌هاي تحت وب مطرح کرد و خيلي سريع مورد استقبال گسترده برنامه نويسان وب در سراسر جهان قرارگرفت. اعتقاد عمومي اين است که تاريخچه به‌کارگيري تکنيک مذکور به پيدايش نرم‌افزار Outlook WebAccess و استفاده از فرمان XMLHttpRequest که مايکروسافت ابداع کرده و در نرم‌افزار اينترنت اکسپلور به‌کار رفته است، برمي‌گردد. اما امروزه اغلب مرورگرهاي مهم و شناخته‌شده (از جمله فايرفاکس) از آن پشتيباني مي‌کنند و ديگر يک فناوري محدود به اينترنت اکسپلورر نيست. [HR][/HR] چرا Ajax اين قدر اهميت دارد؟ فناوري اي‌جکس جديد است و شگفت‌انگيز به‌نظر مي‌رسد. ولي در حقيقت کل اين شعبده بر اساس فناوري‌هايي بنا شده است که هم‌اکنون موجودند: جاوا اسکريپت و XML. هر دوي اين فناوري‌ها تا حد زيادي باز هستند و منحصر به شرکت خاصي نيستند. به همين دليل اين روزها تمام محافل دنياي برنامه نويسي مملو از مقالات و تحليل‌هايي درباره AJAX است. به عنوان نمونه مي‌توانيد صفحه نخست سايت موسوم به کانال شبکه برنامه نويسان سان را بازکنيد. بيشتر اين صفحه (در زمان نگارش اين يادداشت) به مقالات و مطالب متنوعي درباره AJAX اختصاص يافته است. مجلات برنامه‌نويسي نيز مقالات متعددي در اين زمينه منتشر کرده‌اند و سايت‌هاي معروفي مانند O" Reilly و xml.com نيز در اين باره مطلب دارند. بنابراين ظرفيت بالايي براي تبديل اي‌جکس به يک استاندارد جهاني وجود دارد. از اين رو قرار است در تاريخ سيزدهم مارس سمينار مهمي در زمينه Ajax برگزار شود. اگر همين الان به سايت ajaxseminar.com مراجعه کنيد، متوجه مي‌شويد که علاوه بر طراح اين تکنيک، چندين برنامه‌نويس شاخص از شرکت‌هاي بزرگي همچون ياهو در آن شرکت خواهند داشت. اين فناوري از يک جنبه ديگر نيز اهميت دارد. به‌دليل عدم نياز به بارگذاري مجدد کل يک صفحه وب، مقدار داده‌هايي که لازم است براي تکميل يک Interaction ميان کاربر و سايت مبادله شود، به شدت کاهش مي‌يابد و اين به معني افزايش محسوس سرعت نرم‌افزارهاي تحت وب، سهولت به‌کارگيري اينترفيس‌هاي مبتني بر اي‌جکس و کاربرپسندترشدن آنها مي‌شود. به همين دليل اين روزها اکثر پورتال‌هاي بزرگ (مانند ياهو) مشغول طراحي اينترفيس‌هاي مبتني بر AJAX هستند. با اين همه مزاياي اي‌جکس به همين موارد ختم نمي‌شود. تصور کنيد وقتي در طول شبانه روز ميلياردها بار فرآيند بارگذاري مجدد صفحات وب تعاملي در شبکه اينترنت تکرار مي‌شود، استفاده از اي‌جکس چگونه موجب آزاد شدن پهناي‌باند اينترنت و در نتيجه ميلياردها دلار صرفه‌جويي اقتصادي در اين زمينه مي‌شود و اين به نوبه خود انقلابي در عرصه وب و فضاي سايبر به شمار مي‌رود. اين تحول در شرايطي اتفاق مي‌افتد که همزمان فناوري‌هاي اينترنت پرسرعت همچون ADSL به شدت در حال رشد هستند. حال تصور کنيد اگر فناوري اي‌جکس در مقياس گسترده‌اي مورد استفاده نرم‌افزارهاي تحت وب قرارگيرد. آنگاه افزايش سرعت کار با اينترنت چند برابر خواهد شد. چنين تحولي مي‌تواند اينترنت را به کامپيوتر دوم کاربران تبديل کند. به گونه‌اي که براي آنها اجراي يک نرم‌افزار از روي وب تفاوت محسوسي با اجراي آن از روي کامپيوتر دسکتاپ نداشته باشد. در اين صورت ممکن است واقعا بخش مهمي از توان پردازشي نرم‌افزارها، چه از نوع دسکتاپ و چه از نوع تحت وب به سيستم‌هاي موسوم به Web Service واگذار شود. از اين رو کساني که مبتکر و مشوق ايده وب سرويس بوده‌اند، اين روزها انگيزه تازه‌اي براي سرعت بخشيدن به اين فناوري پيدا کرده‌اند و تلاش مي‌کنند دو فناوري اي‌جکس و وب سرويس را به‌يکديگر پيوند دهند و راهکارهاي تازه‌اي بيافرينند. [HR][/HR] کدام سايت‌ها از اي‌جکس استفاده کرده‌اند؟ دنياي برنامه‌نويسي وب هنوز درگير هيجانات مربوط به آشنايي با اين پديده است و در حال بررسي مشکلات تکنيکي و هضم و جذب آن در بافت برنامه‌هاي تحت وب مي‌باشد. به همين دليل ميزان استفاده عملي از آن چندان گسترده نيست. اما چون کارايي اي‌جکس ديگر براي همه ثابت شده است، حرکت‌هاي بزرگي در سراسر اينترنت به سمت استفاده از اين فناوري در جريان است. از جمله اينترفيس نسخه دوم Yahoo Mail که به نسخه بتا معروف است و فعلا در دسترس کاربران سرويس غير رايگان ياهو قراردارد، از همين فناوري استفاده مي‌کند که به زودي اينترفيس جديد در دسترس عموم قرار مي‌گيرد. سرويس Gmail و Google Map نيز از اين فناوري استفاده مي‌کنند.
پاسخ : # آموزش AJAX [h=2]Ajax چگونه کار می کند ؟[/h] کاربرد و نحوه کارکرد Ajax : همانطور که در بخش قبل به معرفی Ajax پرداختیم ، با مفهوم کلی این تکنیک آشنا شدید . در این بخش می خواهیم به تشریح کاربرد و نحوه کارکرد تکنیک ایجکس بپردازیم . همانطور که در هنگام کار با صفحاتی که با زبان های سمت سرور ، مثل ASP.Net یا PHP طراحی شده اند متوجه شده اید ، زمانی که در این صفحات تغییری ایجاد نموده و یا مثلا کنترلی را کلیک نمایید ، صفحه به طور کامل ( حتی بخش هایی که تغییر نکرده اند ) به سرور ارسال شده و در واقع صفحه مجدد لود می شود . سپس در اجرای جدید صفحه نتیجه تغییر ایجاد شده نمایان می شود . تصور کنید شما به طور مداوم می خواهید محتویات یک صفحه را تغییر دهید ، با هر بار ایجاد تغییر و ارسال کل صفحه به سرور ، چند مشکل عمده به وجود می آید : با ارسال کل حجم صفحه ( به جای بخشی که فقط تغییر کرده است ) و افزایش حجم اطلاعات مبادله شده ، مدت زمان فرایند پردازش افزایش یافته و باعث اتلاف وقت کاربر می شود . باعث افزایش ترافیک سرور می شود . باعث مصرف پهنای باند و مدت زمان بیشتر اینترنت می شود . در فرایند گسترده ایجاد تغییرات و ارتباط با سرور ، صفحه مرتبا لود و فراخوانی می شود . اما برای این مشکلات باید چه کار کرد ؟ تکنیک Ajax برای حل این مشکلات ابداع شد . تکنیک ایجکس مانع ارسال کل صفحه به سرور و فراخوانی آن در هنگام تغییر در یک بخش از صفحه می شود . دیاگرام زیر نشان دهنده نحوه کار Ajax است . به فرایند آن دقت نمایید : به تشریح دیاگرام بالا می پردازیم . هنگامی که تغییری در یک بخش از صفحه ایجاد می شود ، Ajax اطلاعات بخشی که تغییر کرده را بدون لود شدن صفحه و ارسال کامل آن به سرور ، توسط یک درخواست HttpRequest و توسط یک شی XMLHttpRequest در یک عملیات پشت پرده به سرور ارسال می کند . سرور اطلاعات دریافتی را پردازش کرده و نتیجه را به صفحه ارسال می کند . مرورگر اطلاعات ارسالی از سرور را دریافت و با Java Script پردازش می کند . سپس تغییرات لازم را در بخش تغییر کرده اعمال نموده و محتویات آن را به روز می کند . [HR][/HR] یک مثال آشنا از کاربرد Ajax : یکی از موارد کاربرد Ajax که حتما در گذشته با آن برخورد کرده اید و شاید نمی دانستید چگونه کار می کند ، قابلیت Suggest در موتور جستجوی گوگل است . هنگامی که شما یک حرف را در کادر موتور گوگل وارد می کنید ، یک عملیات پردازش انجام شده و به شما کلماتی که با حرف یا حروف وارد کرده شما ، شروع می شوند را در یک کادر نمایش می دهد . این عملیات توسط تکنیک ایجکس انجام می شود .
پاسخ : # آموزش AJAX [h=2]ساختار Ajax - تشریح Syntax ایجکس با یک مثال[/h] تشریح ساختار Ajax : در این بخش قصد داریم تا با اراثه یک مثال ساده از دستورات Ajax و نمایش خروجی واقعی آن ، شما را با ساختار کلی این تکنیک و نحوه عملکرد آن آشنا نماییم . در مثال زیر ، یک صفحه ساده HTML داریم که در آن یک تگ < div > و یک دکمه فرمان button قرار دارد . تگ < div > در ابتدا یک متن را نمایش می دهد و قصد داریم کاری کنیم تا پس از کلیک کاربر بر روی دکمه فرمان ، متن جدید آن از سرور دریافت شده و به روز رسانی شود . کد موجود در صفحه HTML به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] کد صفحه [/TD] [TD="class: prdes, align: left"] < html > < head > < script type = " text/javascript " > function loadXMLDoc ( ) { .... کد ها و دستورات Ajax در اینجا قرار می گیرد ... } < /script > < /head > < body > < div id="myDiv" > متن این قسمت را با Ajax تغییر دهید < /div > < button type="button" onclick=" loadXMLDoc() " > Change Content < /button > < /body > < /html > [/TD] [/TR] [/TABLE] در کد بالا ، هنگامی که کاربر بر روی دکمه فرمان کلیک می نماید ، تابع ( ) loadXMLDoc که کد آن در بخش < head > صفحه قرار دارد ، فراخوانی و اجرا شده و یک درخواست را به سرور ارسال می کند . سرور درخواست را دریافت کرده و آن را پردازش می کند . سپس خروجی تولید شده را به صفحه بر می گرداند . مرورگر این خروجی را دریافت کرده و محتویات تگ < div > را تغییر داده و به روز رسانی می کند . کد تابع ( ) loadXMLDoc در جدول زیر قرار داده شده است . در قسمت بعدی ، به تشریح و آموزش نوشتن این دستورات خواهیم پرداخت . [TABLE="class: ex"] [TR] [TD="class: prname"] کد تابع loadXMLDoc ( ) [/TD] [TD="class: prdes, align: left"] function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } [/TD] [/TR] [/TABLE] [HR][/HR] خروجی مثال : در جدول زیر خروجی مثال را در عمل نمایش داده شده است . برای مشاهده عمکلرد دستورات بر روی دکمه فرمان کلیک نمایید : [TABLE="class: ex"] [TR] [TD="class: prname"] خروجی مثال [/TD] [TD="class: prdes, align: left"] [h=3]متن این قسمت را با Ajax تغییر دهید[/h] Change Content [/TD] [/TR] [/TABLE]
پاسخ : # آموزش AJAX [h=2]آموزش Ajax - ساخت شی XmlHttpRequest[/h] اساسی ترین شی در Ajax که تقریبا انجام تمام عملیات بر روی دوش آن است ، شی XMLHttpRequest است . در این بخش قصد داریم تا شما را با شی XMLHttpRequest و نحوه تعریف و استفاده از آن آشنا نماییم . [HR][/HR] تعریف و ساخت یک شی XMLHttpRequest : شی XMLHttpRequest وظیفه ارسال و دریافت اطلاعات بین مرورگر کاربر و سرور را داشته و مانع لود شدن مجدد صفحه در هنگام بروز یک تغییر در صفحه می شود . این شی امکان انجام تغییرات در بخش های مختلف یک صفحه و تبادل اطلاعات با سرور را بدون اینکه صفحه Refresh شود را فراهم نموده است . تمام مرورگرهای مطرح از شی XMLHttpRequest پشتیبانی کرده و به صورت درون ساخته آن را دارند . در ورژن های قدیمی IE 6 و IE 5 به جای شی XMLHttpRequest ، از شی ActiveXObject پشتیبانی می شود . بنابراین در هنگام کد نویسی Ajax می توان کد را طوری نوشت که با این مرورگر ها نیز ، سازگاری داشته باشد . در ادامه به تشریح این مسئله خواهیم پرداخت . شکل کلی تعریف یک شی XMLHttpRequest به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] variable = new XMLHttpRequest ( ) ; * variable : یک متغیر با نام دلخواه است [/TD] [/TR] [/TABLE] شکل کلی تعریف این شی در مرورگرهای قدیمی IE 5 , IE 6 و برای سازگاری با آنها به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] variable = new ActiveXObject ( " Microsoft.XMLHTTP " ) ; [/TD] [/TR] [/TABLE] [HR][/HR] مثال ساخت یک XMLHttpRequest : پس از اینکه با نحوه تعریف یک شی XMLHttpRequest در Ajax آشنا شدید ، در کد مثال زیر یک نمونه از این شی را ساخته ایم . در این مثال برای سازگاری با تمام مرورگرهای جدید و قدیمی ، یک دستور شرطی را به کار برده ایم . در این دستور ابتدا وضعیت تعریف شی XMLHttpRequest در مرورگر بررسی شده و سپس با توجه به قابلیت مرورگر کد لازم استفاده می شود : همانطور که مشاهده می نمایید ، شی XMLHttpRequest ساخته شده در متغیر xmlhttp ذخیره می شود . پس از تعریف این متغیر ، از آن برای کار با Ajax در سطح برنامه استفاده می شود . در بخش های بعدی توضیح این مسئله داده شده است . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] var xmlhttp; if ( window.XMLHttpRequest ) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest () ; } else { // code for IE6, IE5 xmlhttp = new ActiveXObject (" Microsoft.XMLHTTP ") ; } [/TD] [/TR] [/TABLE]
پاسخ : # آموزش AJAX [h=2]آموزش Ajax - ارسال یک درخواست XmlHttpRequest به سرور[/h] ارسال یک درخواست XMLHttpRequest به سرور : در بخش قبل به آموزش نحوه ساخت یک شی XMLHttpRequest پرداختیم . این شی وظیفه ارسال و دریافت ، یک درخواست و اطلاعات لازم برای انجام عملیات تغییر در صفحه را دارد . پس از اینکه یک شی XMLHttpRequest را ساختید ، باید به وسیله آن درخواست خود را به سرور ارسال نمایید . این درخواست اطلاعات لازم را به سرور ارسال کرده و یک فایل که حاوی اسکریپت ، اطلاعات و یا دستور لازم برای ایجاد تغییر در صفحه است را بر روی سرور باز می کند . سرور پس از باز کردن فایل درخواستی ، آن را پردازش کرده و پاسخ لازم را به کامپیوتر کاربر ارسال می کند . برای انجام این عملیات از 2 متد ( ) send و ( ) open شی XMLHttpRequest استفاده می شود . با متد ( ) open ابتدا درخواست ساخته شده و سپس با متد ( ) send ارسال می شود . شکل کلی ارسال یک درخواست به سرور به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] xmlhttp.open( metohd , url , async) ; xmlhttp.send ( " text " ) ; [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: prname"] مثال [/TD] [TD="class: prdes, align: left"] xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send( ); [/TD] [/TR] [/TABLE] در ادامه به توضیح موارد در Syntax دستور می پردازیم . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح هر یک از موارد [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] متد [/TD] [/TR] [TR] [TD="class: body, align: right"] این متد درخواست را ایجاد کرده ودارای سه پارامتر اصلی زیر است . به وسیله این پارامترها متد نحوه ارسال اطلاعات ، آدرس فایلی که بر روی سرور باید باز شود و اینکه آیا درخواست به صورت asynchronous یا synchronous باشد ، تعیین می شود . در ادامه به توضیح این پارامترها به صورت کامل می پردازیم . method url async [/TD] [TD="class: header"] open ( ) [/TD] [/TR] [TR] [TD="class: body, align: right"] این متد درخواست ایجاد شده را به سرور ارسال می کند . به وسیله پارامتر text ، زمانی که متد POST را برای ارسال درخواست انتخاب کرده اید ، می توانید اطلاعات مورد نظرتان را به همراه درخواست خود به سرور ارسال نمایید : text [/TD] [TD="class: header"] send ( ) [/TD] [/TR] [/TABLE] [HR][/HR] پارامتر اول : متد GET یا POST . method تعیین کننده نحوه ارسال اطلاعات به سرور توسط شی XMLHttpRequest است . دو روش برای این منظور وجود دارد : GET یا POST متد GET سریعتر و ساده تر از متد POST است . در متد GET اطلاعات ارسالی به سرور به ادامه نام فایل درخواستی ( URL ) اضافه می شوند ، اما در متد POST اطلاعات به صورت مخفی و پشت پرده به سرور منتقل می شوند . معمولا از متد GET برای ارسال اطلاعات استفاده می شود . اما در موارد زیر باید از متد POST استفاده کنید : هنگامی که نمی خواهید اطلاعات به صورت Cashed باشند . یعنی اطلاعات درون حافظه سرور باقی مانده و ممکن است در درخواست های بعدی از اطلاعات تکراری استفاده شود . برای مثال در عملیات update یک فایل و یا ارسال و دریافت اطلاعات از پایگاه داده از متد Post استفاده کنید . حجم اطلاعات ارسالی زیاد باشد . متد GET در حجم اطلاعات ارسالی بسیار محدود بوده و در حجم های اطلاعات بالا باید از متد POST استفاده نمایید . هنگامی که می خواهید اطلاعات حساسی مثل رمز عبور را منتقل کنید ، باید از متد POST استفاده شود . زیرا در متد GET اطلاعات ارسالی به انتهای نام فایل درخواست شده اضافه شده و به همین دلیل قابل رویت هستند . اما در متد POST اطلاعات به صورت مخفی و پشت پرده منتقل می شوند . 1. مثال ارسال درخواست با متد GET : [TABLE="class: ex"] [TR] [TD="class: prname"] مثال 1 ارسال با متد GET [/TD] [TD="class: prdes, align: left"] xmlhttp.open( "GET" , "ajax_info.txt" , true ) ; xmlhttp.send( ); [/TD] [/TR] [/TABLE] 2. مثال ارسال درخواست به سرور با متد GET و فرستادن اطلاعات مورد نظر با اضافه کردن چند مقدار به ادامه نام فایل درخواستی : [TABLE="class: ex"] [TR] [TD="class: prname"] مثال 2 ارسال اطلاعات با متد GET [/TD] [TD="class: prdes, align: left"] xmlhttp.open( "GET" , "demo_get2.asp?Name=Omid&Family=Rezaee" , true) ; xmlhttp.send( ); [/TD] [/TR] [/TABLE] 3. مثال ارسال درخواست به سرور با متد POST : [TABLE="class: ex"] [TR] [TD="class: prname"] مثال 3 ارسال درخواست با متد POST [/TD] [TD="class: prdes, align: left"] xmlhttp.open( "POST" , "demo_post.asp" , true ) ; xmlhttp.send( ); [/TD] [/TR] [/TABLE] 4. مثال ارسال درخواست به سرور با متد POST و انتقال اطلاعات مورد نظر با آن: اگر هنگام استفاده از متد POST بخواهید ، اطلاعات مورد نظرتان را نیز ارسال کنید ، باید یک HTTP header را به وسیله متد( ) setRequestHeader به متد خود اضافه کنید . سپس اطلاعات مورد نظر را با متد ( ) send به سرور ارسال کنید . کد زیر روش این کار را نمایش می دهد: [TABLE="class: ex"] [TR] [TD="class: prname"] مثال 4 ارسال درخواست و اطلاعات با متد POST [/TD] [TD="class: prdes, align: left"] xmlhttp.open( "POST" , "ajax_test.asp" , true ) ; xmlhttp.setRequestHeader( "Content-type" , "application/x-www-form-urlencoded" ) ; xmlhttp.send( "Name=Omid&Family=Rezaee" ) ; [/TD] [/TR] [/TABLE] [HR][/HR] پارامتر دوم url : آدرس یک فایل بر روی سرور . پارامتر url در متد ( ) open ، در هنگام ارسال درخواست Ajax به سرور ، آدرس یک فایل بر روی سرور را تعیین می کند . سرور در هنگام دریافت درخواست XMLHttpRequest ، فایلی که آدرس آن را با پارامتر url تعیین کرده اید ، باز کرده و بسته به نوع آن ، آن را پرادزش می کند . این فایل می تواند هر نوع فایلی باشد مثلا یک فایل ساده متنی باشد که حاوی مقداری اطلاعات است . همچنین می تواند یک فایل اسکریپتی مثل java script ، ASP.Net و یا PHP باشد ، که کدهای خاصی را اجرا می کند . سرور پس از اجرای دستورات موجود در فایل مقصد ، پاسخ لازم را تولید کرده و به کامپیوتر کاربر ارسال می کند . در قسمت بعدی به آموزش نحوه دریافت این پاسخ خواهیم پرداخت . 5. در مثال زیر به تعیین آدرس یک فایل برای پارامتر url پرداخته ایم . [TABLE="class: ex"] [TR] [TD="class: prname"] مثال 5 تعیین فایل مقصد با استفاده از خاصیت url [/TD] [TD="class: prdes, align: left"] xmlhttp.open( "POST" , "demo_post.asp" , true ) ; xmlhttp.send( ); [/TD] [/TR] [/TABLE]
پاسخ : # آموزش AJAX [h=2]آموزش Ajax - دریافت پاسخ XmlHttpRequest از سرور[/h] مقدمه : پس از اینکه یک شی XMLHttpRequest را ساخته و به وسیله آن درخواست خود را به سرور ارسال نمودید ، سرور دستورات برنامه Ajax تعیین شده را پردازش کرده و یک خروجی را به عنوان پاسخ درخواست ، به کاربر ارسال می کند . مرورگر در کامپیوتر کاربر این پاسخ را دریافت کرده و تغییرات لازم را در صفحه و بخش مربوطه انجام خواهد داد . به وسیله قابلیت Respone در ایجکس ، می توانید کدی طراحی نمایید تا مرورگر پاسخ سرور را دریافت کند . برای این منظور از 2 خاصیت شی XMLHttpRequest به شرح زیر استفاده می شود : خاصیت responseText : از این خاصیت در زمانی استفاده می شود که پاسخ سرور به صورت یک متن خالی از نوع داده ای string است . برای مثال فرض کنید که محتوای یک عنصر پاراگراف باید با متن جدید جایگزین شود . در این حالت چون جواب سرور از نوع متن است ، از خاصیت responseText استفاده می شود . خاصیت responseXML : این خاصیت در زمانی استفاده می شود که پاسخ سرور به صورت یک فایل XML بوده و یا قالب بندی داده ای شده باشد . در ادامه به تشریح کاربرد این خاصیت ها و مثال استفاده از آنها پرداخته ایم . [HR][/HR] استفاده از خاصیت responseText : گفتیم زمانی که پاسخ سرور به اسکریپت و یا فایل درخواستی ایجکس ، به صورت متن ساده باشد ، از خاصیت responseText شی XMLHttpRequest ، برای دریافت پاسخ استفاده می شود . سپس شما می توانید این خاصیت را به صورت مستقیم در کد خود به کار ببرید . مثال : در مثال زیر ابتدا یک شی XMLHttpRequest به نام xmlhttp ساخته شده است . سپس درخواستی به سرور برای باز کردن فایل ajax_ex1.txt و استخراج متن درون آن فرستاده شده است . سپس جواب خروجی از سرور به وسیله خاصیت responseText دریافت شده و با متن موجود در تگ < div id ="ex_1" > جایگزین شده است . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest( ) } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") ; } xmlhttp.onreadystatechange = function ( ) { if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) { document.getElementById(" ex_1 ").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "ajax_ex1.txt", true); xmlhttp.send(); } </script> < /head > < body > < div id = " ex_1 " > برای تغییر متن به وسیله ajax بر روی دکمه زیر کلیک نمایید < /div > < button type="button" onclick="loadXMLDoc( )"> تغییر متن < /button > < /body > < /html > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [h=4]برای تغییر متن به وسیله ajax بر روی دکمه زیر کلیک نمایید[/h] تغییر متن [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] استفاده از خاصیت responseXML : پس از ایکنه با دریافت یک پاسخ ساده متنی از سرور آشنا شدید ، حال بایستی یک پاسخ قالب بندی شده به زبان XML را از سرور دریافت کنیم . برای این منظور از خاصیت responsXML شی XMLHttpRequest ، استفاده می کنیم . در این پروسه ، ابتدا فایل XML خروجی از سرور دریافت شده و خاصیت responseXML آن را پردازش می کند . سپس اطلاعات آن را در اختیار مرورگر قرار می دهد تا در بخش هایی از صفحه که باید تغییر کنند ، استفاده شود . برای درک بهتر این مسئله یک مثال ساده را برای شما تشریح می کنیم . در این مثال یک فایل XML به نام Book_List.xml داریم که درون آن لیست یک سری کتاب با نام نویسنده و سال انتشار قرار دارد . با اجرای دستور زیر این فایل از سرور توسط شی responseXML دریافت شده و عنوان کتاب ها از بین اطلاعات دریافتی استخراج می شود . سپس تگ < " div id = " ex-2" > ، این عنوان ها را در خروجی نمایش می دهد . برای مشاهده عملیات و خروجی مثال بر رور دکمه فرمان دریافت عنوان ها ، کلیک نمایید . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript"> function Book() { var xmlhttp; var txt,x,i; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest( ) } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") ; } xmlhttp.onreadystatechange = function ( ) { if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) { xmlDoc = xmlhttp.responseXM L; txt = " "; x = xmlDoc.getElementsByTagName ( "TITLE" ) ; for ( i=0 ; i<x.length ; i++ ) { txt=txt + x.childNodes[0].nodeValue + " " ; } document.getElementById("ex_2").innerHTML=txt; } xmlhttp.open(" GET " , "Book_List.xml " , true ) ; xmlhttp.send( ); } </script> < /head > < body > < div id = " ex_2 " > < /div > < button type="button" onclick="Book( )"> مشاهده عنوان ها < /button > < /body > < /html > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] مشاهده عنوان ها [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
