بستن منو
۹۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با JavaScript
مباحث اولیه برای آشنایی با JavaScript
10
متغیرها (Variable)، در JavaScript
متغیرها (Variable)، در JavaScript
4
رشته ها (متن ها - String)، در JavaScript
رشته ها (متن ها - String)، در JavaScript
14
نمایش پیام، در JavaScript
نمایش پیام، در JavaScript
4
توابع (Function)، در JavaScript
توابع (Function)، در JavaScript
1
حلقه ها (Loop)، در JavaScript
حلقه ها (Loop)، در JavaScript
4
آرایه ها (Array)، در JavaScript
آرایه ها (Array)، در JavaScript
7
اشاره به عنصرهای صفحه (انتخاب عنصرهای صفحه)، در JavaScript
اشاره به عنصرهای صفحه (انتخاب عنصرهای صفحه)، در JavaScript
2
عملیات های ریاضی، در JavaScript
عملیات های ریاضی، در JavaScript
10
تاریخ و زمان، در JavaScript
تاریخ و زمان، در JavaScript
10
زمان بندی اجرای کدها، در JavaScript
زمان بندی اجرای کدها، در JavaScript
2
افزودن و یا حذف محتوا و کد، به صفحه، در JavaScript
افزودن و یا حذف محتوا و کد، به صفحه، در JavaScript
3
فرم ها (Form)، در JavaScript
فرم ها (Form)، در JavaScript
5
عکس ها (Image)، در JavaScript
عکس ها (Image)، در JavaScript
1
دکمه ها (Button)، در JavaScript
دکمه ها (Button)، در JavaScript
2
لینک ها (Link)، در JavaScript
لینک ها (Link)، در JavaScript
2
پنجره ها (Window)، در JavaScript
پنجره ها (Window)، در JavaScript
1
کلیک کردن (Click)، در JavaScript
کلیک کردن (Click)، در JavaScript
1
کار با کل صفحه، در JavaScript
کار با کل صفحه، در JavaScript
4
دریافت ورودی از کاربر، در JavaScript
دریافت ورودی از کاربر، در JavaScript
1
مرورگر اینترنت (Browser)، در JavaScript
مرورگر اینترنت (Browser)، در JavaScript
3
تکنیک Ajax ، در JavaScript
تکنیک Ajax ، در JavaScript
4
ساختار JSON ، در JavaScript
ساختار JSON ، در JavaScript
0
مباحث عمومی، در JavaScript
مباحث عمومی، در JavaScript
2

3453

نویسنده

علیرضا گلمکانی ( admin )

شماره کلید
دسته کلید - دسته بندی

تبادل اطلاعات با یک صفحه اینترنتی دیگر در سرور سایت، با استفاده از تکنیک Ajax در صفحه اجرا شده در سمت کاربر، (ارتباط با صفحه سرور، بر اساس روش GET)، در javascript

در کلید شماره 3452 ، تکنیک Ajax را معرفی کردیم. اکنون قصد داریم که مثالی عملی برای آن اجرا کنیم. در این مبحث، تبادل اطلاعات با صفحه موجود در سرور سایت، بر اساس روش GET می باشد ( کلید شماره 439 ). یعنی یک سری اطلاعات با روش GET به آن صفحه ارسال می شوند و سپس پاسخ صفحه را دریافت می کنیم.

نکته مهم

در این کلید، از کلاس XMLHttpRequest استفاده خواهیم کرد. هنگام استفاده از این کلاس، باید هر دو صفحه بر روی یک دامنه (domain) قرار گرفته باشند (مثلا هر دو در kelidestan.com قرار داشته باشند). بنابراین استفاده از این روش برای درخواست های بین دو دامنه (cross-domain) امکان پذیر نیست (مثلا نمی توان از صفحه ای در دامنه kelidestan.com ، یک صفحه از دامنه example.com فراخوانی شود). برای درخواست های بین دو دامنه (cross-domain)، می توانید از کلاس های موجود در jquery استفاده نمایید.

یک صفحه داریم که صفحه اصلی ما خواهد بود و کاربر مستقیما آن را اجرا می کند (نام آن در این مبحث اهمیتی ندارد و مهم هم نیست که پسوند آن html باشد یا PHP یا ...) و یک صفحه دوم خواهیم داشت که قرار است صفحه اصلی ما، با تکنیک Ajax ، با آن تبادل اطلاعات داشته باشد (بدون اینکه کاربر مستقیما آن صفحه دوم را اجرا کند).

نام صفحه دوم را برابر second_page.php در نظر می گیریم (با پسوند PHP). دقت شود که شما صفحه دوم را با هر پسوندی می توانید انتخاب کنید (البته اگر پسوند برابر html در نظر گرفته شود، دیگر امکان استفاده از روش GET برای ارسال اطلاعات به صفحه، وجود ندارد) و ما با انتخاب پسوند PHP ، هدفمان ارسال اطلاعات با روش GET و همچنین اجرای یک سری کد PHP بوده است تا بدین شکل، مثالی از اجرای کدهای داینامیک داشته باشیم (بر خلاف کدهای HTML که استاتیک هستند). یعنی مثلا اگر قرار است خروجی صفحه برابر 6 باشد، می توان عدد 6 را در یک صفحه html ذخیره کرد، اما ما در این مثال، صفحه را از نوع PHP طراحی می کنیم، به این صورت که یک عدد را با روش GET دریافت کند و آن را دو برابر کرده و نتیجه را در خروجی به ما بدهد. یعنی اگر عدد 3 به ورودی صفحه داده شود، خروجی برابر 6 خواهد بود.

هر دو فایل را در یک پوشه (Folder) قرار می دهیم (بنابراین آدرس URL صفحه دوم را به صورت نسبی در صفحه اصلی ذکر خواهیم کرد و نیازی به آدرس URL کامل و مطلق برای آن نمی باشد).

ابتدا کدهای صفحه second_page.php را بر اساس توضیحاتی که دادیم، به صورت زیر می نویسیم (کدهای PHP) :


<?php
$input_number = $_GET['number'];
$output_number = $input_number * 2;
echo $output_number;
?>

دقت شود که در آن، چارچوب HTML برای صفحه در نظر گرفته نشده، زیرا می خواهیم تنها یک عدد را در خروجی به ما بدهد (بعد آن را در صفحه اصلی نمایش می دهیم که خود دارای چارچوب HTML خواهد بود، زیرا صفحه اصلی در مرورگر اینترنت کاربر نمایش داده می شود).

اکنون به سراغ کدنویسی صفحه اصلی می رویم. همان طور که گفتیم، یک صفحه با چارچوب HTML خواهد بود (با پسوند دلخواه) که موارد زیر را در آن قرار خواهیم داد (موارد لازم) :

1- نوشتن کدهایی برای تبادل اطلاعات با صفحه second_page.php ، بر اساس تکنیک Ajax (کدها را در یک تابع تعریف می کنیم تا تنها زمانی که لازم باشد، اجرا شوند)

2- قرار دادن یک دکمه (button) در صفحه (که با کلیک کاربر بر روی آن، باید با تکنیک Ajax ، اطلاعاتی (عدد 3) به صفحه second_page.php ارسال شده و سپس خروجی صفحه (عدد 6) دریافت و در خروجی صفحه اصلی نمایش داده شود) (با کلیک روی دکمه، تابع حاوی کدها، اجرا خواهد شد)

3- تعریف یک عنصر در صفحه با id منحصربفرد که اطلاعات دریافتی از صفحه، در آن نمایش داده می شوند (درون زوج تگ آن قرار گرفته و نمایش داده می شوند)

بنابراین کدهای صفحه اصلی به صورت زیر نوشته می شوند :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<script>
// define function
function Kelidestan_Get_Data() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() { // بعد از دریافت پاسخ از صفحه
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("show_response").innerHTML = xmlhttp.responseText;
                }
        }
        var URL_Address = "second_page.php";
        var my_number = 3;
        xmlhttp.open("GET", URL_Address + "?number=" + my_number, true);
        xmlhttp.send();
}
</script>

<button onclick="Kelidestan_Get_Data();">کلیک کنید</button>

<p id="show_response"
   style="background-color:#0F6; height:50px; width:100%;">
</p>

</body>
</html>

نتیجه اجرای صفحه اصلی، به صورت زیر می باشد :

خطا - صفحه را دوباره بارگذاری کنید

اکنون کدهای صفحه اصلی را شرح می دهیم. ابتدا به عنصری دقت کنید که نتیجه در آن نمایش داده می شود :


<p id="show_response"
  style="background-color:#0F6; height:50px; width:100%;">
</p>

یک زوج تگ p (با پس زمینه به رنگ سبز) که id آن برابر show_response تعیین شده و در کدهای javascript ، آن را با این id شناسایی می کنیم :


id="show_response"

یک دکمه (button) داریم که با کلیک بر روی آن، عملیات ارسال اطلاعات به صفحه و دریافت پاسخ و نمایش پاسخ، اجرا خواهد شد :


<button onclick="Kelidestan_Get_Data();">کلیک کنید</button>

با مشخصه زیر تعیین کرده ایم که اگر بر روی این دکمه کلیک شد، تابع Kelidestan_Get_Data که در کدهای javascript تعریف شده، اجرا شود (کدهای همه عملیات ها در آن تابع تعریف شده است) :


onclick="Kelidestan_Get_Data();"

اکنون کدهای javascript صفحه را شرح می دهیم :


<script>
// define function
function Kelidestan_Get_Data() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() { // بعد از دریافت پاسخ از صفحه
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("show_response").innerHTML = xmlhttp.responseText;
                }
        }
        var URL_Address = "second_page.php";
        var my_number = 3;
        xmlhttp.open("GET", URL_Address + "?number=" + my_number, true);
        xmlhttp.send();
}
</script>

قبلا هم تذکر دادیم که کدهای کل عملیات ها، در تابعی با نام Kelidestan_Get_Data تعریف شده است. در کدها، از کلاس XMLHttpRequest برای تبادل اطلاعات با صفحه دوم استفاده می شود. ابتدا یک شیء (object) از این کلاس (class) ساخته ایم :


var xmlhttp = new XMLHttpRequest();

سپس تعیین کرده ایم که هنگام دریافت پاسخ از صفحه دوم، چه کدهایی باید در این صفحه اجرا شوند :


xmlhttp.onreadystatechange = function() { // بعد از دریافت پاسخ از صفحه
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("show_response").innerHTML = xmlhttp.responseText;
    }
}

در واقع می توان ساختار این بخش را به شکل کلی زیر نمایش داد :


xmlhttp.onreadystatechange = function() { // بعد از دریافت پاسخ از صفحه
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // کدهایی که بعد از دریافت پاسخ صفحه دوم، در این صفحه اجرا می شوند
    }
}

بنابراین پس از دریافت پاسخ صفحه دوم، کد زیر اجرا خواهد شد :


document.getElementById("show_response").innerHTML = xmlhttp.responseText;

در کد بالا، xmlhttp.responseText همان پاسخ صفحه دوم است (یعنی عدد 6). همچنین با عبارت زیر، به آن زوج تگ p اشاره کرده ایم که باید پاسخ در آن نمایش داده شود (آن عنصر p را انتخاب کرده ایم) :


document.getElementById("show_response")

روش innerHTML برای قرار دادن یک سری کد درون یک عنصر (یک زوج تگ) به کار می رود. بنابراین با اجرای آن کد، پاسخ صفحه دوم، درون زوج تگ p مورد نظر، نمایش داده می شود (قرار می گیرد).

سپس با اجرای کدهای زیر، ارسال اطلاعات به صفحه صورت می گیرد (تا اینجا، اطلاعات را ارسال نکرده بودیم و تنها تعیین کردیم که بعد از دریافت پاسخ، چه کدهایی باید اجرا شود) :


var URL_Address = "second_page.php";
var my_number = 3;
xmlhttp.open("GET", URL_Address + "?number=" + my_number, true);
xmlhttp.send();

آدرس URL صفحه دوم را در متغیر URL_Address تعریف کرده ایم (چون در محل صفحه اصلی قرار گرفته، تنها ذکر نام صفحه دوم کافی است. تعریف URL به صورت نسبی بوده است). عدد 3 هم که به صفحه دوم ارسال خواهد شد را در متغیر my_number تعریف کرده ایم. با عبارت زیر، آدرس URL کلی برای درخواست، تعیین شده است (چون روش GET برای ارسال اطلاعات ذکر شده، باید مقدار متغیرها در آدرس URL نوشته شوند) :


URL_Address + "?number=" + my_number

بنابراین آدرس URL درخواست، به صورت زیر خواهد بود :


second_page.php?number=3
نکته

چون متغیرها در آدرس URL ذکر می شوند، باید مراقب باشیم که ممکن است در مقدار متغیرها، کاراکترهای غیرمجاز برای آدرس URL وجود داشته باشد. بنابراین باید از روش encodeURI برای تبدیل کاراکترهای غیرمجاز برای آدرس URL به کاراکترهای مجاز، استفاده نماییم. البته فعلا روش encodeURI را در این مبحث به کار نبرده ایم (برای عدم شلوغ شدن کدها)، ولی شما حتما آن را ذکر کنید. برای جزئیات بیشتر، کلید شماره 3455 را بخوانید.

یعنی باید خط زیر :


xmlhttp.open("GET", URL_Address + "?number=" + my_number, true);

به این صورت نوشته شود (استفاده از روش encodeURI) :


xmlhttp.open("GET", encodeURI(URL_Address + "?number=" + my_number), true);
نکته مهم

نکات امنیتی مربوط به دریافت اطلاعات را در صفحه دوم به کار ببرید (چون این مبحث، یک مبحث آموزشی بود، ما آنها را ذکر نکردیم). البته شاید این موضوع به ذهنتان برسد که در همین مثال، کاربر با صفحه دوم سر و کار ندارد و مشکلی نخواهد بود، اما این تفکر اشتباه است. زیرا کافی است که کاربر، کدهای صفحه اصلی را مشاهده کرده و آدرس URL صفحه دوم را بیابد، سپس با تکنیک های مختلف می تواند صفحه دوم را مورد حمله قرار دهد (هک کردن آن صفحه به صورت جداگانه و مستقل از این صفحه اصلی).

نکته

برخی مواقع که در حال تمرین کدنویسی در کامپیوتر شخصی خود هستیم، ممکن است یک فایل html را برای تمرین در مرورگر اینترنت خود باز کنیم و بعد برای تمرین تکنیک Ajax ، یک صفحه دوم با پسوند php را در نظر گرفته باشیم، اما تکنیک Ajax به درستی عمل نکند و دلیل آن را تشخیص ندهیم.

یک مشکل رایج که در این مواقع رخ می دهد، این است که چون کاربر صفحه اصلی که پسوند html دارد را به شکل معمولی با مرورگر اینترنت خود باز کرده و اجرا نموده است، این نکته را از یاد برده که چون صفحه دوم که می خواهد بر اساس Ajax از آن اطلاعات بگیرد، دارای پسوند php است، حتما باید توسط یک نرم افزار شبیه ساز سرور مثل Wamp Server ( کلید شماره 367 ) اجرا شود (که برای این منظور، تنها کافی است که همان صفحه اصلی که دارای پسوند html است با نرم افزار شبیه ساز سرور اجرا گردد).

بعد از اجرای نرم افزار شبیه ساز سرور، باید خود صفحه فعلی (index.html) نیز توسط نرم افزار شبیه ساز سرور اجرا شود (اگرچه یک صفحه html است، اما چون در آن از تکنیک AJAX برای دریافت اطلاعات از یک صفحه PHP استفاده می شود، حتما باید توسط نرم افزار شبیه ساز سرور اجرا شود و نباید آن را به شکل معمولی در ویندوز باز کنید).

بنابراین هنگام اجرا در کامپیوتر شخصی، در مرورگر اینتزنت خود چک کنید که در ابتدای آدرس مربوط به اجرای فایل index.html ، حتما عبارت localhost وجود داشته باشد (نشان دهنده اجرا شدن آن توسط نرم افزار شبیه ساز سرور). به عنوان مثال :

طرح رنگ

کپی برداری از محتوای سایت کلیدستان، ممنوع بوده و پیگرد قانونی دارد. (تنها استفاده شخصی کاربر، مجاز است) (کپی برداری توسط سایر وب سایت ها = حرام) (بیشتر بدانید)

به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

جستجو در کلیدستان، توسط گوگل

جستجو در عنوان کلیدها

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو
بستن منو
۱۹۰
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مجموعه ویدئوهای آموزشی JavaScript - مجموعه JavaScript Tutorials - از thenewboston.com
مجموعه ویدئوهای آموزشی JavaScript - مجموعه JavaScript Tutorials - از thenewboston.com
40
مجموعه ویدئوهای آموزشی AJAX - مجموعه AJAX Tutorials - از thenewboston.com
مجموعه ویدئوهای آموزشی AJAX - مجموعه AJAX Tutorials - از thenewboston.com
23
مجموعه ویدئوهای آموزشی JavaScript - مجموعه JavaScript Tutorial
مجموعه ویدئوهای آموزشی JavaScript - مجموعه JavaScript Tutorial
75
مجموعه ویدئوهای آموزشی JavaScript - مجموعه Learn JavaScript
مجموعه ویدئوهای آموزشی JavaScript - مجموعه Learn JavaScript
19
مجموعه ویدئوهای آموزشی JavaScript برای مبتدیان - مجموعه JavaScript beginner tutorials
مجموعه ویدئوهای آموزشی JavaScript برای مبتدیان - مجموعه JavaScript beginner tutorials
33
بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با برنامه نویسی jQuery
مباحث اولیه برای آشنایی با برنامه نویسی jQuery
10
اشاره به عنصرهای صفحه (انتخاب عنصرهای صفحه)، در jQuery
اشاره به عنصرهای صفحه (انتخاب عنصرهای صفحه)، در jQuery
2
کلاس های (Class) عنصرها، در jQuery
کلاس های (Class) عنصرها، در jQuery
1
id عنصرها، در jQuery
id عنصرها، در jQuery
0
رویدادها (Event)، در jQuery
رویدادها (Event)، در jQuery
6
تغییر محتوای صفحه، در jQuery
تغییر محتوای صفحه، در jQuery
8
رنگ ها (Color) و تعیین رنگ، در jQuery
رنگ ها (Color) و تعیین رنگ، در jQuery
1
فرم ها (Form)، در jQuery
فرم ها (Form)، در jQuery
2
دکمه ها (Button)، در jQuery
دکمه ها (Button)، در jQuery
1
اندازه عنصرها و بخش های صفحه، در jQuery
اندازه عنصرها و بخش های صفحه، در jQuery
6
کلیک کردن (Click)، در jQuery
کلیک کردن (Click)، در jQuery
0
کار با کل صفحه، در jQuery
کار با کل صفحه، در jQuery
1
تکنیک AJAX ، در jQuery
تکنیک AJAX ، در jQuery
2
مباحث عمومی، در jQuery
مباحث عمومی، در jQuery
2
بستن منو
۴
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

مباحث اولیه برای آشنایی با JSON
مباحث اولیه برای آشنایی با JSON
مباحث اولیه برای آشنایی با JSON
4
دسته کلیدهایی از موضوع های دیگر
ساختار JSON ، در PHP
ساختار JSON ، در PHP
2
بستن منو
۱۰۴
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
مباحث اولیه برای آشنایی با HTML
24
نمایش متن (Text)، در HTML
نمایش متن (Text)، در HTML
16
نمایش عکس (Image)، در HTML
نمایش عکس (Image)، در HTML
6
لینک ها (Link)، در HTML
لینک ها (Link)، در HTML
2
فهرست ها (لیست ها - List)، در HTML
فهرست ها (لیست ها - List)، در HTML
1
جدول ها (Table)، در HTML
جدول ها (Table)، در HTML
7
فرم ها (Form)، در HTML
فرم ها (Form)، در HTML
21
کلاس های (Class) عنصرها، در HTML
کلاس های (Class) عنصرها، در HTML
1
id عنصرها، در HTML
id عنصرها، در HTML
0
چیدمان عنصرها (Element) در کنار هم، در HTML
چیدمان عنصرها (Element) در کنار هم، در HTML
2
تعیین مشخصات کلی صفحه (Page)، در HTML
تعیین مشخصات کلی صفحه (Page)، در HTML
7
ساختار کلی و بخش بندی صفحه (Page)، در HTML
ساختار کلی و بخش بندی صفحه (Page)، در HTML
2
نمایش یا عدم نمایش عنصرها (Element)، در HTML
نمایش یا عدم نمایش عنصرها (Element)، در HTML
1
عناصر گرافیکی، در HTML
عناصر گرافیکی، در HTML
1
رنگ ها (Color) و تعیین رنگ، در HTML
رنگ ها (Color) و تعیین رنگ، در HTML
1
دکمه ها (Button)، در HTML
دکمه ها (Button)، در HTML
2
پخش صدا (Audio)، در HTML
پخش صدا (Audio)، در HTML
1
کار با کیبورد (Keyboard)، در HTML
کار با کیبورد (Keyboard)، در HTML
2
اطلاعات و پردازش اطلاعات، در HTML
اطلاعات و پردازش اطلاعات، در HTML
1
مباحث عمومی، در HTML
مباحث عمومی، در HTML
6