IE9 - счетчик не отображается во время запроса ajax [решено - не используйте Msxml2.XMLHTTP.4.0] - PullRequest
Новая
       22

IE9 - счетчик не отображается во время запроса ajax [решено - не используйте Msxml2.XMLHTTP.4.0]

1 голос
/ 09 июля 2011

Мой код выглядит следующим образом: 

  function loadContent() {

    if(loading) { return false; }
    showSpinner();

    var xhr = createXHR();
    xhr.open("GET", "http://localhost/testing.php");
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4) {
        hideSpinner();
        var resp = xhr.responseText;
        document.getElementById("content").innerHTML = resp;
      }
    }
    xhr.send(null);

  }

  function showSpinner() {
    document.getElementById("loadingIcon").style.display = 'inline';
    loading = true;
  }

  function hideSpinner() {
    document.getElementById("loadingIcon").style.display = 'none';
    loading = false;
  }

Это работает так, как задумано в Firefox и Chrome, но в IE9 счетчик не отображается.

Я прокомментировал первую строку функции hideSpinner () и обнаружил, что IE9 отображает счетчик, но только после того, как запрос AJAX вернул результат. Я что-то сделал здесь не по порядку?

[править] Разобрался - оригинальный код метода createXHR () следующий: 

  function createXHR() {
    try { return new ActiveXObject("Msxml2.XMLHTTP.5.0"); } catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.4.0"); } catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
    try { return new XMLHttpRequest(); } catch(e) {}
    return null;
  }

Перемещение последней строки 'try' наверх решает проблему.

1 Ответ

0 голосов
/ 09 июля 2011

Не полагайтесь на глобальные переменные для такой вещи. Вам вообще не нужна переменная loading. 

function loadContent() {
  var spinner = document.getElementById("loadingIcon");
  var xhr = createXHR();

  spinner.style.display = 'inline';

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        document.getElementById("content").innerHTML = xhr.responseText;
      }
      spinner.style.display = 'none';
    }
  }

  xhr.open("GET", "http://localhost/testing.php");
  xhr.send(null);
}
...