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

از ویکی کد
پرش به ناوبری پرش به جستجو
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
AJAX
۱JavaScript:مقدمه‌ای بر AJAX
۲JavaScript:AJAX - شیء XMLHttpRequest
۳JavaScript:AJAX - ارسال یک درخواست به سرور
۴JavaScript:AJAX - پاسخ سرور
۵JavaScript:مثال‌های XML در AJAX
۶JavaScript:مثال‌های PHP در AJAX
۷JavaScript:مثال‌های ASP در AJAX
۸JavaScript:مثال پایگاه داده در AJAX
۹JavaScript:نرم‌افزارهای XML
۱۰JavaScript:مثال‌های AJAX
JSON
۱JavaScript:مقدمه‌ای بر JSON
۲JavaScript:شیوهٔ نوشتار JSON
۴JavaScript:انواع داده‌های مجاز در JSON
۵متد JSON.parse()
۶متد JSON.stringify()
۷JavaScript:اشیاء JSON
۸JavaScript:آرایه‌ها در JSON
۹JavaScript:PHP در JSON
۱۰JavaScript:HTML در JSON
۱۱JavaScript:JSONP
JS vs jQuery
۱JavaScript:جاوااسکریپت / انتخابگرهای DOM جی‌کوئری
۲JavaScript:جاوااسکریپت / عناصر HTML جی‌کوئری
۳JavaScript:جاوااسکریپت / استایل‌های CSS در جی‌کوئری
۴JavaScript:جاوااسکریپت / HTML DOM در جی‌کوئری
---

[۱]

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

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

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

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

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
توضیحات متد
نوع درخواست را مشخص می‌کند.

Method :نوع درخواست: get یا post

url: آدرس سرور (محل ذخیره فایلها)

Async: True (به معنای غیرهمزمان) یا false (به معنای همزمان) است.

open(method, url, async)
درخواست را به سمت سرور ارسال می‌کند.

برای Get استفاده می‌شود.

send()
درخواست را به سمت سرور ارسال می‌کند.

برای POST استفاده می‌شود.

send(string)

GET یا POST؟

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

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

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

درخواست‌های GET

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

مثال

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

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

مثال

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

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

مثال

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

درخواست‌های POST

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

مثال

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

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

مثال

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

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

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

setRequestHeader(header, value)

آدرس (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تعریف می‌شود:

مثال

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

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

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

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

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

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

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

مثال

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

منابع آموزشی