XMLHTTPrequest يجعل إرسال طلب HTTP سهل للغاية. تحتاج فقط إلى إنشاء مثيل لكائن الطلب ، وفتح عنوان URL ، ثم إرسال الطلب. بعد الانتهاء من الإرسال ، يمكن أيضًا الحصول على حالة HTTP الناتجة ومحتوى الاستجابة التي تم إرجاعها من كائن الطلب.
يمكن الحصول على الطلبات التي تم إنشاؤها بواسطة xmlhttprequest بطريقتين ، الوضع غير المتزامن أو الوضع المتزامن. يتم تحديد نوع الطلب من خلال قيمة ASYNC ، المعلمة الثالثة لطريقة Open () لكائن XMLHTTPrequest هذا. إذا كانت قيمة هذه المعلمة خاطئة ، فسيتم إجراء طلب XMLHTPRequest في وضع متزامن ، وإلا سيتم إكمال العملية في الوضع غير المتزامن.
وضعان اتصال: طلبات متزامنة وغير متزامنة:
مزامنة الطلبات
طلبات التزامن في سلسلة الخيط الرئيسية حظر الصفحة ، وبسبب ضعف تجربة المستخدم ، تم إهمال طلبات التزامن على الموضوع الرئيسي لبعض المتصفحات الأخيرة. في حالات نادرة ، سيكون XMLHTTPrequests باستخدام الوضع المتزامن أكثر ملاءمة من استخدام الوضع غير المتزامن.
1. عند استخدام XMLHTTPREQUEST في العامل ، تكون الطلبات المتزامنة أكثر ملاءمة من الطلبات غير المتزامنة.
رمز في الصفحة الرئيسية:
<script type = "text/javaScript"> var omyworker = New Worker ("MyTask.js") ؛ omyworker.onmessage = function (oevent) {Alert ("قال العامل:" + oevent.data) ؛ } ؛ Omyworker.postMessage ("Hello") ؛ </script> myfile.txt (الملف الذي يزامن كائن XmlHttprequest المطلوب): Hello World !!يتضمن رمز العامل: mytask.js
self.onmessage = function (oevent) {if (oevent.data === "hello") {var oreq = new xmlhttprequest () ؛ oreq.open ("get" ، "myfile.txt" ، false) ؛ // طلب متزامن oreq.send (null) ؛ self.postmessage (oreq.Responsetext) ؛ }} ؛ملاحظة: منذ استخدام العامل ، يكون الطلب غير متزامن بالفعل.
يمكن استخدام طرق مماثلة للسماح للنصوص بالتفاعل مع الخادم في الخلفية والتحويل قبل محتوى معين. تحقق من استخدام عمال الويب لمزيد من التفاصيل
2. الوضع الذي يجب استخدام الطلبات المتزامنة
في حالات نادرة ، يمكن استخدام طلبات XMLHTTPRequest الوضع المتزامن فقط. على سبيل المثال ، في Window.onunload و Window.OnBeforeunload وظائف معالجة الأحداث. إن استخدام XMLHTTPrequest غير المتزامن في وظيفة معالج الأحداث التفريغ للصفحة سيؤدي إلى المشكلة: عند إرجاع الاستجابة ، لم تعد الصفحة موجودة ، وتم تدمير جميع المتغيرات ووظائف رد الاتصال. يمكن أن تتسبب النتيجة فقط في حدوث خطأ ، "لا يتم تعريف الوظيفة". يتمثل الحل في استخدام الطلب في وضع التزامن هنا ، بحيث لن يتم إغلاق الصفحة حتى يتم اكتمال الطلب.
window.onbeforeUnload = function () {var oreq = new xmlHttPrequest () ؛ Oreq.Open ("get" ، "logout.php؟ nick =" + Escape (myName) ، false) ؛ // طلب متزامن oreq.send (null) ؛ if (oreq.ResponSetext.trim ()! == "exited") ؛ {// "exited" هل فشل مخرج إرجاع البيانات التي تم إرجاعها "، هل تريد تنفيذ الخروج يدويًا؟" ؛ }} ؛طلب غير متزامن
إذا كنت تستخدم الوضع غير المتزامن ، عند طلب البيانات بالكامل ، سيتم تنفيذ وظيفة رد الاتصال المحدد. أثناء تنفيذ الطلب ، يمكن للمتصفح عادة تنفيذ المعاملات الأخرى.
3. مثال: إنشاء طريقة قياسية لقراءة الملفات الخارجية
في بعض المتطلبات ، يجب قراءة ملفات خارجية متعددة. هذه وظيفة قياسية. تستخدم هذه الوظيفة كائن XMLHTTPrequest للطلبات غير المتزامنة. كما يتيح لك تحديد وظيفة رد اتصال مختلفة بعد اكتمال قراءة كل ملف.
Function LoadFile (surl ، timeout ، fcallback / *، تمرير في المعلمة 1 ، تمرير في المعلمة 2 ، إلخ. oreq.ontimeout = function () {console.log ("request timeout.") ؛ } oreq.onReadyStateChange = function () {if (oreq.readyState === 4) {if (oreq.status === 200) {fcallback.apply (oreq ، apassargs) ؛ } آخر {console.log ("error" ، oreq.statustext) ؛ }}} ؛ Oreq.Open ("Get" ، surl ، true) ؛ oreq.timeout = timeout ؛ oreq.send (null) ؛}استخدام وظيفة الحمل:
وظيفة showMessage (smsg) {Alert (smsg + this.responsetext) ؛} loadfile ("message.txt" ، 200 ، showmessage ، "new Message! // n") ؛الخط 1 يحدد وظيفة. بعد قراءة الملف ، سيتم استدعاء وظيفة fcallback مع جميع المعلمات بعد المعلمة الثالثة كمعلمات خاصة بها.
يستخدم السطر 3 إعداد مهلة لتجنب الكود الخاص بك من تنفيذ التنفيذ طويل الأجل لبيانات الإرجاع لطلب القراءة. عن طريق تعيين قيمة إلى خاصية المهلة لكائن XMLHTTPrequest إلى خاصية المهلة
يحدد السلوك السادس على مقبض الحدث onreadystatechange وظيفة رد الاتصال. في كل مرة يتم تنفيذ الوظيفة ، تتحقق مما إذا كان الطلب ينتهي (حالة الطلب هي 4). إذا كان الأمر كذلك ، فحدد ما إذا كان الطلب ناجحًا (حالة HTTP هي 200). إذا كان الأمر كذلك ، يقوم بإخراج رمز مصدر الصفحة. في حالة حدوث خطأ ، يخرج رسالة الخطأ.
يحدد السطر 15 أن المعلمة الثالثة صحيحة ، مما يشير إلى أنه يجب تنفيذ الطلب في الوضع غير المتزامن.
4. مثال: استخدم الطلبات غير المتزامنة ، لا يتم استخدام أي إغلاق.
وظيفة switchxhrstate () {switch (this.readyState) {case 0: console.log ("The Open () لم يتم استدعاء طريقة بعد.") ؛ استراحة ؛ الحالة 1: console.log ("لم يتم استدعاء طريقة send () بعد.") ؛ كسر ؛ الحالة 2: console.log ("تم استدعاء طريقة send () ، تم إرجاع رأس الاستجابة وحالة الاستجابة.") ؛ استراحة ؛ الحالة 3: console.log ("التنزيل ، تم الحصول على جزء من كيان الاستجابة.") ؛ استراحة ؛ الحالة 4: console.log ("request الانتهاء!") ؛ this.callback.apply (هذا ، this.arguments) ؛ } ؛ oreq.callback = fcallback ؛ oreq.arguments = array.prototype.slice.call (الوسائط ، 2) ؛ oreq.OnReadyStateChange = switchxhrstate ؛ Oreq.Open ("Get" ، surl ، true) ؛ oreq.send (null) ؛}استخدم الربط:
Function SwitchxHrstate (fcallback ، aarguments) {switch (this.readyState) {case 0: console.log ("The Open () لم يتم استدعاء طريقة.") ؛ كسر ؛ الحالة 1: console.log ("لم يتم استدعاء طريقة send ().") ؛ كسر ؛ الحالة 2: console.log ("تم استدعاء طريقة send () ، تم إرجاع رأس الاستجابة وحالة الاستجابة.") ؛ استراحة ؛ الحالة 3: Console.log ("تم الحصول على كيان الاستجابة الجزئية أثناء التنزيل.") ؛ استراحة ؛ الحالة 4: console.log ("request الانتهاء!") ؛ fcallback.apply (هذا ، Aarguments) ؛ } ؛ oreq.OnReadyStateChange = switchxhrstate.bind (oreq ، fcallback ، array.prototype.slice.call (الحجج ، 2)) ؛ Oreq.Open ("Get" ، surl ، true) ؛ oreq.send (null) ؛}ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.