AJAX به ما امکان می‌دهد داده‌ها را بدون رفرش صفحه از سرور دریافت یا ارسال کنیم.
در این درس، چند مثال عملی برای درک بهتر AJAX ارائه می‌دهیم.

🔹 1. مثال ساده: بارگذاری متن

HTML:

<button onclick="loadData()">Load Text</button>
<div id="demo"></div>

JavaScript:

function loadData() {
  let xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerText = this.responseText;
    }
  };
  xhttp.open("GET", "data.txt", true);
  xhttp.send();
}

📌 با کلیک روی دکمه، محتوای فایل data.txt بدون رفرش صفحه نمایش داده می‌شود.

🔹 2. مثال با JSON

data.json:

{
  "name": "Ali",
  "age": 25,
  "email": "ali@example.com"
}

JavaScript:

fetch("data.json")
  .then(response => response.json())
  .then(data => {
    document.getElementById("demo").innerText = 
      `Name: ${data.name}, Age: ${data.age}, Email: ${data.email}`;
  })
  .catch(error => console.error("Error:", error));

📌 Fetch API پاسخ JSON را دریافت و روی صفحه نمایش می‌دهد.

🔹 3. مثال با POST

HTML Form:

<input type="text" id="name" placeholder="Name">
<input type="number" id="age" placeholder="Age">
<button onclick="submitData()">Submit</button>
<div id="result"></div>

JavaScript:

function submitData() {
  let name = document.getElementById("name").value;
  let age = document.getElementById("age").value;

  fetch("submit.php", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: `name=${name}&age=${age}`
  })
  .then(response => response.text())
  .then(data => {
    document.getElementById("result").innerText = data;
  });
}

submit.php:

<?php
$name = $_POST['name'];
$age = $_POST['age'];
echo "Received: Name = $name, Age = $age";
?>

📌 داده‌ها بدون رفرش صفحه به سرور ارسال و پاسخ روی صفحه نمایش داده می‌شود.

🔹 4. مثال با XML

data.xml:

<users>
  <user>
    <name>Ali</name>
    <age>25</age>
  </user>
  <user>
    <name>Reza</name>
    <age>30</age>
  </user>
</users>

JavaScript:

let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    let xmlDoc = this.responseXML;
    let users = xmlDoc.getElementsByTagName("user");
    let output = "";
    for (let i = 0; i < users.length; i++) {
      let name = users[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
      let age = users[i].getElementsByTagName("age")[0].childNodes[0].nodeValue;
      output += `<p>Name: ${name}, Age: ${age}</p>`;
    }
    document.getElementById("demo").innerHTML = output;
  }
};
xhttp.open("GET", "data.xml", true);
xhttp.send();

🔹 5. نکات مهم

• همیشه readyState == 4 و status == 200 را بررسی کنید.

• برای JSON از response.json() و برای XML از responseXML استفاده کنید.

• AJAX می‌تواند با GET یا POST کار کند.

• استفاده از Fetch API ساده‌تر و مدرن‌تر است.

✅ خلاصه

• AJAX → تبادل داده با سرور بدون رفرش صفحه

• می‌تواند داده‌ها را از متن، JSON، XML یا PHP/ASP/JSP دریافت کند

• روش‌ها: XMLHttpRequest یا Fetch API

• کاربردها: فرم‌ها، بارگذاری محتوا، Live Search، نمایش داده‌های دیتابیس