132- دروس جافا سكربت – JS AJAX Examples

عنوان المقال: فهم واستخدام AJAX في JavaScript: أمثلة متعددة وتطبيقات عملية

—

مقدمة

AJAX، أو Asynchronous JavaScript and XML، تقنية تتيح للمطورين تحديث أجزاء من صفحة الويب دون الحاجة إلى إعادة تحميل الصفحة كاملة، مما يعزز تجربة المستخدم عن طريق جعل التطبيقات أسرع وأكثر تفاعلية. في هذا المقال، سنستعرض مفهوم AJAX وكيفية استخدامه في JavaScript مع تقديم أمثلة متعددة لتوضيح كيفية تطبيقه بشكل عملي.

—

ما هو AJAX؟

AJAX ليس لغة برمجة بحد ذاتها، بل هو مجموعة من التقنيات التي تستخدم عدة لغات مثل HTML، وCSS، وJavaScript، وXML، وJSON لتحديث محتوى صفحات الويب بشكل غير متزامن. يتم ذلك عبر الكائن XMLHttpRequest في JavaScript الذي يتيح تبادل البيانات مع الخادم في الخلفية.

—

الأساسيات: إنشاء طلب AJAX

لبدء استخدام AJAX، يجب عليك إنشاء كائن XMLHttpRequest. إليك مثال بسيط يوضح كيفية إنشاء هذا الكائن وإرسال طلب GET إلى خادم:

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

// فتح اتصال GET
xhr.open('GET', 'https://api.example.com/data', true);

// تعريف ما يجب فعله عند استلام الرد
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log('Response:', xhr.responseText);
    } else {
        console.log('Request failed with status:', xhr.status);
    }
};

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

—

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

إلى جانب طلبات [شركة برمجة مصرية] GET، يمكنك إرسال بيانات إلى الخادم باستخدام طلبات POST. إليك مثال يوضح كيفية إرسال [شركة برمجة مصرية] بيانات JSON:

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');

// تعريف ما يجب فعله عند استلام الرد
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log('Response:', xhr.responseText);
    } else {
        console.log('Request failed with status:', xhr.status);
    }
};

// إرسال البيانات كـ JSON
var data = JSON.stringify({ name: 'John', age: 30 });
xhr.send(data);

—

التعامل مع الأخطاء

من المهم التعامل مع الأخطاء بشكل صحيح لضمان تجربة مستخدم سلسة. يمكنك استخدام خاصية onerror لتحديد ما يجب فعله عند حدوث خطأ:

xhr.onerror = function() {
    console.error('Request failed');
};

—

استخدام AJAX مع JSON

JSON هو تنسيق بيانات شائع الاستخدام مع AJAX نظرًا لسهولة استخدامه في JavaScript. المثال التالي يوضح كيفية التعامل مع رد JSON:

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        var response = JSON.parse(xhr.responseText);
        console.log('User name:', response.name);
    } else {
        console.log('Request failed with status:', xhr.status);
    }
};

—

خاتمة

AJAX تقنية قوية ومرنة تتيح لك إنشاء تطبيقات ويب تفاعلية وسريعة. من خلال الأمثلة المذكورة، يمكنك الآن البدء في تطبيق AJAX في مشاريعك لتحديث المحتوى بشكل غير متزامن وتحسين تجربة المستخدم. تذكّر دائماً اختبار تطبيقاتك وتأكد من التعامل مع الأخطاء بشكل صحيح لضمان أداء موثوق ومتسق.