124- دروس جافا سكربت – JS AJAX XMLHttp

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

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

في هذا المقال، سنلقي نظرة على كيفية استخدام XMLHttpRequest في JavaScript مع أمثلة متعددة توضح كيفية إجراء طلبات GET وPOST، ومعالجة الاستجابات المختلفة.

### مفهوم AJAX

AJAX ليست تقنية منفردة، بل هو مجموعة من التقنيات التي تعمل معًا لتحقيق تحديثات غير متزامنة للصفحة. يتضمن ذلك:

– **JavaScript**: لغة البرمجة المستخدمة [شركة برمجة مصرية] للكتابة والتحكم في الطلبات.
– **XMLHttpRequest**: الكائن المستخدم لإجراء الطلبات إلى الخادم.
– **JSON أو XML**: التنسيقات المستخدمة لتبادل البيانات بين العميل والخادم.

### استخدام XMLHttpRequest

#### إنشاء كائن XMLHttpRequest

أول خطوة لاستخدام AJAX هي إنشاء كائن XMLHttpRequest:

var xhr = new XMLHttpRequest();

#### إجراء طلب GET

طلب GET يستخدم لاسترداد البيانات من الخادم. إليك كيفية استخدام XMLHttpRequest لإجراء طلب GET:

var xhr = new XMLHttpRequest();
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.error('Request failed with status:', xhr.status);
    }
};

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

xhr.send();

في المثال أعلاه، نقوم بفتح طلب GET إلى `https://api.example.com/data`، ونعالج الاستجابة في حالة النجاح أو الفشل.

#### إجراء طلب POST

طلب POST يُستخدم لإرسال البيانات إلى الخادم. إليك كيفية تنفيذ طلب POST:

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

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log('Response:', xhr.responseText);
    } else {
        console.error('Request failed with status:', xhr.status);
    }
};

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

var data = JSON.stringify({ name: 'John', age: 30 });
xhr.send(data);

في هذا المثال، نقوم بإرسال بيانات JSON تحتوي على اسم وعمر إلى الخادم باستخدام طلب POST.

### معالجة الاستجابات

الاستجابات من الخادم يمكن أن تكون في تنسيقات مختلفة مثل JSON أو XML. في الأمثلة السابقة، قمنا بالوصول إلى `xhr.responseText` للحصول على الاستجابة كنص. إذا كانت الاستجابة بتنسيق JSON، يمكنك استخدام `JSON.parse` لتحليلها:

var jsonResponse = JSON.parse(xhr.responseText);
console.log('Name:', jsonResponse.name);

### الخلاصة

AJAX وXMLHttpRequest هما أدوات قوية في تطوير الويب الحديث، حيث تسمحان بتحديث المحتوى ديناميكيًا دون الحاجة إلى إعادة تحميل الصفحة. من خلال فهم كيفية إجراء طلبات GET وPOST ومعالجة الاستجابات، [شركة برمجة مصرية] يمكنك إنشاء تطبيقات ويب أكثر تفاعلية وسرعة.

تأكد من التعامل مع الأخطاء بشكل صحيح لضمان تجربة مستخدم سلسة، ولا تنسَ مراجعة سياسات الأمان مثل CORS عند التعامل مع طلبات الخادم في بيئات الإنتاج.

الوسوم: AJAXGETjavascriptJSONPOSTXMLXMLHttpRequest