AJAX - شیء XMLHttpRequest

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

مفهوم اصلی و کلیدی 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") را برمی‌گرداند.


منابع آموزشی