آموزش طراحی سایت (HTML CSS Javascript) | آتریا

آموزش آجاکس درخواست

از شیء XMLHttpRequest برای تبادل داده با یک سرور استفاده می شود.

ارسال درخواست به یک سرور

بری ارسال یک درخواست به یک سرور، ما از متدهای ()open و ()send از شیء XMLHttpRequest استفاده می کنیم:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

متد	توضیحات
(open(method, url, async	نوع درخواست را مشخص می کند method: نوع درخواست،که می تواند GET یا POST باشد. url: مکان(فایل) سرور را مشخص می کند. async: true(غیرهمزمان) یا false(همزمان).
()send	درخواست را به سرور ارسال می کند(برای GET از آن استفاده می کنند)
(send(string	درخواست را به سرور ارسال می کند( برای POST از آن استفاده می کنند)

متد

توضیحات

(open(method, url, async

نوع درخواست را مشخص می کند

method: نوع درخواست،که می تواند GET یا POST باشد.

url: مکان(فایل) سرور را مشخص می کند.

async: true(غیرهمزمان) یا false(همزمان).

()send

درخواست را به سرور ارسال می کند(برای GET از آن استفاده می کنند)

(send(string

درخواست را به سرور ارسال می کند( برای POST از آن استفاده می کنند)

GET یا POST ؟

متد GET ساده تر و پرسرعت تر از متد POST است و می تواند در بیشتر موارد بکار برده شود.

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

آپدیت کردن یک فایل یا پایگاه داده در سرور.
ارسال داده های حجیم به سرور(متد POST دارای محدودیت اندازه نیست).
ارسال ورودی های کاربر(که ممکن است دارای کاراکترهای نامعلومی باشد). زیرا متد POST قوی تر و امن تر از متد GET است.

درخواست با متد GET

یک درخواست ساده با متد GET:

مثال

xhttp.open("GET", "demo_get.php", true);
xhttp.send();

خودتان امتحان کنید »

در مثال بالا ممکن است شما یک نتیجه ی ذخیره شده در کش را مشاهده کنید، برای اجتناب از این کار، یک ID یکتا به URL اضافه می کنیم:

مثال

xhttp.open("GET", "demo_get.php?t=" + Math.random(), true);
xhttp.send();

خودتان امتحان کنید »

اگر می خواهید که اطلاعاتی را به وسیله ی متد GET ارسال کنید، اطلاعات را به URL اضافه کنید:

مثال

xhttp.open("GET", "demo_get2.php?fname=Henry&lname=Ford", true);
xhttp.send();

خودتان امتحان کنید »

درخواست با متد POST

یک درخواست ساده با متد POST:

مثال

xhttp.open("POST", "demo_post.php", true);
xhttp.send();

خودتان امتحان کنید »

برای ارسال داده ها مانند یک فرم HTML با متد POST، یک سرفصل HTTP را به وسیله ی متد ()setRequestHeader اضافه کنید. سپس به وسیله ی متد ()send داده هایی که می خواهید ارسال کنید را مشخص کنید:

مثال

xhttp.open("POST", "ajax_test.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

خودتان امتحان کنید »

متد	توضیحات
(setRequestHeader(header, value	سرفصل های HTTP را به درخواست اضافه می کند. header: نام سرفصل را مشخص می کند. value: مقدار سرفصل را مشخص می کند.

متد

توضیحات

(setRequestHeader(header, value

سرفصل های HTTP را به درخواست اضافه می کند.

header: نام سرفصل را مشخص می کند.

value: مقدار سرفصل را مشخص می کند.

پارامتر url فایلی است که در سرور قرار دارد

پارامتر url از متد ()open درواقع یک آدرس از فایلی است که بر روی یک سرور قرار دارد:

xhttp.open("GET", "ajax_test.php", true);

این فایل می تواند از هر نوعی باشد. مانند txt. یا xml. یا فایل های اسکریپتی مانند asp. یا php. (که می توانند قبل از برگرداندن پاسخ از سرور، اعمالی را انجام دهند).

غیر همزمان- true یا false

آجاکس بر پایه ی جاوااسکریپت و XML غیر همزمان می باشد و برای اینکه شیء XMLHttpRequest بصورت آجاکسی عمل کند، پارامتر async از متد ()open باید برابر با true باشد:

xhttp.open("GET", "ajax_test.php", true);

ارسال درخواست ها به صورت غیر همزمان، برای برنامه نویسان وب بسیار مفید واقع شده است. بسیاری از کارهای ارائه شده در سرور، زمان بر هستند. بنا براین قبل از آجاکس، این عملکرد می توانست باعث هنگ کردن یا متوقف شدن اپلیکیشن شود.

به وسیله ی آجاکس، جاوااسکریپت نیاز ندارد تا برای پاسخ دادن سرور، انتظار بکشد، اما به جای آن می تواند:

در هنگام انتظار برای پاسخ سرور، دیگر اسکریپت ها را اجرا کند.
پرداختن به درخواست، هنگامی که درخواست آماده شده است.

Async=true

هنگام استفاده از async=true، یک تابع را مشخص کنید تا هنگامی که توسط رویداد onreadystatechange پاسخ آماده شد، اجرا شود:

مثال

xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

خودتان امتحان کنید »

در مقاله های بعدی، بیشتر با رویداد onreadystatechange آشنا خواهید شد.

Async=false

برای اینکه async=false قرار دهید، کافی است پارامتر سوم از متد ()open را برابر با false قرار دهید:

xhttp.open("GET", "ajax_info.txt", false);

استفاده از async=false توصیه نمی شود. اما برای درخواست های کوچک(small) این گزینه مناسب است.

به خاطر داشته باشید که تازمانی که پاسخ سرور آماده نباشد، اجرا شدن را ادامه نمی دهد. اگر که سرور مشغول باشد و یا کند باشد، اپلیکیشن مورد نظر یا هنگ می کند یا متوقف می شود.

نکته: هنگامی که شما از async=false استفاده می کنید، نباید تابع onreadystatechange را بنویسید-تنها کد مورد نظر را بعد از عبارت ()send قرار دهید:

مثال

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

خودتان امتحان کنید »

: نوشته شده توسط احسان عباسی; بازدید: 7097

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی