ما هو AJAX وكيف يعمل؟

مقدمة

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

كيف يعمل AJAX؟

تعتمد تقنية AJAX على فكرة بسيطة: التواصل غير المتزامن مع الخادم. هذا يعني أن المتصفح يمكنه إرسال الطلبات إلى الخادم واستقبال الردود دون الحاجة إلى إعادة تحميل الصفحة بأكملها.

المكونات الرئيسية لتقنية AJAX

• HTML و CSS: لعرض بنية وتصميم صفحة الويب.
• جافا سكريبت: لإدارة تفاعلات المستخدمين وإرسال الطلبات.
• XMLHttpRequest أو Fetch API: لإرسال واستقبال البيانات من وإلى الخادم.
• بيانات JSON أو XML: تنسيق البيانات الذي يرسله الخادم إلى المتصفح.
• الخادم وقاعدة البيانات: حيث تتم معالجة البيانات وإعداد الإجابات.

خطوات تشغيل AJAX

1. تفاعل المستخدم: يقوم المستخدم بإجراء ما، مثل النقر على زر أو تحديد خيار.
2. إنشاء طلب: يقوم جافا سكريبت بإنشاء كائن XMLHttpRequest أو يستخدم واجهة برمجة تطبيقات Fetch لإرسال الطلب.
3. إرسال الطلب: يتم إرسال الطلب إلى الخادم بشكل غير متزامن.
4. المعالجة على الخادم: يستقبل الخادم الطلب، ويعالجه، ويجهز الاستجابة المناسبة (مثل البيانات بتنسيق JSON أو HTML).
5. استلام الاستجابة: يستقبل المتصفح استجابة الخادم ويمررها إلى جافا سكريبت.
6. تحديث الصفحة: يقوم جافا سكريبت بمعالجة البيانات المستلمة وتحديث جزء من الصفحة دون إعادة تحميلها.

مثال بسيط على كود AJAX

// ایجاد شیء XMLHttpRequest
let xhr = new XMLHttpRequest();
// باز کردن درخواست
xhr.open("GET", "data.json", true);
// تنظیم پاسخ
xhr.onload = function() {
if (xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
console.log(data); // نمایش داده در کنسول
}
};
// ارسال درخواست
xhr.send();

تنسيقات البيانات في AJAX

JSON

يُعد JSON أكثر تنسيقات البيانات شيوعًا المستخدمة في AJAX. فهو خفيف الوزن، وسهل القراءة، ويمكن تحويله بسهولة إلى كائن JavaScript.

{
"name": "Ali",
"age": 25,
"city": "Tehran"
}

XML

في الماضي، كانت لغة XML واحدة من التنسيقات الرئيسية في AJAX، ولكن استخدامها انخفض اليوم بسبب تعقيدها وحملها الثقيل.

<name>Ali</name>
<age>25</age>
<city>Tehran</city>

HTML

في بعض الأحيان يتم إرسال البيانات من الخادم بتنسيق HTML، مثل جزء من جدول أو نموذج.

طرق تقديم الطلب

يحصل

xhr.open("GET", "data.json", true);
xhr.send();

بريد

xhr.open("POST", "submit.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=Ali&age=25");

استخدام واجهة برمجة تطبيقات Fetch

fetch('data.json')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});

نتيجة

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