AJAX معرفی (AJAX Intro)
«ایجکس (AJAX)» یعنی گفت وگو با سرور، بدون رفرش صفحه. پس بخش های صفحه عوض می شوند، اما کل صفحه دوباره لود نمی شود. این کار تجربه کاربر را سریع و روان می کند.
مثال ساده با XMLHttpRequest
دکمه را می زنیم، متن جدید از سرور می آید و در صفحه می نشیند.
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
document.getElementById("demo").innerHTML = this.responseText;
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
نکته: «XMLHttpRequest» شیءِ مرورگر برای درخواستِ پس زمینه است.
AJAX چیست؟
AJAX یک زبان نیست؛ ترکیبی از ابزارهاست تا داده را بی سروصدا بگیری.
- شیء
XMLHttpRequestبرای درخواست از سرور. - JavaScript و DOM برای نمایش یا پردازش داده.
گاهی داده JSON است، نه XML. اسمش گمراه کننده است، ولی مفهومش ساده است.
چگونه AJAX کار می کند
- 1) رویداد رخ می دهد؛ مثلاً دکمه کلیک می شود.
- 2) با جاوااسکریپت،
XMLHttpRequestساخته می شود. - 3) درخواست به سرور فرستاده می شود.
- 4) سرور درخواست را پردازش می کند.
- 5) پاسخ برمی گردد.
- 6) جاوااسکریپت پاسخ را می خواند.
- 7) بخش لازمِ صفحه به روزرسانی می شود.
مرورگرهای مدرن و Fetch API
امروز «فچ (Fetch)» ساده تر از XHR همین کار را انجام می دهد. نمونه ها را در Fetch API ببین.
گام های عملی
- عنصر نمایش نتیجه را با
getElementByIdبگیر. - دکمه ای بساز و روی کلیک، تابع را صدا بزن.
- با XHR یا Fetch، فایل یا API را بخوان.
- پاسخ را در بخش هدفِ صفحه قرار بده.
برای گرفتن مکان کاربر، صفحه Geolocation API را ببین. برای ادامه AJAX و جزئیات HTTP، آن صفحه را دنبال کن.
جمع بندی سریع
- AJAX صفحه را بدون رفرش، به روز می کند.
- XHR ابزار کلاسیک درخواست است.
- Fetch جایگزین ساده تر در مرورگرهای جدید است.
- پاسخ را در DOM نمایش بده.