تبادل اطلاعات با یک صفحه اینترنتی دیگر در سرور سایت، با استفاده از تکنیک Ajax در صفحه اجرا شده در سمت کاربر، (ارتباط با صفحه سرور، بر اساس روش POST)، در JavaScript
در کلید شماره 3452 ، تکنیک Ajax را معرفی کردیم. اکنون قصد داریم که مثالی عملی برای آن اجرا کنیم. در این مبحث، تبادل اطلاعات با صفحه موجود در سرور سایت، بر اساس روش POST می باشد ( کلید شماره 399 ). یعنی یک سری اطلاعات با روش POST به آن صفحه ارسال می شوند و سپس پاسخ صفحه را دریافت می کنیم.
در این کلید، از کلاس XMLHttpRequest استفاده خواهیم کرد. هنگام استفاده از این کلاس، باید هر دو صفحه بر روی یک دامنه (domain) قرار گرفته باشند (مثلا هر دو در kelidestan.com قرار داشته باشند). بنابراین استفاده از این روش برای درخواست های بین دو دامنه (cross-domain) امکان پذیر نیست (مثلا نمی توان از صفحه ای در دامنه kelidestan.com ، یک صفحه از دامنه example.com فراخوانی شود). برای درخواست های بین دو دامنه (cross-domain)، می توانید از کلاس های موجود در jquery استفاده نمایید.
یک صفحه داریم که صفحه اصلی ما خواهد بود و کاربر مستقیما آن را اجرا می کند (نام آن در این مبحث اهمیتی ندارد و مهم هم نیست که پسوند آن html باشد یا PHP یا ...) و یک صفحه دوم خواهیم داشت که قرار است صفحه اصلی ما، با تکنیک Ajax ، با آن تبادل اطلاعات داشته باشد (بدون اینکه کاربر مستقیما آن صفحه دوم را اجرا کند).
نام صفحه دوم را برابر second_page.php در نظر می گیریم (با پسوند PHP). دقت شود که شما صفحه دوم را با هر پسوندی می توانید انتخاب کنید (البته اگر پسوند برابر html در نظر گرفته شود، دیگر امکان استفاده از روش POST برای ارسال اطلاعات به صفحه، وجود ندارد) و ما با انتخاب پسوند PHP ، هدفمان ارسال اطلاعات با روش POST و همچنین اجرای یک سری کد PHP بوده است تا بدین شکل، مثالی از اجرای کدهای داینامیک داشته باشیم (بر خلاف کدهای HTML که استاتیک هستند). یعنی مثلا اگر قرار است خروجی صفحه برابر 6 باشد، می توان عدد 6 را در یک صفحه html ذخیره کرد، اما ما در این مثال، صفحه را از نوع PHP طراحی می کنیم، به این صورت که یک عدد را با روش POST دریافت کند و آن را دو برابر کرده و نتیجه را در خروجی به ما بدهد. یعنی اگر عدد 3 به ورودی صفحه داده شود، خروجی برابر 6 خواهد بود.
هر دو فایل را در یک پوشه (Folder) قرار می دهیم (بنابراین آدرس URL صفحه دوم را به صورت نسبی در صفحه اصلی ذکر خواهیم کرد و نیازی به آدرس URL کامل و مطلق برای آن نمی باشد).
ابتدا کدهای صفحه second_page.php را بر اساس توضیحاتی که دادیم، به صورت زیر می نویسیم (کدهای PHP) :
دقت شود که در آن، چارچوب HTML برای صفحه در نظر گرفته نشده، زیرا می خواهیم تنها یک عدد را در خروجی به ما بدهد (بعد آن را در صفحه اصلی نمایش می دهیم که خود دارای چارچوب HTML خواهد بود، زیرا صفحه اصلی در مرورگر اینترنت کاربر نمایش داده می شود).
اکنون به سراغ کدنویسی صفحه اصلی می رویم. همان طور که گفتیم، یک صفحه با چارچوب HTML خواهد بود (با پسوند دلخواه) که موارد زیر را در آن قرار خواهیم داد (موارد لازم) :
1- نوشتن کدهایی برای تبادل اطلاعات با صفحه second_page.php ، بر اساس تکنیک Ajax (کدها را در یک تابع تعریف می کنیم تا تنها زمانی که لازم باشد، اجرا شوند)
2- قرار دادن یک دکمه (button) در صفحه (که با کلیک کاربر بر روی آن، باید با تکنیک Ajax ، اطلاعاتی (عدد 3) به صفحه second_page.php ارسال شده و سپس خروجی صفحه (عدد 6) دریافت و در خروجی صفحه اصلی نمایش داده شود) (با کلیک روی دکمه، تابع حاوی کدها، اجرا خواهد شد)
3- تعریف یک عنصر در صفحه با id منحصربفرد که اطلاعات دریافتی از صفحه، در آن نمایش داده می شوند (درون زوج تگ آن قرار گرفته و نمایش داده می شوند)
بنابراین کدهای صفحه اصلی به صورت زیر نوشته می شوند :
نتیجه اجرای صفحه اصلی، به صورت زیر می باشد :
اکنون کدهای صفحه اصلی را شرح می دهیم. ابتدا به عنصری دقت کنید که نتیجه در آن نمایش داده می شود :
یک زوج تگ p (با پس زمینه به رنگ سبز) که id آن برابر show_response تعیین شده و در کدهای javascript ، آن را با این id شناسایی می کنیم :
یک دکمه (button) داریم که با کلیک بر روی آن، عملیات ارسال اطلاعات به صفحه و دریافت پاسخ و نمایش پاسخ، اجرا خواهد شد :
با مشخصه زیر تعیین کرده ایم که اگر بر روی این دکمه کلیک شد، تابع Kelidestan_Get_Data که در کدهای javascript تعریف شده، اجرا شود (کدهای همه عملیات ها در آن تابع تعریف شده است) :
اکنون کدهای javascript صفحه را شرح می دهیم :
قبلا هم تذکر دادیم که کدهای کل عملیات ها، در تابعی با نام Kelidestan_Get_Data تعریف شده است. در کدها، از کلاس XMLHttpRequest برای تبادل اطلاعات با صفحه دوم استفاده می شود. ابتدا یک شیء (object) از این کلاس (class) ساخته ایم :
سپس تعیین کرده ایم که هنگام دریافت پاسخ از صفحه دوم، چه کدهایی باید در این صفحه اجرا شوند :
در واقع می توان ساختار این بخش را به شکل کلی زیر نمایش داد :
بنابراین پس از دریافت پاسخ صفحه دوم، کد زیر اجرا خواهد شد :
در کد بالا، xmlhttp.responseText همان پاسخ صفحه دوم است (یعنی عدد 6). همچنین با عبارت زیر، به آن زوج تگ p اشاره کرده ایم که باید پاسخ در آن نمایش داده شود (آن عنصر p را انتخاب کرده ایم) :
روش innerHTML برای قرار دادن یک سری کد درون یک عنصر (یک زوج تگ) به کار می رود. بنابراین با اجرای آن کد، پاسخ صفحه دوم، درون زوج تگ p مورد نظر، نمایش داده می شود (قرار می گیرد).
سپس با اجرای کدهای زیر، ارسال اطلاعات به صفحه صورت می گیرد (تا اینجا، اطلاعات را ارسال نکرده بودیم و تنها تعیین کردیم که بعد از دریافت پاسخ، چه کدهایی باید اجرا شود) :
آدرس URL صفحه دوم را در متغیر URL_Address تعریف کرده ایم (چون در محل صفحه اصلی قرار گرفته، تنها ذکر نام صفحه دوم کافی است. تعریف URL به صورت نسبی بوده است). متغیرهایی که قصد داریم با روش POST به صفحه دوم ارسال شوند را در متغیری با نام params (از جنس رشته - string) تعریف می کنیم.
در این مثال، چون تنها یک متغیر با روش POST به صفحه ارسال می شود، متغیر params به صورت زیر تعریف شده است (نام متغیری که ارسال می شود، بعد یک علامت تساوی و در آخر هم، مقدار در نظر گرفته شده برای آن متغیر) :
اما اگر تعداد متغیرهای ارسالی بیش از یکی باشد، باید علامت & را در بین عبارت های نوشته شده برای آنها، قرار بدهیم. مثلا اگر قصد داشتیم 4 متغیر را به صفحه ارسال کنیم (با روش POST)، آنگاه متغیر params مشابه کد زیر تعریف می شد :
نکات امنیتی مربوط به دریافت اطلاعات را در صفحه دوم به کار ببرید (چون این مبحث، یک مبحث آموزشی بود، ما آنها را ذکر نکردیم). البته شاید این موضوع به ذهنتان برسد که در همین مثال، کاربر با صفحه دوم سر و کار ندارد و مشکلی نخواهد بود، اما این تفکر اشتباه است. زیرا کافی است که کاربر، کدهای صفحه اصلی را مشاهده کرده و آدرس URL صفحه دوم را بیابد، سپس با تکنیک های مختلف می تواند صفحه دوم را مورد حمله قرار دهد (هک کردن آن صفحه به صورت جداگانه و مستقل از این صفحه اصلی).
برخی مواقع که در حال تمرین کدنویسی در کامپیوتر شخصی خود هستیم، ممکن است یک فایل html را برای تمرین در مرورگر اینترنت خود باز کنیم و بعد برای تمرین تکنیک Ajax ، یک صفحه دوم با پسوند php را در نظر گرفته باشیم، اما تکنیک Ajax به درستی عمل نکند و دلیل آن را تشخیص ندهیم.
یک مشکل رایج که در این مواقع رخ می دهد، این است که چون کاربر صفحه اصلی که پسوند html دارد را به شکل معمولی با مرورگر اینترنت خود باز کرده و اجرا نموده است، این نکته را از یاد برده که چون صفحه دوم که می خواهد بر اساس Ajax از آن اطلاعات بگیرد، دارای پسوند php است، حتما باید توسط یک نرم افزار شبیه ساز سرور مثل Wamp Server ( کلید شماره 367 ) اجرا شود (که برای این منظور، تنها کافی است که همان صفحه اصلی که دارای پسوند html است با نرم افزار شبیه ساز سرور اجرا گردد).
بعد از اجرای نرم افزار شبیه ساز سرور، باید خود صفحه فعلی (index.html) نیز توسط نرم افزار شبیه ساز سرور اجرا شود (اگرچه یک صفحه html است، اما چون در آن از تکنیک AJAX برای دریافت اطلاعات از یک صفحه PHP استفاده می شود، حتما باید توسط نرم افزار شبیه ساز سرور اجرا شود و نباید آن را به شکل معمولی در ویندوز باز کنید).
بنابراین هنگام اجرا در کامپیوتر شخصی، در مرورگر اینتزنت خود چک کنید که در ابتدای آدرس مربوط به اجرای فایل index.html ، حتما عبارت localhost وجود داشته باشد (نشان دهنده اجرا شدن آن توسط نرم افزار شبیه ساز سرور). به عنوان مثال :
