تفسير XMLHttpRequest (أولاً) الطلبات المتزامنة والغير متزامنة

XMLHttpRequest يجعل إرسال طلب HTTP سهلاً. كل ما تحتاجه هو إنشاء نموذج طلب، فتح URL، ثم إرسال هذا الطلب. عند اكتمال التحميل، يمكنك أيضًا الحصول على حالة HTTP للنتائج و內 محتوى الرد من نموذج الطلب.　

يمكن للحصول على البيانات من الطلبات التي أنشأها XMLHttpRequest بأثنين من الطرق، النمط اللامتماثل أو النمط المتماثل. يتم تحديد نوع الطلب من قبل قيمة الثالثة من طريقة open() في XMLHttpRequest. إذا كان قيمة هذا المعامل هي false، فإن الطلب عبر XMLHttpRequest يتم إكماله في النمط المتماثل، وإلا يتم إكمال العملية في النمط اللامتماثل.

نوعان من أنماط التواصل:الطلبات المتماثلة واللامتماثلة:　

الطلب المتماثل
　الطلبات المتماثلة في النواة الرئيسية تمنع صفحة الويب، بسبب تأثير سيء على تجربة المستخدم، تم التخلي عن بعض الطلبات المتماثلة في النواة الرئيسية في بعض المتصفحات الحديثة.في حالات نادرة، قد تكون الطلبات المتماثلة عبر XMLHttpRequest أكثر ملاءمة من الطلبات اللامتماثلة.

　1.عند استخدام XMLHttpRequest في Worker، الطلب المتماثل أكثر ملاءمة من الطلب اللامتماثل.
　كود الصفحة الرئيسية:

 <script type="text/javascript">
 var oMyWorker = new Worker("myTask.js"); 
 oMyWorker.onmessage = function(oEvent) { 
  alert("Worker قال: " + oEvent.data);
 };
 oMyWorker.postMessage("Hello");
</script>
myFile.txt (ملف الطلب المتماثل عبر XMLHttpRequest):
Hello World!! 

يحتوي على كود Worker: myTask.js

 self.onmessage = function (oEvent) {
 إذا (oEvent.data === "Hello") {
var oReq = new XMLHttpRequest();
oReq.open("GET", "myFile.txt", false); // طلب متزامن
oReq.send(null);
self.postMessage(oReq.responseText);
 }
}; 

ملاحظة: نظرًا لاستخدام Worker، فإن هذا الطلب متقطع أيضًا.
　يمكن استخدام نفس الطريقة لجعل السكربت يتفاعل مع الخادم في الخلفية، وتحميل بعض المعلومات مقدماً. اطلاع على استخدام web workers للحصول على مزيد من التفاصيل

　2. الحالات التي لا مفر منها من استخدام الطلبات المتزامنة
　في بعض الحالات النادرة، يمكن استخدام نمط XMLHttpRequest المتزامن فقط. مثل في معالجة أحداث window.onunload و window.onbeforeunload. إذا تم استخدام نمط XMLHttpRequest المتقطع في معالجة أحداث unload للصفحة، فإنه يمكن أن يؤدي إلى مشكلة: عند عودة الرد، لم تعد الصفحة موجودة، وتدمير جميع المتغيرات والتبويب المحدد. النتيجة هي خطأ "الدالة غير معرفة". الحل هو استخدام الطلب المتزامن هنا، حيث لا يتم إغلاق الصفحة حتى اكتمال الطلب.

 window.onbeforeunload = function () {
 var oReq = new XMLHttpRequest();
 oReq.open("GET", "logout.php?nick=" + escape(myName), false); // طلب متزامن
 oReq.send(null);
 if (oReq.responseText.trim() !== "已退出"); { // "已退出" هو البيانات المنسوخة
return "فشل الخروج، هل ترغب في تنفيذ الخروج يدويًا؟";
 }
}; 

طلبات متقطعة
　إذا تم استخدام النمط المتقطع، فإنه سيتم تنفيذ دالة التبويب المحددة بعد استلام البيانات بشكل كامل، بينما يمكن للتصفح العادي للصفحة تنفيذ مهام أخرى أثناء تنفيذ الطلب.　

3. مثال: إنشاء طريقة قياسية لقراءة الملفات الخارجية
　في بعض الحالات المطلوبة، يجب قراءة عدة ملفات خارجية. هذا هو الدالة القياسية. تستخدم هذه الدالة مكتبة XMLHttpRequest للطلبات المتقطعة. ويمكن تحديد دالة التبويب المخصصة لكل ملف بعد قراءته.

 function loadFile (sURL, timeout, fCallback /*, 传入参数1, 传入参数2, 等 */) {
 var aPassArgs = Array.prototype.slice.call(arguments, 3), oReq = new XMLHttpRequest();
 oReq.ontimeout = function() {
console.log("طلب زمني محدد.");
 }
 oReq.onreadystatechange = function() {
إذا كان oReq.readyState === 4 { 
 إذا كان oReq.status === 200 {
  fCallback.apply(oReq, aPassArgs);
 } else {
  console.log("خطأ", oReq.statusText);
 }
}
 };
 oReq.open("GET", sURL, true);
 oReq.timeout = timeout;
 oReq.send(null);
} 

استخدام loadFile:

 function showMessage (sMsg) {
 alert(sMsg + this.responseText);
}
loadFile("message.txt", 200, showMessage, "رسالة جديدة!\\n"); 

السطر 1 يحدد دالة، ويتم استدعاء دالة fCallback عند اكتمال قراءة الملف، باستخدام جميع المعلمات بعد الثالثة كمعلمات الخاصة بها.
السطر 3 يستخدم إعدادًا للوقت لمنع تشغيل كودك لفترة طويلة في انتظار استقبال بيانات الطلب، من خلال تعيين خاصية timeout لمسجل XMLHttpRequest.
　السطر 6 يحدد معالج أحداث onreadystatechange للدالة المراجعة، وتحقق الدالة في كل مرة تنفيذها من أن الطلب قد انتهى (حالة الطلب 4)، إذا كان الأمر كذلك، فإنها تقوم بتحديد ما إذا كان الطلب ناجحًا (هل هو حالة HTTP 200)، إذا كان الأمر كذلك، فإنها تضيف رمز الصفحة، وإذا حدث خطأ في الطلب، فإنها تضيف رسالة الخطأ.
　السطر 15 يحدد الثالثة كمعلمة صحيحة، مما يعني أن الطلب يجب تنفيذه بشكل متزامن.

　4. مثال: استخدم الطلبات المتزامنة، بدون استخدام الكلاسات.

 function switchXHRState() {
 switch (this.readyState) {
case 0: console.log("لم يتم استدعاء open() بعد."); break;
case 1: console.log("لم يتم استدعاء send() بعد."); break;
case 2: console.log("تم استدعاء send()، تم إرجاع رؤوس الرد وال��态."); break;
case 3: console.log("تم تنزيل بعض الردود، لا زال التنزيل في طور الإنجاز."); break;
حالة 4: console.log("الطلب مكتمل!"); this.callback.apply(this, this.arguments);
 }
};
function loadFile (sURL, fCallback /*, 传入参数1, 传入参数2, 等 */) {
 var oReq = new XMLHttpRequest();
 oReq.callback = fCallback;
 oReq.arguments = Array.prototype.slice.call(arguments, 2);
 oReq.onreadystatechange = switchXHRState;
 oReq.open("GET", sURL, true);
 oReq.send(null);
} 

استخدام bind:　

function switchXHRState(fCallback, aArguments) {
 switch (this.readyState) {
case 0: console.log("لم يتم استدعاء open() بعد."); break;
case 1: console.log("لم يتم استدعاء send() بعد."); break;
case 2: console.log("تم استدعاء send()، تم إرجاع رؤوس الرد وال��态."); break;
case 3: console.log("تم تنزيل بعض الردود، لا زال التنزيل في طور الإنجاز."); break;
case 4: console.log("الطلب تم إكماله!"); fCallback.apply(this, aArguments);
 }
};
function loadFile (sURL, fCallback /*, 传入参数1, 传入参数2, 等 */) {
 var oReq = new XMLHttpRequest();
 oReq.onreadystatechange = switchXHRState.bind(oReq, fCallback, Array.prototype.slice.call(arguments, 2));
 oReq.open("GET", sURL, true);
 oReq.send(null);
}

هذا هو نهاية محتوى هذا المقال، آمل أن يكون هذا المقال مفيداً للعديد منكم في تعلم، ونأمل أن تكونوا قد ساندتم دروس النفخ.

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