تفسير أساسيات Ajax

يتمثل 功能 Ajax في تحقيق زيارات متزامنة من جانب المتصفح إلى الخادم: من خلال إرسال جزء صغير من البيانات باستخدام نموذج XMLHttpRequest من المتصفح، والتفاعل مع الخادم، والذي يعود بدوره بجزء صغير من البيانات، ثم تحديث جزء من الصفحة في المتصفح.

1. قم بإنشاء نموذج XMLHttpRequest أولاً

var request;
if (window.XMLHttpRequest){
 request=new XMLHttpRequest();
}
else{
 request=new ActiveXObject("Microsoft.XMLHTTP");
 //مطابقة ie5 6
}

2. طرق XMLHttpRequest لإرسال الطلب إلى الخادم

request.open("POST",get.php,true);//إرسال الطلب
//تعيين معلومات الرأس http، وإخبار الخادم بأننا سنرسل نموذجًا باستخدام بيانات مفككة
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//يجب تعيين قيمة Content-Type قبل open و send
request.send("name=王二狗&sex=男");//إرسال بيانات إلى الخادم باستخدام طريقة send

3. طرق الحصول على الاستجابة

الحصول على responseText للحصول على بيانات الاستجابة في شكل نصي
الحصول على responseXML للحصول على بيانات الاستجابة في شكل XML
يعود status و statusText بشكل رقمي و نصي للرمز HTTP
الحصول على getAllResponseHeader() على جميع رؤوس الاستجابة
تحقق من getResponseHeader() من قيمة حقل معين في الاستجابة

من المهم مراقبة تغييرات الخاصية readyState

　　　 لم يتم تعيين الطلب 0، لم يتم استدعاء open بعد

　　　 تم إنشاء اتصال الخادم 1، تم استدعاء open

　　　 لقد تم استقبال الطلب 2، تم استقبال معلومات الرأس

　　　 لأنه 3، يتم معالجة الطلب، تم استقبال جسم الاستجابة

　　　 لأنه 4، تم إكمال الطلب، وتم إعداد الاستجابة

//تتغير خاصية readyState عند التفعيل
//استخدم حدث onreadystatechange لتحديد تغييرات خاصية readyState
request.onreadystatechange=function(){
 if(request.readyState===4&&request.status===200){
 //قوم بعمل بعض الأشياء مثل الحصول على بيانات الاستجابة request.responseText
 }
}

5. XHR كامل

var request=new XMLHttpRequest();//1. قم بإنشاء كائن XHR
request.open("GET","get.php?number=" + البيانات المطلوبة للتقديم في النموذج،true);//2. قم بتشغيل طريقة open
//إذا كان الطلب POST، فإن send يحتوي على كائن يحتوي على البيانات
request.send();//إرسال بعض البيانات
request.onreadystatechange=function(){ //3. قم بمراقبة الحكم لتحديد ما إذا كان الخادم يستجيب بشكل صحيح
 if(request.readyState===4&&request.status===200){
 //4. قم بعمل بعض الأشياء مثل الحصول على محتوى استجابة الخادم request.responseText
 }
}

هذا هو محتوى المقال الكامل، نأمل أن يساعدكم محتوى هذا المقال في تعلم أو عملكم، ونأمل أيضًا أن تدعموا تعليمات النداء!

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ويحق لصاحب الحقوق أن يكون المالك، ويتم جمع المحتوى من قبل المستخدمين على الإنترنت بشكل متعمد وتحميله بشكل مستقل، ويشير هذا الموقع إلى أن لديه حقوق الملكية، ويتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية ذات صلة. إذا اكتشفت محتوى يشتبه في حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وتقديم الدليل المتعلق، وسيتم حذف المحتوى المزعوم عن حقوق النسخ فورًا إذا تم التحقق منه.