ما سأتحدث عنه أساسي للغاية، لذا لا ينبغي للخبراء قراءته. إذا قرأته، من فضلك أعطني رأيك. يمكن للمبتدئين أو الأشخاص الذين لا يعرفون الكثير عن المعرفة ذات المستوى المنخفض قراءتها لمساعدتهم على الفهم والذاكرة.
كائن XMLHttpRequest هو جوهر وظيفة AJAX لتطوير برنامج AJAX، يجب أن تبدأ بفهم كائن XMLHttpRequest.
لفهم كائن XMLHttpRequest، ابدأ بإنشاء كائن XMLHttpRequest. يستخدم إنشاء كائنات XMLHttpRequest في متصفحات مختلفة طرقًا مختلفة:
انظر أولاً إلى طريقة IE لإنشاء كائن XMLHttpRequest (الطريقة الأولى):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP" ); // استخدم إصدارًا أحدث من IE لإنشاء كائن متوافق مع IE (Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // استخدم إصدارًا أقدم من IE لإنشاء كائن متوافق مع IE (Microsoft.XMLHTTP)
تستخدم Mozilla وOpera وSafari ومعظم المتصفحات غير التابعة لـ IE الطريقة التالية (الطريقة الثانية) لإنشاء كائنات XMLHttpRequest:
var xmlhttp = new XMLHttpRequest();
يستخدم Internet Explorer في الواقع كائنًا يسمى XMLHttp بدلاً من كائن XMLHttpRequest، الذي تستخدمه Mozilla وOpera وSafari ومعظم المتصفحات غير التابعة لشركة Microsoft (يشار إليه فيما بعد بشكل جماعي باسم كائن XMLHttpRequest). بدأ IE7 أيضًا في استخدام كائن XMLHttpRequest.
إذا استخدمت متصفحات مختلفة أساليب غير صحيحة عند إنشاء كائن XMLHttpRequest، فسيقوم المتصفح بالإبلاغ عن خطأ ولا يمكن استخدام الكائن. لذلك نحن بحاجة إلى طريقة لإنشاء كائن XMLHttpRequest متوافق مع متصفحات مختلفة:
قم بإنشاء أسلوب كائن XMLHttpRequest متوافق مع متصفحات متعددة
var xmlhttp = false; // أنشئ طلب متغير جديد وقم بتعيين قيمة خطأ له. استخدم false كشرط الحكم، مما يعني أن كائن XMLHttpRequest لم يتم إنشاؤه بعد.
وظيفة إنشاءXMLHttp(){
يحاول{
xmlhttp = new XMLHttpRequest(); // حاول إنشاء كائن XMLHttpRequest باستثناء متصفحات IE التي تدعم هذه الطريقة.
}
قبض (ه){
يحاول{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); // استخدم إصدارًا أحدث من IE لإنشاء كائن متوافق مع IE (Msxml2.XMLHTTP)
}
قبض (ه){
يحاول{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // استخدم إصدارًا أقدم من IE لإنشاء كائن متوافق مع IE (Microsoft.XMLHTTP).
}
صيد (فشل){
xmlhttp = false; // إذا فشل، فتأكد من أن قيمة الطلب لا تزال خاطئة.
}
}
}
إرجاع xmlhttp;
}
من السهل جدًا الحكم على ما إذا كان الإنشاء ناجحًا أم لا
إذا (!xmlhttp){
// فشل في إنشاء كائن XMLHttpRequest!
}
آخر{
//تم الإنشاء بنجاح!
}
بعد إنشاء كائن XMLHttpRequest، دعونا نلقي نظرة على الأساليب والخصائص وأهم معالج حدث onreadystatechange لهذا الكائن.
الطريقة:
open() الوصف: تهيئة معلمات طلب HTTP، مثل URL وطريقة HTTP، ولكن لا ترسل الطلب.
abort() الوصف: إلغاء الاستجابة الحالية، وإغلاق الاتصال وإنهاء أي نشاط معلق على الشبكة.
وصف getAllResponseHeaders(): إرجاع رؤوس استجابة HTTP كسلاسل غير محللة.
وصف getResponseHeader(): يُرجع قيمة رأس استجابة HTTP المحدد.
إرسال () الوصف: يرسل طلب HTTP باستخدام المعلمات التي تم تمريرها إلى طريقة open () وتمرير نص الطلب الاختياري إلى الطريقة.
وصف setRequestHeader(): يقوم بتعيين أو إضافة طلب HTTP إلى طلب مفتوح ولكن لم يتم إرساله.
السمات:
وصف ReadyState: حالة طلب HTTP.
وصف نص الاستجابة: نص الاستجابة (باستثناء الرؤوس) الذي تلقاه الخادم حتى الآن، أو سلسلة فارغة في حالة عدم تلقي أي بيانات.
وصف ResponseXML: تم تحليل الاستجابة للطلب إلى XML وإعادتها ككائن مستند.
وصف الحالة: رمز حالة HTTP الذي تم إرجاعه بواسطة الخادم.
وصف نص الحالة: تحدد هذه السمة رمز حالة HTTP للطلب باستخدام اسم بدلاً من رقم.
onreadystatechange هي وظيفة معالج الأحداث التي يتم استدعاؤها في كل مرة تتغير فيها خاصية ReadyState.
دعونا نفهم كائن XMLHttpRequest من عملية إرسال الطلب ومعالجة نتائج الطلب.
وبطبيعة الحال، يتم إنشاء كائن XMLHttpRequest قبل إرسال الطلب، وليست هناك حاجة لكتابة المزيد من التعليمات البرمجية إذا كان موجودًا بالفعل.
إنشاء كائن XMLHttpRequest
var xmlhttp = CreateXMLHttp();
بعد إنشاء كائن XMLHttpRequest، ما هو موقع الويب الذي نريد إرسال الطلب إليه؟ لنختار RSS على الصفحة الرئيسية لمتنزه المدونات. فكيف أقوم بتعيين عنوان موقع الويب الذي أريد طلبه باستخدام طريقة open()؟
فتح (الطريقة، عنوان URL، غير متزامن، اسم المستخدم، كلمة المرور)
تحتوي هذه الطريقة على 5 معلمات. يمكنك رؤية المعنى المحدد هنا: http://www.w3school.com.cn/xmldom/dom_http.asp.
هذا هو ما نستخدمه.
xmlHttp.open("get"، http://www.cnblogs.com"،true );
تعني معلمة get استخدام طريقة get، أما المعلمة الثانية فهي بطبيعة الحال العنوان الهدف والصفحة الرئيسية لمتنزه المدونة، أما المعلمة الثالثة فهي تعني ما إذا كانت غير متزامنة أم لا. يمكن أيضًا العثور على أوصاف المعلمات المحددة على http://www.w3school.com.cn .
حسنا، تم تحديد الهدف، وكيفية إرساله. استخدم طريقة الإرسال ().
إرسال (النص)، تحتوي طريقة الإرسال () على معلمة واحدة فقط، والتي تمثل كائن DOM، يحتاج كائن DOM هذا إلى شرح الكثير في المرة القادمة
xmlhttp.send(null);
هذا كل شيء. حسنًا، لقد تم إرساله، فكيف يتم التعامل مع النتائج التي تم إرجاعها في هذا الوقت، يتم استخدام أهم شيء في كائن XMLHttpRequest، وهو مقبض حدث onreadystatechange. ماذا يعني ذلك؟ إذن نحتاج إلى شرح حالة الاستعداد لكائن XMLHttpRequest. هناك 5 حالات لحالة الاستعداد، ممثلة بالأرقام من 0 إلى 4 على التوالي.
وصف اسم الحالة
0 حالة التهيئة غير المهيأة. تم إنشاء كائن XMLHttpRequest (قبل استدعاء open()) أو إعادة تعيينه بواسطة طريقة abort().
1 افتح تم استدعاء الأسلوب open()، ولكن لم يتم استدعاء الأسلوب send(). ولم يتم إرسال الطلب بعد.
2 تم استدعاء طريقة Sent Send() وتم إرسال طلب HTTP إلى خادم الويب. لم يتم تلقي أي رد.
3 تم استلام جميع رؤوس الاستجابة. بدأ استلام نص الاستجابة ولكنه لم يكتمل.
4 تم استلام استجابة HTTP المحملة بالكامل.
ومع ذلك، تجدر الإشارة إلى أن الحالات التي يمكن للمتصفحات المختلفة التعامل معها في مؤشر حدث onreadystatechange غير متسقة، ويمكن لـ IE وFireFox التعامل مع الحالات من 1 إلى 4، بينما يمكن لـ Safari التعامل مع الحالات من 2 إلى 4، ويمكن لـ Opera التعامل مع الحالات من 3 و4. . الحالة 0 عديمة الفائدة بشكل أساسي، لأنه سيتم استدعاء طريقة open() مباشرة بعد إنشاء كائن XMLHttpRequest، وستصبح الحالة 1 في هذا الوقت، ما لم تكن بالطبع تريد تحديد ما إذا كان الكائن قد تم إلغاؤه عن طريق الإجهاض ()، ولكن هذه الحالة لا تزال شائعة جدا. في معظم الحالات، يكفي تحديد ما إذا كانت الحالة 4 (مقبولة ومكتملة).
حسنًا، أنا أفهم أن ReadyState لها 5 حالات، ثم تكون نتيجة إرجاع المعالجة هي معرفة ما إذا كانت الحالة تتغير إلى حالات مختلفة ويمكننا إجراء معالجة مختلفة حول كيفية معرفة كائن XMLHttpRequest الذي يجب أن يتعامل مع التغيير عندما تتغير الحالة. هناك طريقتان للكتابة، إحداهما هي استخدام طريقة مجهولة، والأخرى هي تحديد الطريقة. في الواقع، هما مجرد طريقتين مختلفتين للكتابة ولهما نفس التأثير. ألق نظرة على الكود:
xmlhttp.onReadyStateChange = function (){.
// رمز للتعامل مع تغييرات الحالة
}
//أو
xmlhttp.onReadyStateChange = getResult;
وظيفة الحصول على النتيجة () {
/// كود للتعامل مع تغييرات الحالة
}
// بالمناسبة، اسم المقبض طويل نسبيًا، يمكنك تذكره على هذا النحو. عند تغيير حالة القراءة، يتم إرسال الطلب عند تغيير حالة القراءة، ويتم تحديد طريقة المعالجة أيضًا المحتوى؟ هناك سمتان: ResponseText وresponseXML للاستخدام، ResponseXML هو كائن الإرجاع ويحتاج إلى تحليله لاحقًا.
تنبيه (xmlhttp.responseText)؛ // معرفة ما إذا تم إرجاع كود HTML الخاص بالصفحة الرئيسية. أنت من ينجح.
العملية برمتها هي: إنشاء كائن XMLHttpRequest -> تحديد عنوان الإرسال وطريقة الإرسال -> إرسال الطلب -> تحديد طريقة المعالجة ومعالجة نتيجة الإرجاع. ولكن تجدر الإشارة إلى أن فهمنا الطبيعي هو هذا، ولكن يجب تحديد طريقة المعالجة المحددة لمقبض حدث onreadystatechange قبل الإرسال، وإلا فلن تتمكن من معالجة حدث تغيير الحالة.
لذلك يجب أن نتذكره وفقًا للعملية التالية: إنشاء كائن XMLHttpRequest -> تحديد عنوان الإرسال وطريقة الإرسال -> تحديد طريقة معالجة تغيير الحالة -> إرسال الطلب، سيتم إرسال طريقة المعالجة المحددة تلقائيًا يتم استدعاؤه عندما تتغير الحالة.
حسنًا، دعونا نلقي نظرة على الكود المكتمل.
رمز مكتمل
var xmlhttp = false; // أنشئ طلب متغير جديد وقم بتعيين قيمة خطأ له. استخدم false كشرط الحكم، مما يعني أن كائن XMLHttpRequest لم يتم إنشاؤه بعد.
وظيفة إنشاءXMLHttp(){
يحاول{
xmlhttp = new XMLHttpRequest(); // حاول إنشاء كائن XMLHttpRequest باستثناء متصفحات IE التي تدعم هذه الطريقة.
}
قبض (ه){
يحاول{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); // استخدم إصدارًا أحدث من IE لإنشاء كائن متوافق مع IE (Msxml2.XMLHTTP)
}
قبض (ه){
يحاول{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // استخدم إصدارًا أقدم من IE لإنشاء كائن متوافق مع IE (Microsoft.XMLHTTP).
}
صيد (فشل){
xmlhttp = false; // إذا فشل، فتأكد من أن قيمة الطلب لا تزال خاطئة.
}
}
}
إرجاع xmlhttp;
}
xmlhttp = CreateXMLHttp();
xmlhttp.open("get"، http://www.cnblogs.com"،true );
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send(null);
وظيفة الحصول على النتيجة () {
إذا (xmlhttp.readyState == 4){
تنبيه (xmlhttp.responseText)؛
}
}
يبدو أن كل شيء على ما يرام، ولكن هل فكرت يومًا فيما يمكن أن يحدث إذا حدث خطأ في كود HTML أثناء النقل عبر الشبكة، أو أصبح العنوان الذي نحدده غير صالح. في هذا الوقت، تحتاج إلى استخدام سمة الحالة، وهي رمز حالة HTTP الذي يعرضه الخادم. عندما يكون xmlhttp.status يساوي 200، فهذا يعني أن عملية الإرسال كاملة وخالية من الأخطاء. للحصول على المعنى المحدد لرمز حالة HTTP، يمكنك الانتقال إلى موقع ويب مؤسسة W3C لرؤية العنوان http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 .
أعتقد أنه من الجيد حقًا كتابة طريقة getResult() على النحو التالي.
وظيفة الحصول على النتيجة () {
إذا (xmlhttp.readyState == 4 && xmlhttp.status == 200){
تنبيه (xmlhttp.responseText)؛
}
}
حسنًا، يبدو أن الشيء الذي كان في الأصل بسيطًا جدًا أصبح مليئًا بالألفاظ بعد أن كتبت الكثير عنه. ومع ذلك، أعتقد أنه من المهم جدًا فهم المحتوى الأساسي للبرمجة في الوقت الحاضر، يتم استخدام العديد من مكتبات JS لتطوير برامج AJAX، وليست هناك حاجة لكتابة مثل هذه التعليمات البرمجية الأساسية مباشرة. على سبيل المثال، إذا استخدمنا jQuery الشهير، ولكن إذا كان لدينا فهم جيد للأشياء الأساسية، فإن هذه المكتبات تبلغ عن الأخطاء، أو إذا كانت هناك مشكلة، فيمكننا معرفة مكان الخطأ بسرعة كبيرة، وإجراء التغييرات بشكل أسرع جعل البرنامج يعمل بشكل طبيعي.