XMLHttpRequest (DOM XMLHttpRequest)
«درخواست آژاکس» یعنی درخواست پس زمینه بدون رفرش صفحه. شی «XMLHttpRequest» این کار را انجام می دهد. «DOM (Document Object Model)» مدل شی گرای سند است. با این شی، داده را از سرور می گیریم یا می فرستیم. مثل گرفتن نمره ها بدون عوض شدن کل صفحه.
معرفی سریع XMLHttpRequest
شی «XMLHttpRequest» برای تبادل داده با سرور است. پس بخش هایی از صفحه به روز می شود. اما کل صفحه دوباره لود نمی شود. این یعنی تجربه روان تر برای کاربر.
متدهای مهم
- open(method, url, async): تنظیم نوع و آدرس درخواست.
- send(string): فرستادن درخواست به سرور.
- setRequestHeader(): افزودن هدر سفارشی.
- abort(): لغو درخواست جاری.
- getResponseHeader(): گرفتن یک هدر پاسخ.
- getAllResponseHeaders(): گرفتن همه هدرهای پاسخ.
ویژگی های مهم
- onreadystatechange: تابعی که با تغییر وضعیت اجرا می شود.
- readyState: وضعیت از 0 تا 4؛ 4 یعنی پاسخ آماده.
- responseText: پاسخ به صورت رشته.
- responseXML: پاسخ به صورت XML.
- status: کد وضعیت مثل 200 یا 404.
- statusText: متن وضعیت مثل OK.
نمونه GET با درخواست آژاکس
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "/data.xml", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var text = xhr.responseText;
console.log(text);
}
};
xhr.send(null);
<\/script>
نمونه POST با هدر سفارشی
<script>
var xhr = new XMLHttpRequest();
xhr.open("POST", "/submit", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send("name=Ali&score=20");
<\/script>
مراحل عملی ساده
- یک شی XMLHttpRequest بساز.
- با
openروش و آدرس را تعیین کن. - تابع
onreadystatechangeرا تنظیم کن. - با
sendدرخواست را بفرست.
نکته: همیشه وضعیت 4 و کد 200 را بررسی کن. سپس پاسخ را پردازش کن. این کار خطاها را کاهش می دهد.
لینک های داخلی مرتبط
همچنین صفحه مقدمه AJAX را ببین. برای تعامل با کامنت ها، صفحه DOM Comment نیز مفید است. برای تمرین بیشتر، از همین «درخواست آژاکس» در مثال ها استفاده کن.
جمع بندی سریع
- XMLHttpRequest برای درخواست آژاکس است.
- با open و send کار شروع می شود.
- readyState=4 یعنی پاسخ آماده است.
- status=200 یعنی همه چیز اوکی است.
- responseText متن پاسخ را می دهد.