إرسال البيانات باستخدام استدعاء XMLHttpRequest عبر POST

في عالم تطوير الويب الحديث، تبادل البيانات غير المتزامن بين العميل والخادم هو جانب حاسم لبناء تطبيقات ديناميكية وتفاعلية. واحدة من الأدوات الأساسية التي تمكن هذه الوظيفة هي كائن XMLHttpRequest، وتحديداً طريقة POST الخاصة به. بينما قد يبدو واجهة برمجة التطبيقات XMLHttpRequest قديمة في عصر واجهات البرمجة الأكثر حداثة مثل Fetch وAxios، إلا أن فهم مبادئها الأساسية لا يزال ضرورياً لأي مطور JavaScript.

تسمح لك طريقة POST الخاصة بـ XMLHttpRequest بإرسال البيانات بشكل غير متزامن إلى الخادم دون تحديث الصفحة بأكملها. يعزز هذا النهج تجربة المستخدم من خلال توفير تدفق معلومات أكثر سلاسة وكفاءة، مما يؤدي في النهاية إلى تحسين أداء التطبيق بشكل عام.

إعداد POST لـ XMLHttpRequest

قبل الغوص في الكود، دعنا نستعرض عملية الإعداد الأساسية لطلب POST عبر XMLHttpRequest:

1. إنشاء مثيل جديد لكائن XMLHttpRequest.
2. تحديد طريقة الطلب (POST) ونقطة نهاية URL.
3. إعداد رؤوس الطلب، إذا لزم الأمر.
4. تحديد الوظيفة لمعالجة استجابة الخادم.
5. إرسال الطلب مع حمولة البيانات.

// 1. إنشاء مثيل جديد لـ XMLHttpRequest
const xhr = new XMLHttpRequest();

// 2. تحديد طريقة الطلب وURL
xhr.open('POST', '/api/endpoint', true);

// 3. إعداد رؤوس الطلب (إذا لزم الأمر)
xhr.setRequestHeader('Content-Type', 'application/json');

// 4. تحديد معالج الاستجابة
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    // معالجة استجابة الخادم
    console.log(xhr.responseText);
  }
};

// 5. إرسال الطلب مع حمولة البيانات
const data = JSON.stringify({ name: 'جون دو', email: 'john@example.com' });
xhr.send(data);

في المثال أعلاه، نقوم بإنشاء مثيل جديد لـ XMLHttpRequest، وتحديد طريقة POST ونقطة نهاية URL، وضبط رؤوس الطلب المناسبة، ومعالجة استجابة الخادم في معالج حدث onreadystatechange. وأخيرًا، نقوم بإرسال الطلب مع حمولة البيانات بتنسيق JSON باستخدام طريقة send().

معالجة الاستجابات ومعالجة الأخطاء

بينما يعتبر إرسال الطلب أمرًا حاسمًا، فإن معالجة استجابة الخادم بشكل صحيح لا تقل أهمية. يسمح لك معالج حدث onreadystatechange بمراقبة تقدم الطلب واتخاذ الإجراءات المناسبة بناءً على خصائص readyState و status.

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // استجابة ناجحة
      console.log(xhr.responseText);
    } else {
      // معالجة الخطأ
      console.error('فشل الطلب. الحالة:', xhr.status);
    }
  }
};

في المثال أعلاه، نتأكد من أن readyState قد اكتمل لضمان الانتهاء من الطلب (XMLHttpRequest.DONE)، ثم نفحص خاصية status لتحديد نجاح أو فشل الطلب. عادةً ما تشير حالة بتعليمات 200 إلى استجابة ناجحة، بينما قد تشير حالات أخرى إلى ظروف خطأ مختلفة.

إرسال بيانات النموذج

بينما كانت الأمثلة السابقة تركز على إرسال بيانات JSON، يسمح XMLHttpRequest أيضًا بإرسال بيانات النموذج بسلاسة. هذا مفيد بشكل خاص عند العمل مع نماذج HTML التقليدية أو عند التعامل مع تحميل الملفات.

const formData = new FormData();
formData.append('name', 'جون دو');
formData.append('email', 'john@example.com');
formData.append('file', fileInput.files[0]);

xhr.open('POST', '/api/endpoint', true);
xhr.send(formData);

في هذا المثال، نقوم بإنشاء مثيل FormData وإضافة حقول النموذج باستخدام طريقة append(). يمكننا أيضًا تضمين تحميل الملفات من خلال إضافة كائن File من عنصر <input type="file">. أخيرًا، نقوم بإرسال كائن FormData مباشرة باستخدام طريقة send().

إنشاء كود XMLHttpRequest باستخدام Apidog

Apidog هي منصة تطوير واجهات البرمجة التعاونية الشاملة التي توفر مجموعة أدوات شاملة لتصميم وتصحيح واختبار ونشر ومحاكاة واجهات برمجة التطبيقات. يتيح لك Apidog إنشاء كود XMLHttpRequest تلقائيًا لإجراء طلبات HTTP.

إليك عملية استخدام Apidog لإنشاء كود XMLHttpRequest:

الخطوة 1: افتح Apidog واختر طلبًا جديدًا

الخطوة 2: أدخل عنوان URL لنقطة نهاية واجهة البرمجة التي ترغب في إرسال طلب إليها،

الخطوة 3: اختر "إنشاء كود العميل " لتوليد الكود الخاص بك.

الخطوة 4: انسخ الكود الذي تم إنشاؤه والصقه في مشروعك.

استخدام Apidog لإرسال طلبات HTTP

Apidog تقدم العديد من الميزات المتقدمة التي تعزز قدرتها على اختبار طلبات HTTP. تتيح لك هذه الميزات تخصيص طلباتك ومعالجة السيناريوهات الأكثر تعقيدًا بكل سهولة.

الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا.

الخطوة 2: ابحث أو أدخل تفاصيل واجهة برمجة التطبيقات يدويًا لطلب POST الذي ترغب في إجرائه.

الخطوة 3: املأ المعلمات المطلوبة وأي بيانات ترغب في تضمينها في جسم الطلب.

الاستنتاج

كما ترى، فإن POST لـ XMLHttpRequest هو أكثر من مجرد أداة تقنية - إنها تحول كبير يفتح أمام مطوري الويب عالمًا من الاحتمالات. سواء كنت تبني واجهات مستخدم ديناميكية، أو تتكامل مع واجهات برمجة التطبيقات القوية، أو تنشئ الجيل التالي من تجارب الويب الغامرة، فإن POST لـ XMLHttpRequest هو سلاحك السري.