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 بسازید:
مثال
1 if (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" <translate> نکته</translate> نکته: برای مشاهده یک لیست کامل به مرجع کامل پیام‌های HTTP مراجعه کنید |
| statusText | متن وضعیت درخواست مانند ("OK" or "Not Found") را برمی‌گرداند. |
منابع آموزشی