يستمر مؤشر تحميل Chrome في الغزل أثناء XMLHTTPrequest

https://stackoverflow.com/questions/2703861

01-10-2019
|

سؤال

أنا أكتب تطبيق Ajax Web الذي يستخدم Comet/Long Solling للحفاظ على تحديث صفحة الويب ، ولاحظت في Chrome ، وهو يعامل الصفحة كما لو كان يتم تحميله دائمًا (أيقونة لعلامة التبويب تستمر في الدوران).

اعتقدت أن هذا كان طبيعيًا بالنسبة لـ Google Chrome + Ajax لأنه حتى Google Wave كان له هذا السلوك.

حسنًا ، لاحظت اليوم أن Google Wave لم تعد تحافظ على غزل أيقونة التحميل ، أي شخص يعرف كيف إصلاح هذا؟

هذا هو رمز الاتصال Ajax الخاص بي

var xmlHttpReq = false;
// Mozilla/Safari
if (window.XMLHttpRequest) {
   xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
   xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpReq.open('GET', myURL, true);
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.onreadystatechange = function() {
   if (xmlHttpReq.readyState == 4) {
      updatePage(xmlHttpReq.responseText);
   }
}
xmlHttpReq.send(null);

المحلول

لقد سرقت علبة اختبار أوليغ بلا خجل وقمت بتعديلها قليلاً لمحاكاة الصب الطويل.

load.html:

<!DOCTYPE html>
<head>
  <title>Demonstration of the jQery.load problem</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  jQuery(document).ready(function() {
    $('#main').load("test.php");
  });
  </script>
</head>
<body>
  <div id='main'></div>
</body>
</html>

test.php:

<?php
  sleep(5);
?>
<b>OK!</b>

والنتيجة مثيرة للاهتمام: في Firefox و Opera ، لا يتم عرض أي مؤشر تحميل أثناء XMLHTTPrequests. يتيح ذلك Chrome للغزل ... أظن أن Google Wave لم تعد تستخدم الاقتراع الطويل بعد الآن (ولكن ، على سبيل المثال ، استطلاعات الرأي في كل ثوانٍ ، لتوفير الموارد) ، لكن لا يمكنني اختباره ، حيث ليس لدي حساب .

تعديل: وقد اكتشفت ذلك: بعد إضافة القليل من التأخير في التحميل test.php, ، والتي يمكن أن تكون صغيرة قدر الإمكان ، يتوقف مؤشر التحميل بعد load.html تم تحميله:

jQuery(document).ready(function() {
  setTimeout(function () {
    $('#main').load("test.php");
  }, 0);
});

بطريقة ما ، كما هو أكد في تعليق في إجابة أخرى ، عندما يحصل المتصفح على تحكم في تقديم صفحة إنهاء ، يتوقف المؤشر عن الغزل. ميزة أخرى هي أنه لا يمكن إحباط الطلب بالضغط خروج.

نصائح أخرى

آسف على إجابتي العامة ، ولكن إذا كنت ترغب في الحصول على برنامج أكثر مستقلة للمتصفح ، فيجب عليك استخدام JQuery أو مكتبة أخرى المفضلة لديك بدلاً من مستوى XMLHTTPrequest منخفض المستوى و ActiveXOBject ("Microsoft.xmlhttp").

تحرير:أقوم بإنشاء ملفين HTML بسيطان للغاية: test.htm و load.htm ووضعه هناك في نفس الدليل على موقع ويب (جرب عنوان URL هذا واحد http://www.ok-soft-mbh.com/jquery/load/load.htm). لا أستطيع رؤية التأثير الذي تصفه في سؤالك. قارن هذه الملفات بأمثلة الخاصة بك وسوف تحل مشكلتك.

load.htm:

<!DOCTYPE html PUBLIC
          "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
  <title>Demonstration of the jQery.load problem</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function() {
    $('#main').load("test.htm");
  });
  </script>
</head>

<body>
  <div id='main'></div>
</body>
</html>

test.htm:

<b>OK!</b>

لست متأكدًا من jQuery أو Ajax ، لكنني واجهت مشكلة مماثلة في إدخال قصاصات في محرر ACE مع Snippet Manager. عند إدراج التعليمات البرمجية في المحرر مباشرة عندما يبدو أن الصفحة تقوم بتحميل الصفحة لا يبدو أنه لا يتم تحميله أبدًا - فإن أيقونة علامة التبويب ستدور إلى الأبد. .setTimeout() عملت فقط بشكل غير متسق للغاية. ستعمل عندما يتم تحميل الصفحة بسرعة كبيرة ، ولكن ليس عندما يتم تحميل الصفحة ببطء أكثر. قد يكون ذلك لأنني لم أكن ألتف أي شيء $(document).ready() - كنت أتصل فقط من الكود الخاص بي في نهاية هيئة المستند.

إليك حلًا بدون Jquery وجدته في مشكلة أيقونة Tab التي تدوم إلى الأبد:

var tillPageLoaded = setInterval(function() {
    if( document.readyState === 'complete' ) {

        clearInterval(tillPageLoaded);
        // load whatever

    }    
}, 5);

في حالتي، // load whatever كنت:

ace.config.loadModule('ace/ext/language_tools', function () {
    myEditorInstance.insertSnippet( 'some string' );
});

استخدم هذه الوظيفة

function getHTTPObject() {
 var xhr = false;
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  try {
   xhr = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e) {
   try {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
   } catch(e) {
    xhr = false;
   };
  };
 };
 return xhr;
};

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow