125- دروس جافا سكربت – JS AJAX Request

### مقدمة إلى AJAX في JavaScript

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

### كيف تعمل AJAX؟

AJAX ليس لغة بحد ذاتها، بل هو مفهوم يستخدم مجموعة من التقنيات:
– JavaScript: للتحكم في الطلبات ومعالجة الاستجابات.
– XMLHttpRequest أو Fetch API: لإرسال الطلبات [شركة برمجة مصرية] إلى الخادم وجلب البيانات.
– HTML/CSS: لتحديث واجهة المستخدم بناءً على البيانات المستلمة.
– XML/JSON: لتنسيق البيانات المستلمة من الخادم.

### استخدام XMLHttpRequest

#### إنشاء طلب باستخدام XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

– **xhr.open(method, url, async)**: يحدد نوع الطلب، وعنوان URL، وما إذا كان غير متزامن.
– **xhr.onreadystatechange**: وظيفة تستدعى في كل مرة يتغير فيها حالة الطلب.
– **xhr.readyState**: يحدد حالة الطلب.
– **xhr.status**: يعطي رمز حالة الاستجابة من الخادم.
– **xhr.responseText**: تحتوي على بيانات الاستجابة كنص.

### استخدام Fetch API

تُعتبر Fetch API بديلاً أكثر حداثة ومرونة من XMLHttpRequest.

#### مثال على Fetch API

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
    });

– **fetch(url)**: تُنشئ طلبًا وتعيد وعدًا (Promise).
– **response.ok**: تحقق مما إذا كانت الاستجابة ناجحة.
– **response.json()**: تُحوِّل الاستجابة إلى JSON.
– **catch(error)**: لمعالجة أي أخطاء في عملية الجلب.

### مثالات تطبيقية متعددة

#### تحميل بيانات المستخدمين

استخدام Fetch API لتحميل قائمة المستخدمين:

fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(users => {
        users.forEach(user => {
            console.log(`Name: ${user.name}, Email: ${user.email}`);
        });
    })
    .catch(error => console.error('Error:', error));

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

يمكنك إرسال بيانات إلى الخادم باستخدام Fetch API أيضًا:

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        title: 'Hello World',
        body: 'This is a test post.',
        userId: 1
    })
})
.then(response => response.json())
.then(data => {
    console.log('Success:', data);
})
.catch(error => console.error('Error:', error));

### الخاتمة

AJAX هي تقنية قوية تُستخدم لتحسين تجربة المستخدم من خلال تمكين تحديثات الصفحة الديناميكية دون إعادة تحميل الصفحة بالكامل. سواء كنت تستخدم XMLHttpRequest التقليدي أو Fetch API الحديث، فإن فهم AJAX يعد خطوة أساسية لأي مطور ويب يسعى إلى بناء تطبيقات ويب تفاعلية وفعّالة.