AJAX پایگاه داده (AJAX Database)
اینجا با «AJAX پایگاه داده» کار می کنیم. «AJAX» یعنی درخواستِ پس زمینه بدون رفرش. «پایگاه داده (Database)» جایی برای نگهداری منظم داده هاست. کاربر گزینه می زند و سرور اطلاعات می دهد.
نمونه زنده: انتخاب مشتری و دریافت جزئیات
رویداد onchange اجرا می شود. سپس تابع showCustomer() درخواست می فرستد و پاسخِ سرور را نمایش می دهد.
function showCustomer(str) {
if (str === "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
};
xhttp.open("GET", "getcustomer.php?q=" + str);
xhttp.send();
}
روند کار AJAX پایگاه داده
- کاربر مشتری را از منوی کشویی انتخاب می کند.
- XMLHttpRequest ساخته و هندلرِ پاسخ تنظیم می شود.
- درخواست به getcustomer.php?q=... ارسال می شود.
- سرور رکورد مرتبط را از پایگاه داده می خواند.
- پاسخ HTML برمی گردد و در DOM نمایش می یابد.
نکته: ورودی خالی را زود بررسی کن تا صفحه تمیز بماند.
هشدار: همیشه ورودی را در سرور اعتبارسنجی کن. جلوی تزریق را بگیر.
صفحه سرور: اجرای کوئری و خروجی HTML
در نمونه منبع، فایل getcustomer.php یک کوئری آماده اجرا می کند. سپس داده ها را داخل جدول HTML برمی گرداند. پاسخ، مستقیم در ناحیه txtHint رندر می شود.
لینک های داخلی مفید
ملاک پاسخ را در AJAX پاسخ ببین. نمونه سمت ASP در AJAX و ASP است. صفحه همین موضوع: AJAX پایگاه داده.
جمع بندی سریع
- رویداد کاربر، درخواست AJAX را آغاز می کند.
- سرور با رکورد همان مشتری پاسخ می دهد.
- DOM را با HTML دریافت شده به روز کن.
- ورودی خالی و خطا را مدیریت کن.