AJAX

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

✅ أمثلة على استخدام AJAX:
  1. التحقق من اسم المستخدم أو البريد أثناء التسجيل.
  2. تحميل المزيد من المحتوى عند التمرير (Load More).
  3. إرسال التعليقات دون تحديث الصفحة.
  4. جلب المدن تلقائيًا عند اختيار الدولة.
  5. البحث الفوري أثناء الكتابة (Live Search).
  6. تحديث سلة المشتريات في المتاجر.
  7. الإعجابات أو التصويت دون تحديث.
  8. تحميل محتوى التبويبات ديناميكيًا.
  9. عرض التنبيهات أو الإشعارات الفورية.
  10. تسجيل الدخول أو التسجيل بشكل فوري.
📚 استخدامات AJAX:
  • تعبئة جدول بيانات دون إعادة تحميل الصفحة.
  • التحقق من اسم المستخدم أثناء التسجيل.
  • تحديث المحتوى تلقائيًا (مثل الإشعارات).
  • إنشاء تطبيقات تعتمد على SPA (Single Page Applications).
🧱 مكونات 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
🔄 أنواع الطلبات:
  • GET: لجلب البيانات.
  • POST: لإرسال البيانات (مثل نموذج تسجيل).
  • PUT: لتحديث البيانات.
  • DELETE: لحذف البيانات.

إرسال الطلب:

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

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

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

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

  • كود الحالة (Status Code) مثل: 200, 404, 500.
  • حالة الشبكة (Network Errors)، خاصة عند استخدام fetch.

مثال مع 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().