AJAX مثال ها (AJAX Examples)
اینجا چند مثال عملی از «AJAX مثال ها» داریم. «AJAX» یعنی درخواستِ پس زمینه بدون رفرش. «XMLHttpRequest» یک شیء برای فرستادن درخواست است. با مثال های کوتاه، مفهوم را می گیریم.
1) ساده ترین درخواست AJAX از فایل متنی
یک درخواست بفرست. پاسخ متن را در صفحه بگذار. این پایه ای ترین الگوست.
function loadText() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("out").textContent = this.responseText;
};
xhttp.open("GET", "note.txt");
xhttp.send();
}
2) استفاده از کال بک (Callback) برای پاسخ
«کال بک (Callback)» یعنی تابعی که بعد رسیدن پاسخ اجرا می شود.
function getText(callback) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
callback(this.responseText);
};
xhttp.open("GET", "note.txt");
xhttp.send();
}
function showText(text) {
document.getElementById("out").textContent = text;
}
3) خواندن هدرهای پاسخ (Headers)
«هدر (Header)» اطلاعات جانبیِ پاسخ است؛ مثل زمان آخرین تغییر.
function readHeaders() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const all = this.getAllResponseHeaders();
document.getElementById("hdr").textContent = all;
};
xhttp.open("GET", "note.txt");
xhttp.send();
}
4) لود فایل XML با AJAX
یک فایل «XML» بگیر. سپس با «DOM» عناصرِ موردنیاز را بخوان.
function loadXML() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const xml = this.responseXML;
const nodes = xml.getElementsByTagName("CD");
document.getElementById("count").textContent = nodes.length;
};
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();
}
5) دریافت داده از سرور با PHP/ASP
با تایپ کاربر، پیشنهاد نام ها را از سرور بگیر. خروجی در صفحه نشان بده.
function suggest(q) {
if (q.length === 0) {
document.getElementById("hint").textContent = "";
return;
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("hint").textContent = this.responseText;
};
xhttp.open("GET", "gethint.php?q=" + encodeURIComponent(q));
xhttp.send();
}
6) خواندن اطلاعات پایگاه داده
شناسه مشتری انتخاب کن. سپس رکورد همان مشتری را از سرور بگیر.
function showCustomer(id) {
if (id === "") {
document.getElementById("cust").innerHTML = "";
return;
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("cust").innerHTML = this.responseText;
};
xhttp.open("GET", "getcustomer.php?q=" + encodeURIComponent(id));
xhttp.send();
}
لینک های مرتبط
مثال های پیشرفته تر را در AJAX کاربردها ببین. برای کار با پایگاه داده، به AJAX پایگاه داده سر بزن. توضیح PHP و ASP را هم اینجا ببین: AJAX و PHP و AJAX و ASP.
جمع بندی سریع
- XMLHttpRequest درخواست را می فرستد.
- کال بک نتیجه را پردازش می کند.
- هدرها نکات مهم پاسخ اند.
- XML را با DOM پیمایش کن.
- پایگاه داده را با پارامتر بخوان.