تقنية أجاكس ajax ببساطةc_javascript
في هدا المقال سأحاول تبسيط مبادئ تقنية أجاكس ajax قدر المستطاع
aa-- --bb
jjjjjjjjjjjjj
و قبل البدأ دعونا نوضح بعض المفاهيم حول هده التقنية :
1 - أجاكس ليست لغة برمجة مستقلة . بل هي دمج لجافا سكريبت و xml ( أختصار Asynchronous JavaScript and XML )
2 - تنبني فكرة هده التقنية على تحديث جزء معين من الصفحة ( حسب حاجة المستخدم ) دون الحاجة لإعادة تحميل الصفحة .
3 - بعض المتصفحات القديمة لا تدعم هده التقنية . و للتحقق من دالك أقترح عليك تجربة الكود التالي على المتصفح
if (window.XMLHttpRequest) {
// This browser supports AJAX
} else {
// This browser does not support AJAX
}
الكائن XMLHttpRequest في لغة جافاسكريبت هو المسئول عن إستدعاء المحتوى بعد تحميل الصفحة
و يتم طلبه بهدا الشكل
var myvar = new XMLHttpRequest();
بحيث أن myvar هو المتغير الذي يضم الكائن XMLHttpRequest
myvar.onreadystatechange = function(){
if (myvar.readyState == 4 && myvar.status == 200){
document.getElementById("fo").innerHTML=myvar.responseText;
}};
شرح الكود أعلاه حسب السطر :
-----------------------
1 - )
تقوم خاصية onreadystatechange بمتابعة تغير حالة الطلب إلى وضع الإستعداد و هو readyState == 4 و نوع الإستجابة إلى ok :
myvar.status == 200
يمر readyState بأربع مراحل يتم تمثيل كل مرحلة برقمها و هي كالتالي
0: لم يتم تهيئة الطلب
1: إنشاء الاتصال بالخادم
2: استلام الطلب
3: معالجة الطلب
4: الإستجابة جاهزة
كما أن status يمثل نوع الإستجابة و هي في الوضع العادي تحمل الرمز 200 أي أن الطلب تم بشكل عادي
و يمكن أن يكون الرمز غير دلك ك :
200 : تم
403 : تم إعتراض الطلب أو ليس لديك صلاحية الوصول
404 : صفحة غير موجودة
يمكنك الإطلاع على قائمة بكامل الرموز الممكنة على الرابط التالي :
https://www.restapitutorial.com/httpstatuscodes.html
2 - )
إدخال نص الإستجابة إلى العنصر الحامل للمعرف fo
-----------------------
طبعا لا بد من إدراج العنصر fo مسبقا لإستقبال المحتوى
<div id="fo">
</div>
جميع العمليات السابقة لم يتم تنفيدها و إنما قمنا بتخزينها في المتغير myvar
لإرسال الطلب نعتمد الدالتين open و send كالتالي
myvar.open("GET", "content.html", true);
myvar.send();
عند إستعراض الصفحة سيتم إستدعاء المحتوى من صفحة أخرى هي content.html ( لابد من تجهيزها مسبقا ) و إدراجه داخل الخلية fo
ستتم هده العملية فور تحميل الصفحة دون تدخل منا
من أجل ربط هده العملية بنشاط معين في الصفحة _ كالضغط على زر مثلا _ سنحتاج لوضع الكود كاملا داخل دالة جديدة نقوم بتخصيصها لهدا الغرض
و من أجل الإطلاع على شرح مفصل حول هدا الأمر أنصحك بمراجعة الدرس التالي
https://www.wahj.cf/2019/10/javascript2.html
الكود داخل الدالة
function loadcontents( url , id) {
var myvar = new XMLHttpRequest();
myvar.onreadystatechange = function(){
if(myvar.readyState == 4 && myvar.status == 200){
document.getElementById(id).innerHTML =myvar.responseText;}};
myvar.open("GET",url,true);
myvar.send();
}
قمنا بتسمية الدالة loadcontents كما وضعنا داخلها متغييرين ( url و id )
و هما على التوالي : عنوان الصفحة المطلوبة و معرف الخلية أو العنصر اللدي سنستدعي المحتوى إليه
نقوم بإنشاء زر يفعل الدالة loadcontents عند الضغط عليه مع تضمين المتغيرات المطلوبة في الدالة
<button type="button"
onclick="loadcontents( 'content.html' , 'fo')">
get contents</button>
مثال على العملية
يمكنك إضافة أيقونة إنتظار كهاده إلى الكود
الكود كاملا
<button type="button" onclick="loadcontents('Thank-for-wach.svg','fo')">
click here </button>
<div id="fo"></div>
<script>
function loadcontents( url , id) {
document.getElementById(id).innerHTML =
"<img src='Loading_l.svg'/>";
var myvar = new XMLHttpRequest();
myvar.onreadystatechange = function(){
if (myvar.readyState == 4 && myvar.status == 200){
document.getElementById(id).innerHTML = myvar.responseText;}};
myvar.open("GET", url, true);
myvar.send();
}
</script>
مع تحيتي