مقدمه (AJAX Introduction)
در این درس با «مقدمه AJAX» آشنا می شوی. AJAX یعنی «Asynchronous JavaScript And XML». یعنی بخش های صفحه بدون رفرش عوض شوند. مثل وقتی پیامک می رسد، اما گوشی ری استارت نمی شود. این کار با شیء XMLHttpRequest و DOM انجام می شود. DOM ساختار درختی صفحه است.
AJAX چیست؟
AJAX زبان برنامه نویسی نیست. فقط یک ترکیب است. مرورگر با XMLHttpRequest داده می گیرد. سپس JavaScript و DOM نمایش را عوض می کنند. نام AJAX کمی گمراه کننده است. داده می تواند XML، متن ساده، یا JSON باشد.
نکته: به جای XML می توان از JSON هم استفاده کرد. JSON یک قالب سبک برای داده است.
نمونه AJAX
صفحه HTML
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
در HTML یک div برای نمایش قرار دارد. یک دکمه هم هست. با کلیک، تابع loadDoc اجرا می شود. سپس از سرور متن می گیرد و همان div را عوض می کند.
تابع loadDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
فایل ajax_info.txt فقط چند خط HTML ساده دارد. سرور آن را می فرستد. سپس JavaScript آن را داخل div قرار می دهد.
کارکرد AJAX چگونه است؟
- یک رویداد رخ می دهد. مثل بارگذاری یا کلیک.
- JavaScript شیء XMLHttpRequest را می سازد.
- درخواست به سرور ارسال می شود.
- سرور درخواست را پردازش می کند.
- سرور پاسخ را برمی گرداند.
- JavaScript پاسخ را می خواند.
- JavaScript بخش های صفحه را به روز می کند.
گام های عملی سریع
- کد نمونه را در ادیتور باز کن. سپس اجرا کن.
- روی دکمه بزن. تغییر متن را ببین.
- آدرس فایل را عوض کن. پاسخ متفاوت بگیر.
رفتن به مراحل بعدی
برای ادامه مسیر AJAX، صفحه سرور را ببین: سرور (XML Server). سپس ایجاد شیء درخواست را یاد بگیر: ساخت XMLHttpRequest. اگر نیاز داشتی، از همین صفحه با عنوان مقدمه AJAX به ابتدا برگرد.
جمع بندی سریع
- AJAX صفحه را بدون رفرش به روز می کند.
- XMLHttpRequest داده را از سرور می آورد.
- DOM فقط بخش لازم را عوض می کند.
- داده می تواند JSON یا متن باشد.
- همه چیز در پس زمینه انجام می شود.