إحدى التقنيات (الأدوات) المهمة المستخدمة عند تصميم AJAX هي كائن XMLHTTPRequest. يعد كائن XMLHttpRequest هو الأساس التقني لجميع تطبيقات AJAX وWeb 2.0 اليوم. على الرغم من أن بائعي البرامج والمجتمعات مفتوحة المصدر يقدمون الآن أطر عمل AJAX مختلفة لتبسيط استخدام كائن XMLHttpRequest، إلا أنه لا يزال من الضروري بالنسبة لنا أن نفهم خصائص هذا الكائن وأساليبه.
1. ما هو كائن XMLHTTPRequest؟
التعريف الأكثر شيوعًا هو: XmlHttp عبارة عن مجموعة من واجهات برمجة التطبيقات التي يمكنها إرسال أو استقبال XML والبيانات الأخرى من خلال بروتوكول http في JavaScript وVbScript وJscript ولغات البرمجة النصية الأخرى. أكبر استخدام لـ XmlHttp هو أنه يمكنه تحديث جزء من محتوى صفحة الويب دون تحديث الصفحة بأكملها. (هذه الوظيفة هي إحدى الميزات الرئيسية لـ AJAX)
شرح من MSDN: يوفر XmlHttp بروتوكولًا للعميل للتواصل مع خادم http. يمكن للعميل إرسال طلب إلى خادم http من خلال كائن XmlHttp (MSXML2.XMLHTTP.3.0) واستخدام Microsoft XML Document Object Model Microsoft؟ XML Document Object Model (DOM) لمعالجة الاستجابة.
اسمحوا لي أن أتطرق هنا. في الواقع، ظهر هذا الشيء في وقت مبكر جدًا، ومع ذلك، لم يكن دعم المتصفح كافيًا في الماضي، وكان مدعومًا فقط في IE، لذلك لم يستخدمه معظم مبرمجي الويب كثيرًا تغيرت كثيرًا، واعتمدتها Mozilla وSafari كمعيار فعلي، وبدأت المتصفحات الرئيسية في دعم كائن XMLHTTPRequest. ولكن ما يجب التأكيد عليه هنا هو أن XMLHTTPRequest ليس معيارًا لـ W3C بعد، وبالتالي فإن الأداء على المتصفحات المختلفة يختلف قليلاً.
2. إنشاء كائن XMLHTTPRequest
عند الحديث عن الاختلافات، دعونا نلقي نظرة على كيفية الإعلان عنه (استخدامه). قبل استخدام كائن XMLHTTPRequest لإرسال الطلبات ومعالجة الاستجابات، يجب علينا استخدام جافا سكريبت لإنشاء كائن XMLHTTPRequest. (ينفذ IE XMLHTTPRequest ككائن ActiveX، والمتصفحات الأخرى [مثل Firefox/Safari/Opear] تنفذه ككائن جافا سكريبت أصلي). دعونا نلقي نظرة على كيفية استخدام جافا سكريبت لإنشائه:
وفيما يلي اقتباس:
<script language="javascript" type="text/javascript">
<!--
فار xmlhttp;
// إنشاء كائن XMLHTTPRequest
الدالة createXMLHTTPRequest(){
if(window.ActiveXObject){ // تحديد ما إذا كان عنصر تحكم ActiveX مدعومًا أم لا
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // إنشاء كائن XMLHTTPRequest عن طريق إنشاء مثيل جديد لـ ActiveXObject
}
else if(window.XMLHTTPRequest){ // تحديد ما إذا كان سيتم تنفيذ XMLHTTPRequest ككائن جافا سكريبت محلي
xmlhttp = new XMLHTTPRequest(); // إنشاء مثيل لـ XMLHTTPRequest (كائن جافا سكريبت المحلي)
}
}
//-->
</script>3. السمات والطرق نظرًا لوجود الكثير من الأشياء، سأستخدم هذه الصفحة لسرد الأساليب والسمات لاحقًا (لأنني أتعلم أيضًا).
<أتش تي أم أل>
<الرأس>
<title>وصف العرض التوضيحي لكائن XMLHTTPRequest</title>
<script language="javascript" type="text/javascript">
<!--
فار xmlhttp;
// أنشئ كائن XMLHTTPRequest
الدالة createXMLHTTPRequext(){
إذا (window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
وإلا إذا(window.XMLHTTPRequest){
xmlhttp = new XMLHTTPRequest();
}
}
وظيفة PostOrder(xmldoc)
{
createXMLHTTPRequext();
// الطريقة: مفتوحة
// أنشئ طلب http جديدًا وحدد طريقة الطلب وعنوان URL ومعلومات التحقق
// بناء الجملة: oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//حدود
// bstrMethod
// طرق http، مثل: POST وGET وPUT وPROPFIND. عدم حساسية الحالة.
// bstrUrl
// يمكن أن يكون عنوان URL المطلوب عنوانًا مطلقًا أو عنوانًا نسبيًا.
// فاراسينك [اختياري]
// النوع المنطقي يحدد ما إذا كان هذا الطلب غير متزامن أم لا. إذا كان صحيحًا، فسيتم استدعاء وظيفة رد الاتصال المحددة بواسطة السمة onreadystatechange عندما تتغير الحالة.
// bstrUser[اختياري]
// إذا كان الخادم يتطلب التحقق، فحدد اسم المستخدم هنا. وإذا لم يتم تحديده، فستنبثق نافذة التحقق عندما يطلب الخادم التحقق.
// كلمة المرور bstr[اختياري]
// جزء كلمة المرور من معلومات التحقق. إذا كان اسم المستخدم فارغًا، فسيتم تجاهل هذه القيمة.
// ملاحظة: بعد استدعاء هذه الطريقة، يمكنك استدعاء طريقة الإرسال لإرسال البيانات إلى الخادم.
xmlhttp.Open("get", " http://localhost/example.htm ", false);
// var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
// تنبيه(book.xml);
// السمة: onreadystatechange
//onreadystatechange: حدد معالج الحدث عندما تتغير خاصية ReadyState
// بناء الجملة: oXMLHttpRequest.onreadystatechange = funcMyHandler;
// يوضح المثال التالي استدعاء الدالة HandleStateChange عندما تتغير خاصية ReadyState لكائن XMLHTTPRequest.
// عند استلام البيانات (حالة الاستعداد == 4) سيتم تنشيط زر في هذه الصفحة
// ملاحظة: هذه الخاصية للكتابة فقط وهي امتداد لنموذج كائن مستند W3C.
xmlhttp.onreadystatechange= HandleStateChange;
// الطريقة: إرسال
// أرسل طلبًا إلى خادم http واستقبل الرد
// بناء الجملة: oXMLHttpRequest.send(varBody);
// المعلمات: varBody (البيانات التي سيتم إرسالها من خلال هذا الطلب.)
// ملاحظة: يعتمد الوضع المتزامن أو غير المتزامن لهذه الطريقة على معلمة bAsync في الطريقة المفتوحة. إذا كان bAsync == خطأ، فستنتظر هذه الطريقة حتى يكتمل الطلب أو تنتهي المهلة قبل العودة سوف يعود على الفور.
// تأخذ هذه الطريقة معلمة اختيارية واحدة، وهي requestBody المطلوب استخدامها. أنواع الإدخال VARIANT المقبولة هي BSTR، وSAFEARRAY لـ UI1 (البايت غير الموقع)، وIDispatch إلى كائن XML Document Object Model (DOM)، وIStream * استخدم فقط الترميز المقسم (للإرسال) عند إرسال أنواع إدخال IStream * يقوم المكون تلقائيًا بتعيين رأس طول المحتوى لجميع أنواع الإدخال باستثناء IStream *.
// إذا كانت البيانات المرسلة هي BSTR، فسيتم ترميز الاستجابة كـ utf-8، ويجب تعيين رأس نوع المستند الذي يحتوي على مجموعة الأحرف في الموضع المناسب.
// إذا كان نوع الإدخال هو SAFEARRAY لـ UI1، فسيتم إرسال الاستجابة كما هي بدون تشفير إضافي. يجب على المتصل تعيين رأس نوع المحتوى بنوع المحتوى المناسب.
// إذا كانت البيانات المرسلة عبارة عن كائن XML DOM، فسيتم ترميز الاستجابة بالترميز المعلن في مستند XML. إذا لم يتم الإعلان عن أي ترميز في مستند XML، فسيتم استخدام UTF-8 الافتراضي.
// إذا كان نوع الإدخال هو IStream *، فسيتم إرسال الاستجابة كما هي بدون تشفير إضافي. يجب على المتصل تعيين رأس نوع المحتوى بنوع المحتوى المناسب.
xmlhttp.Send(xmldoc);
// الطريقة: getAllResponseHeaders
// احصل على كافة رؤوس http للاستجابة
// بناء الجملة: strValue = oXMLHttpRequest.getAllResponseHeaders();
// ملاحظة: يتم فصل كل اسم وقيمة لرأس http بنقطتين وينتهي بـ rn. لا يمكن استدعاء هذه الطريقة إلا بعد اكتمال طريقة الإرسال.
تنبيه (xmlhttp.getAllResponseHeaders())؛
// الطريقة: getResponseHeader
// احصل على رأس http المحدد من معلومات الاستجابة
// بناء الجملة: strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// ملاحظة: لا يمكن استدعاء هذه الطريقة إلا بعد نجاح طريقة الإرسال. إذا كان نوع المستند الذي أرجعه الخادم هو "text/xml"، فهذه الجملة
// xmlhttp.getResponseHeader("Content-Type"); سيُرجع السلسلة "text/xml". يمكنك استخدام طريقة getAllResponseHeaders للحصول على معلومات رأس http كاملة.
تنبيه (xmlhttp.getResponseHeader("Content-Type")); // إخراج عمود نوع المحتوى في رأس http: إصدار واسم خادم الويب الحالي.
document.frmTest.myButton.disabled = true;
// الطريقة: إحباط
// إلغاء الطلب الحالي
// بناء الجملة: oXMLHttpRequest.abort();
// ملاحظة: بعد استدعاء هذه الطريقة، يقوم الطلب الحالي بإرجاع حالة UNINITIALIZED.
//xmlhttp.abort();
// الطريقة: setRequestHeader
// حدد بشكل منفصل رأس http معين للطلب
// بناء الجملة: oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// المعلمات: bstrHeader (سلسلة، اسم الرأس.)
// bstrValue(سلسلة، قيمة.)
// ملاحظة: إذا كان رأس http بهذا الاسم موجودًا بالفعل، فسيتم استبداله. يجب استدعاء هذه الطريقة بعد الطريقة المفتوحة.
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
}
الدالة HandleStateChange()
{
// السمة: ReadyState
// إرجاع الحالة الحالية لطلب XMLHTTP
// بناء الجملة: lValue = oXMLHttpRequest.readyState;
// ملاحظات: متغير، هذه السمة للقراءة فقط، ويتم تمثيل الحالة بعدد صحيح بطول 4. التعريف كما يلي:
// 0 (غير مهيأ) تم إنشاء الكائن، ولكن لم تتم تهيئته (لم يتم استدعاء الطريقة المفتوحة بعد)
// 1 (التهيئة) تم إنشاء الكائن ولم يتم استدعاء طريقة الإرسال بعد.
// 2 (إرسال البيانات) تم استدعاء طريقة الإرسال، لكن الحالة الحالية ورأس http غير معروفين
// 3 (يتم إرسال البيانات) تم استلام جزء من البيانات نظرًا لأن الاستجابة ورؤوس http غير مكتملة، سيحدث خطأ عند الحصول على جزء من البيانات من خلال ResponseBody وresponseText.
// 4 (كامل) اكتمل استقبال البيانات في هذا الوقت، ويمكن الحصول على بيانات الاستجابة الكاملة من خلال ResponseBody وresponseText.
إذا (xmlhttp.readyState == 4){
document.frmTest.myButton.disabled = false;
// السمة: استجابة الجسم
// إرجاع بيانات استجابة الخادم بتنسيق معين
// بناء الجملة: strValue = oXMLHttpRequest.responseBody;
// ملاحظات: متغير، هذه الخاصية للقراءة فقط وتمثل البيانات الثنائية غير المشفرة التي يتم إرجاعها مباشرة من الخادم بتنسيق مصفوفة غير موقعة.
تنبيه (xmlhttp.responseBody)؛
// الخاصية: ResponseStream
// إرجاع معلومات الاستجابة في شكل كائن Ado Stream
// بناء الجملة: strValue = oXMLHttpRequest.responseStream؛
// ملاحظات: متغير، هذه الخاصية للقراءة فقط وتقوم بإرجاع معلومات الاستجابة في شكل كائن Ado Stream.
تنبيه (xmlhttp.responseStream)؛
// السمة: ResponseText
// قم بإرجاع معلومات الاستجابة كسلسلة
// بناء الجملة: strValue = oXMLHttpRequest.responseText؛
// ملاحظات: متغير، هذه الخاصية للقراءة فقط وتقوم بإرجاع معلومات الاستجابة كسلسلة. يحاول XMLHTTP فك تشفير معلومات الاستجابة إلى سلسلة Unicode،
// يقوم XMLHTTP بتعيين تشفير بيانات الاستجابة إلى UTF-8 افتراضيًا إذا كانت البيانات التي يتم إرجاعها بواسطة الخادم تحتوي على BOM (علامة ترتيب البايت)، فيمكن لـ XMLHTTP ذلك
// لفك تشفير أي بيانات UCS-2 (نهاية كبيرة أو صغيرة) أو بيانات UCS-4. لاحظ أنه إذا قام الخادم بإرجاع مستند XML، فستتم هذه السمة
// الخصائص لا تتعامل مع إعلانات الترميز في مستندات XML. تحتاج إلى استخدام ResponseXML للتعامل معها.
تنبيه (xmlhttp.responseText)؛
// السمة: ResponseXML
// قم بتنسيق معلومات الاستجابة في كائن مستند Xml وإعادتها
// بناء الجملة: var objDispatch = oXMLHttpRequest.responseXML;
// ملاحظات: متغير، هذه الخاصية للقراءة فقط، قم بتنسيق معلومات الاستجابة في كائن مستند Xml وإعادتها. إذا لم تكن بيانات الاستجابة مستند XML صالحًا،
// هذه الخاصية نفسها لا تُرجع XMLDOMParseError، ويمكن الحصول على معلومات الخطأ من خلال كائن DOMDocument الذي تمت معالجته.
تنبيه("النتيجة =" + xmlhttp.responseXML.xml);
// السمة: الحالة
// قم بإرجاع رمز حالة http للطلب الحالي
// بناء الجملة: lValue = oXMLHttpRequest.status;
// قيمة الإرجاع: رمز حالة http القياسي الطويل، المحدد على النحو التالي:
//الرقم:الوصف
// 100:متابعة
// 101:تبديل البروتوكولات
// 200:حسنا
// 201:تم الإنشاء
// 202: مقبول
// 203:معلومات غير موثوقة
// 204:لا يوجد محتوى
// 205: إعادة تعيين المحتوى
// 206: محتوى جزئي
// 300:خيارات متعددة
// 301:تم النقل نهائيًا
// 302:تم العثور عليه
// 303: انظر أخرى
// 304: لم يتم تعديله
// 305: استخدم الوكيل
// 307: إعادة توجيه مؤقتة
// 400: طلب سيء
// 401: غير مصرح به
// 402:الدفع مطلوب
// 403:ممنوع
// 404: غير موجود
// 405: الطريقة غير مسموح بها
// 406: غير مقبول
// 407: مصادقة الوكيل مطلوبة
// 408: مهلة الطلب
// 409:الصراع
// 410: ذهب
// 411:الطول مطلوب
// 412: فشل الشرط المسبق
// 413: طلب الكيان كبير جدًا
// 414:معرف URI للطلب طويل جدًا
// 415: نوع الوسائط غير مدعوم
// 416: النطاق المطلوب غير مناسب
// 417:فشل التوقع
// 500: خطأ داخلي في الخادم
// 501: لم يتم التنفيذ
// 502 مدخل غير صالح
// 503: الخدمة غير متاحة
// 504: مهلة البوابة
// 505: إصدار HTTP غير مدعوم
// ملاحظة: عدد صحيح طويل، هذه الخاصية للقراءة فقط وترجع رمز حالة http للطلب الحالي، ولا يمكن الحصول على هذه الخاصية إلا بعد إرسال البيانات واستلامها.
تنبيه (xmlhttp.status)؛
// السمة: نص الحالة
// إرجاع حالة صف الاستجابة للطلب الحالي
// بناء الجملة: strValue = oXMLHttpRequest.statusText؛
// ملاحظات: هذه الخاصية للقراءة فقط، وتقوم بإرجاع حالة صف الاستجابة للطلب الحالي في BSTR.
تنبيه (xmlhttp.statusText)؛
}
}
//-->
</script>
</الرأس>
<الجسم>
<اسم النموذج = "frmTest">
<input name = "myButton" type = "button" value = "انقر فوقي" onclick = "PostOrder('http://localhost/example.htm');">
</النموذج>
</الجسم>
</html>