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

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
تعریف شیء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
۱مقدمه
۲ AJAX XMLHttp
۳درخواست AJAX
۴پاسخ سرور
۵مثال‌های XML در AJAX
۶مثال‌های PHP در AJAX
۷مثال‌های ASP در AJAX
۸مثال پایگاه داده در AJAX
۹نرم‌افزارهای XML
۱۰مثال‌های AJAX
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

شیء XMLHttpRequest برای تبادل داده با یک سرور استفاده می‌شود. [۱]

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

برای ارسال یک درخواست به یک سرور، ما از متدهای send() و open() شیء 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 استفاده می‌شود

GET یا POST؟

GET نسبت به POST ساده‌تر و سریع‌تر است و می‌تواند برای موارد گوناگونی استفاده شود.

اما، همیشه از درخواست‌های POST استفاده کنید اگر:

  • یک فایل کش شده یک option نباشد (بروزرسانی یک فایل یا دیتابیس روی سرور)
  • ارسال حجم زیادی از داده به سمت سرور (POST هیچ گونه محدودیت اندازه‌ای ندارد)
  • ارسال داده ورودی کاربر (که می‌تواند شامل کاراکترهای ناشناخته باشد)، POST بسیار قدرتمندتر و امن‌تر از GET است

درخواست های GET

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

مثال

1 xhttp.open("GET", "demo_get.asp", true);
2 xhttp.send();

در مثال بالا، شما ممکن است یک نتیجه Cache شده دریافت کنید. برای جلوگیری از این امر، یک ID (به فارسی: شناسه) به خصوص به URL اضافه کنید:

مثال

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

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

مثال

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

درخواست های POST

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

مثال

1 xhttp.open("POST", "demo_post.asp", true);
2 xhttp.send();

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

مثال

1 xhttp.open("POST", "ajax_test.asp", true);
2 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
3 xhttp.send("fname=Henry&lname=Ford");
متد توضیحات
setRequestHeader(header, value) Header های HTTP را به درخواست اضافه می‌کند.

header: نام header را مشخص می‌کند.

value: مقدار header را مشخص می‌کند.

آدرس (به انگلیسی: URL) - یک فایل روی یک سرور

پارامتر url متد open()، آدرس یک فایل روی یک سرور است:

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

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

غیرهمزمانی - True یا False؟

درخواست‌های سرور می‌بایست به صورت غیرهمزمان ارسال شوند.

پارامتر async متد open() می‌بایست مقدار true داشته باشد:

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

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

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

ویژگی onreadystatechange

با شیء XMLHttpRequest شما می‌توانید یک تابع برای زمانی که درخواست یک پاسخ دریافت می‌کند، ایجاد کنید.

تابع در ویژگی onreadystatechange شیء XMLHttpResponse تعریف می‌شود:

مثال

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

شما در مورد onreadystatechange در فصل آینده مطالب بیشتری را خواهید آموخت.

درخواست های همزمان

برای اجرای یک درخواست به صورت هزمان، مقدار پارامتر سوم در متد open() را به false تغییر دهید:

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

گاهی اوقات async=false برای تست کردن استفاده می‌شود. شما همچنین می‌توانید درخواست‌های همزمان را در کدهای قدیمی‌تر جاوا اسکریپت بیابید.

ازآنجایی که کد برای دریافت پاسخ سرور صبر خواهد کرد، نیازی به تابع onreadystatechange نیست:

مثال

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

استفاده از حالت همزمان در XMLHttpRequest (async = false) توصیه نمی‌شود چرا که جاوا اسکریپت اجرای کد را تا زمانی که پاسخ سرور آماده شود متوقف می‌کند. اگر سرور مشغول یا کند باشد، نرم‌افزار دچار هنگ می‌شود یا متوقف می‌گردد.

حالت همزمان در XMLHttpRequest در حال حذف از استاندارد وب است، اما این فرایند حذف ممکن است چندین سال طول بکشد.

ابزارهای توسعه مدرن به گونه ای در حال طراحی هستند که درباره استفاده از حالت همزمان هشدار دهند و ممکن است یک خطای InvalidAccessError در زمان استفاده از حالت همزمان ایجاد کنند.

منابع آموزشی