AJAX و XML

AJAX چیست؟

AJAX مخفف Asynchronous JavaScript and XML است؛ تکنیکی برای دریافت داده از سرور بدون رفرش صفحه. نامش خودش گویاست: X آن یعنی XML! در اصل AJAX برای دریافت XML طراحی شد (امروزه JSON رایج‌تر است اما XML همچنان کاربرد دارد).

دریافت XML با XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open("GET", "books.xml");

xhr.onload = function () {
    if (xhr.status === 200) {
        // responseXML: سند XML پارس‌شده آماده!
        const xmlDoc = xhr.responseXML;
        const books = xmlDoc.getElementsByTagName("book");

        for (let book of books) {
            console.log(book.getElementsByTagName("title")[0].textContent);
        }
    }
};

xhr.send();

دریافت XML با fetch

API مدرن fetch پراپرتی آماده XML ندارد، اما با text() و DOMParser به‌راحتی جبران می‌شود:

const response = await fetch("books.xml");
const text = await response.text();

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(text, "text/xml");

const books = xmlDoc.getElementsByTagName("book");
for (let book of books) {
    console.log(book.getElementsByTagName("title")[0].textContent);
}

مثال کامل: نمایش کتاب‌ها در جدول HTML

async function loadBooks() {
    const response = await fetch("books.xml");
    const text = await response.text();
    const xmlDoc = new DOMParser().parseFromString(text, "text/xml");

    const books = xmlDoc.getElementsByTagName("book");
    let html = "<table border='1'><tr><th>عنوان</th><th>قیمت</th></tr>";

    for (let book of books) {
        const title = book.getElementsByTagName("title")[0].textContent;
        const price = book.getElementsByTagName("price")[0].textContent;
        html += `<tr><td>${title}</td><td>${price}</td></tr>`;
    }

    html += "</table>";
    document.getElementById("output").innerHTML = html;
}

ارسال XML به سرور

const xmlData = '<order><item id="1" qty="2"/></order>';

await fetch("api.php", {
    method: "POST",
    headers: { "Content-Type": "application/xml" },
    body: xmlData
});

نکات مهم

• هدر سرور: سرور باید Content-Type: text/xml یا application/xml بفرستد وگرنه responseXML تهی است
• Same-Origin Policy: دریافت XML از دامنه دیگر نیاز به CORS دارد
• خطای پارس: سند XML خطادار کل درخواست را خراب می‌کند — همیشه سمت سرور سند معتبر بسازید

XML یا JSON برای AJAX؟