AJAX

AJAX (Asynchronous JavaScript and XML) هي تقنية تُستخدم في JavaScript للتواصل مع السيرفر بشكل غير متزامن، أي دون الحاجة لإعادة تحميل الصفحة بالكامل. هذه التقنية تتيح تجربة مستخدم سلسة وتفاعلية، وهي أساس تطبيقات الويب الحديثة مثل Gmail وFacebook.

⚙️ ما هو AJAX؟

AJAX ليست لغة برمجة، بل طريقة تستخدم JavaScript (أو مكتبات مثل jQuery) للتواصل مع الخادم باستخدام كائن يُسمى XMLHttpRequest (أو fetch حديثًا).

🧱 مكونات AJAX الأساسية:
  1. HTML: لتكوين واجهة المستخدم.
  2. JavaScript: لإنشاء الطلبات والتعامل مع الردود.
  3. خادم (Server): يعالج الطلبات ويعيد البيانات (عادة بصيغة JSON أو XML).
  4. كائن XMLHttpRequest أو fetch API: لتنفيذ الطلبات.
✅ طريقة العمل:
1. إنشاء كائن AJAX (باستخدام XMLHttpRequest)
var xhr = new XMLHttpRequest();
JavaScript
2. تحديد نوع الطلب (GET أو POST) والوجهة:
xhr.open('GET', 'data.json', true);
JavaScript

إرسال الطلب:

xhr.send();
JavaScript
4. التعامل مع الاستجابة:
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error('حدث خطأ في الاتصال');
  }
};
JavaScript

🧪 مثال عملي كامل (طلب بيانات JSON):

ملف data.json:

{
  "name": "Ali",
  "age": 30
}
JavaScript

ملف HTML + JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Example</title>
</head>
<body>
  <button onclick="loadData()">جلب البيانات</button>
  <div id="result"></div>

  <script>
    function loadData() {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'data.json', true);

      xhr.onload = function() {
        if (xhr.status === 200) {
          var data = JSON.parse(xhr.responseText);
          document.getElementById('result').innerHTML =
            'الاسم: ' + data.name + '<br>العمر: ' + data.age;
        } else {
          console.error('فشل الاتصال');
        }
      };

      xhr.send();
    }
  </script>
</body>
</html>
JavaScript

🆕 طريقة حديثة باستخدام fetch (أفضل وأسهل):

fetch('data.json')
  .then(response => {
    if (!response.ok) {
      throw new Error('فشل الاتصال');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('خطأ:', error);
  });
JavaScript
🔄 أنواع الطلبات:
  • GET: لجلب البيانات.
  • POST: لإرسال البيانات (مثل نموذج تسجيل).
  • PUT: لتحديث البيانات.
  • DELETE: لحذف البيانات.

📮 مثال على POST باستخدام fetch:

📚 استخدامات AJAX:
  • تعبئة جدول بيانات دون إعادة تحميل الصفحة.
  • التحقق من اسم المستخدم أثناء التسجيل.
  • تحديث المحتوى تلقائيًا (مثل الإشعارات).
  • إنشاء تطبيقات تعتمد على SPA (Single Page Applications).
🛡️ ملاحظات مهمة:
  • تأكد من أن السيرفر يُعيد استجابة بصيغة صحيحة (JSON، HTML، إلخ).
  • يجب تفعيل CORS عند إرسال طلبات عبر دومين مختلف.
  • يُفضل استخدام fetch لأنها أسهل وتدعم Promises.
✅ 1. التعامل مع الأخطاء بشكل سليم

يجب دائمًا التحقق من:

  • كود الحالة (Status Code) مثل: 200, 404, 500.
  • حالة الشبكة (Network Errors)، خاصة عند استخدام fetch.
مثال مع fetch:
fetch('data.json')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('حدث خطأ:', error.message));
JavaScript

مثال مع API:

var xhr = new XMLHttpRequest();

xhr.open("GET", "https://jsonplaceholder.typicode.com/posts");
xhr.send();
xhr.onreadystatechange = function () {
  if (this.readyState === 4 && this.status === 200) {
    let datajs = JSON.parse(this.responseText);
    for (let i = 0; i < datajs.length; i++) {
      console.log(datajs[i]);
      document.write(`
        <h1>${datajs[i].id}</h1>
        <h2>${datajs[i].title}</h2>
        <p>${datajs[i].body}</p>
        `)
    }
  }

}
JavaScript
var xhr = new XMLHttpRequest();
JavaScript
🔸 المعنى:
  • هنا ننشئ كائن جديد من نوع XMLHttpRequest.
  • هذا الكائن يُستخدم لعمل طلب HTTP (مثل GET أو POST) إلى خادم (Server)، دون إعادة تحميل الصفحة.
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts");
JavaScript
🔸 المعنى:
  • نفتح الطلب باستخدام الدالة open.
  • "GET" تعني أننا نريد طلب بيانات (وليس إرسال).
  • الرابط "https://jsonplaceholder.typicode.com/posts" هو الـ API الذي سنجلب منه البيانات.
  • هذه الخطوة تُجهز الطلب فقط، لا ترسله بعد.
xhr.send();
JavaScript
🔸 المعنى:
  • هذه الدالة تُرسل الطلب إلى الخادم.
  • بعد هذا السطر، الطلب يتم إرساله، وننتظر استجابة السيرفر.
xhr.onreadystatechange = function () {
  if (this.readyState === 4 && this.status === 200) {
    // المعالجة هنا
  }
}
JavaScript
🔸 المعنى:
  • onreadystatechange هي دالة تُنفذ تلقائيًا كلما تغيّر “حالة” الطلب.
  • يوجد 5 حالات للـ readyState:
القيمةالمعنى
0لم يتم تهيئة الطلب
1تم فتح الاتصال بـ open()
2تم إرسال الطلب بـ send()
3يتم تلقي البيانات من السيرفر
4انتهى الطلب (البيانات جاهزة)
  • الشرط this.readyState === 4 يعني: “تم الانتهاء من استلام البيانات”.
  • الشرط this.status === 200 يعني: “نجح الطلب” (رمز الحالة 200 = OK).
let datajs = JSON.parse(this.responseText);
JavaScript
🔸 المعنى:
  • this.responseText يحتوي على النص (JSON string) الذي أرسله السيرفر.
  • JSON.parse() تحوّله إلى كائن JavaScript يمكن التعامل معه كمصفوفة.
for (let i = 0; i < datajs.length; i++) {
  console.log(datajs[i]);
  document.write(`
    <h1>${datajs[i].id}</h1>
    <h2>${datajs[i].title}</h2>
    <p>${datajs[i].body}</p>
  `)
}
JavaScript
🔸 المعنى:
  • نستخدم حلقة for للتكرار على كل عنصر في البيانات القادمة.
  • كل عنصر يمثل “منشور” يحتوي على:
    • id: رقم المنشور
    • title: عنوان المنشور
    • body: نص المنشور
  • يتم طباعة كل عنصر في الكونسول.
  • ثم يتم عرضه داخل الصفحة باستخدام document.write().
⚠️ ملاحظة مهمة عن document.write():
  • هذه الدالة تعمل فقط أثناء تحميل الصفحة.
  • إذا تم استخدامها بعد تحميل الصفحة، فإنها تمسح كل محتوى الصفحة وتكتب الجديد فقط.
  • لذلك يُفضل استخدام innerHTML أو DOM بشكل مباشر.
✅ الخلاصة:

هذا الكود يقوم بالتالي:

  1. ينشئ طلب GET باستخدام XMLHttpRequest.
  2. يرسله إلى API وهمي يحتوي على منشورات (posts).
  3. عندما يكتمل الطلب ويصل الرد من السيرفر:
    • يتم تحويل البيانات من JSON إلى كائن JS.
    • يتم عرض كل منشور في الصفحة باستخدام document.write().