AJAX - شیء XMLHttpRequest

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

مفهوم اصلی و کلیدی AJAX، شیءای به نام XMLHttpRequest است. [۱]

شیء XMLHttpRequest

تمام مرورگرهای مدرن از شیء XMLHttpRequest پشتیبانی می‌کنند.

شیء XMLHttpRequest را می‌توان برای تبادل داده با یک وب سرور در پشت صحنه (background) استفاده کرد. این بدان معناست که بروزرسانی بخشی از یک صفحه بدون از دوباره بارگذاری کردن کل یک صفحه، امکان‌پذیر است.

ساخت یک شیء XMLHttpRequest

تمامی مرورگرهای مدرن (کروم، فایرفاکس، سافاری، اپرا، IE7+ ،Edge) به صورت شیء XMLHttpRequest را به صورت تعبیه شده یا همان پیشفرض دارند.

شیوه نوشتار برای ساخت یک شیء XMLHttpRequest:

variable = new XMLHttpRequest();

مثال

var xhttp = new XMLHttpRequest();


مشاهدهٔ نتیجه


دسترسی به دامنه ها

برای دلایل امنیت، مرورگرهای مدرن اجازه دسترسی به چندین دامنه را نمی‌دهند.

این بدان معناست که هر دو یعنی صفحه وب و فایل XML ای که می‌بایست بارگذاری شود، باید در یک سرور مشترک قرار گرفته باشند.

تمامی مثال‌ها در ویکی‌کد، فایل‌های XML قرار گرفته روی دامنه wikicod.ir را باز می‌کنند.

اگر شما بخواهید از هر یک مثال‌ها در صفحه وب خود استفاده کنید، فایل‌های XML ای که می‌خواهید بارگذاری کنید، می‌بایست روی سرور خودتان قرار گرفته باشند.

مرورگرهای قدیمی (IE5 و IE6)

نسخه‌های قدیمی اینترنت اکسپلور (۶/۵) از یک شیء با نام ActiveX به جای شیء XMLHttpRequest استفاده می‌کنند:

variable = new ActiveXObject("Microsoft.XMLHTTP");

برای مدیریت مرورگرهای قدیمی IE5 و IE6، می‌بایست بررسی کنید که آیامرورگر از شیء XMLHttpRequest پشتیبانی می‌کند یا نه، در غیراین‌صورت یک شیء ActiveX بسازید:

مثال

1if (window.XMLHttpRequest) {
2   // code for modern browsers
3   xmlhttp = new XMLHttpRequest();
4 } else {
5   // code for old IE browsers
6   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
7}


مشاهدهٔ نتیجه


متدهای شیء XMLHttpRequest

متد توضیحات
new XMLHttpRequest() یک شیء XMLHttpRequest جدید ایجاد می‌کند
abort() درخواست جاری را Cancel می کند
getAllResponseHeaders() اطلاعات header را دریافت می‌کند
getResponseHeader() اطلاعات به خصوصی از header را دریافت می‌کند
open(method, url, async, user, psw) درخواست را مشخص می‌کند.

method: نوع درخواست GET یا POST را مشخص می‌کند

async: به معنای غیرهمزمان (true) یا به معنای همزمان (false) است

user: نام کاربری اختیاری

psw: رمز عبور اختیاری

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

برای درخواست‌های GET استفاده می‌شود

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

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

setRequestHeader() یک جفت label/value به header ای که قرار است ارسال شود، اضافه می‌کند

ویژگی های شیء XMLHttpRequest

ویژگی توضیحات
onreadystatechange تابعی را که می بایست زمانی که Ready state تغییر کرد، اجرا شود را مشخص می‌کند
readyState وضعیت XMLHttpRequest را نگهداری می‌کند.

۰: درخواست مقدار دهی نشده‌است

۱: ارتباط با سرور برقرار شد

۲: درخواست دریافت شد

۳: درخواست در حال پردازش

۴: پردازش درخواست به پایان رسید، پاسخ (Response) آماده است

responseText داده‌های پاسخ (Response) را به صورت یک رشته متنی برمی‌گرداند
responseXML داده‌های پاسخ (Response) را به صورت یک XML برمی‌گرداند
status شماره وضعیت یک درخواست را برمی‌گرداند

200: "ok"

403: "forbidden"

404: "not found"

نکته نکته: برای مشاهده یک لیست کامل به مرجع کامل پیام‌های HTTP مراجعه کنید

statusText متن وضعیت درخواست مانند ("OK" or "Not Found") را برمی‌گرداند.

منابع آموزشی