طلبات AJAX

مقدمة

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

الخطوات العملية الأساسية

1. إنشاء كائن XMLHttpRequest

قم بإنشاء مثيل من كائن XMLHttpRequest باستخدام الكود التالي:

var xhr = new XMLHttpRequest();

2. فتح طلب الخادم

استخدم الطريقة open لإنشاء اتصال بالخادم وتهيئة الطلب.

xhr.open('GET', 'example.php', true);

• GET: نوع الطلب (عادةً ما يكون GET أو POST)
• example.php: عنوان URL لطلب الخادم
• true: يحدد ما إذا كان الطلب غير متزامن أم لا (يجب أن يكون true لطلبات AJAX)

3. إرسال الطلب

بمجرد تهيئة الطلب، يمكنك إرساله إلى الخادم باستخدام الطريقة send.

xhr.send();

4. معالجة استجابة الخادم

عندما يتلقى الخادم الطلب ويعالجه، فإنه يرسل استجابة. يتم التعامل مع الاستجابة في دالة معرّف الحدث onreadystatechange.

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // معالجة الاستجابة هنا
  }
};

• xhr.readyState: حالة الطلب (0-4)
• xhr.status: رمز حالة HTTP (200 يشير إلى طلب ناجح)

5. جلب البيانات

يمكنك الوصول إلى بيانات الاستجابة في الخاصية xhr.responseText.

var data = xhr.responseText;

مثال جافا سكريبت

إليك مثال بسيط يوضح كيفية إجراء طلب AJAX إلى خادم الويب وعرض الاستجابة:

// إنشاء كائن XMLHttpRequest
var xhr = new XMLHttpRequest();

// فتح طلب الخادم
xhr.open('GET', 'example.php', true);

// إرسال الطلب
xhr.send();

// معالجة استجابة الخادم
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // جلب البيانات
    var data = xhr.responseText;

    // عرض الاستجابة
    document.getElementById('result').innerHTML = data;
  }
};