تقنية اجاكس Ajax هى ليست لغة برمجة مستقلة انما تقنية تستخدم لبناء تطبيقات ويب سريعة واكثر تفاعلية مع هذه اللغات XML, HTML, CSS, Java Script.
تستخدم Ajax لارسال واستقبال طلبات HTTP بدون الحاجة إلى اعادة تحميل صفحة الويب كاملة مما يزيد من سرعة الصفحة.
لنقول انك تريد بناء تطبيق للدردشة مثل فيسبوك فمن غير المنطقى اعادة تحميل صفحة الرسائل فى كل لحظة مع كل رسالة جديدة فالحل هو باستخدام تقنية Ajax لمنع التعرض لاعادة تحميل الصفحة.
أجاكس هي تقنية تعمل على متصفحات الويب و مستقلة عن خوادم او سيرفرات الويب.
لنفهم العملية بشكل كامل سنقوم بشرح خطوات ارسال طلب إلى سيرفر :
- عند اي حدث معين فى صفحة الويب مثل الضغط على زر او اكتمال تحميل صفحة الويب
- يتم انشاء مايسمى XMLHttpRequest عن طريقة جافاسكربت
- XMLHttpRequest يقوم بارسال طلب للسيرفر
- يقوم السيرفر بمعالجة الطلب
- يقوم السيرفر بالرد على صفحة الويب
- الرد يتم قراءته عن طريقة Javascript
- يتم تفيذ الاجراء السليم على الصفحة مثل تحديث الصفحة ببيانات جديدة
الكائن XMLHttpRequest يتم دعمه من المتصفحات الحديثة وهو ما يسمح لنا باجراء الطلبات خلف الستار دون الحاجة إلى اعادة تحميل الصفحة.
يمكن استخدام XMLHttpRequest للحصول على أي نوع من البيانات، وليس فقط XML ، ويدعم بروتوكولات أخرى غير برتوكول HTTP (بما في ذلك ملف و بروتوكول نقل الملفات FTP).
انشاء كائن XMLHttpRequest
variable = new XMLHttpRequest();
هذا الكائن يستخدم فى انشاء طلبات Requests فى نطاق محدد مما يعنى انك تستطيع طلبات صفحات الويب و ملفات XML فقط من نفس السيرفر الذى ينشى الطلب.
وسنتحدث بالتفصيل عن خواص هذا الكائن وكيف يمكن استخدامه
- XMLHttpRequest.onreadystatechange هذه الخاصية تستخدم فى متابعة تغير الخاصية State إلى وضع Ready او الاستعداد وعند الانتقال إلى هذا الوضع يتم نداء دالة يتم تعريفها بعدها.
مثال على ذلك
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
عند اتمام استعداد الصفحة التى تحتوي هذا الكود ستقوم بتنفيذ الدالة المعرفة بعد xhttp.onreadystatechange.
وهذه الدالة تقوم بالتاكد اولًا من صحة حالة الصفحة بعد ذلك تقوم بالحصول على الرد من صفحة الويب المراد الحصول منها على بيانات والمخزنة فى xhr.responseText وبعد ذلك يمكنك عرضه او استخدامه داخل صفحتك باي طريقة.
تقوم الدالة السابق بالتحقق من اتمام تحميل الصفحة وصحة طلب HTTP عن طريق السطر
this.readyState == 4 && this.status == 200
داخل if.
this.readyState : يرجع باربعة قيم تدل على حالة XMLHttpRequest كالتالى :
0: لم يتم تهيئة الطلب
1: إنشاء الاتصال بالخادم
2: تم استلام الطلب
3: معالجة الطلب
4: طلب الانتهاء والاستجابة للطلب جاهزة
status : لعرض رقم يدل على حالة الطلب Request
200: “موافق” او OK
403 ممنوع” او Forbidden
404 غير موجود” او Not Found
