Javascript с ajax работает в FF, но не в IE

Question

Я использую этот код:

<script type="text/javascript">

        var id = <?php if(is_numeric($_GET['id'])) print $_GET['id']; else print "0"; ?>;
        var startid = id+1;
        var end = false;

        // function for loading one row
        function getRow(rowid)
        {           
          //$.get("unhandled_one_row.php?id=" + rowid, function(data){ if(data!="\n") $('#dash_table > tbody').append(data); else {  } });

          function HttpRequest(url){
          var pageRequest = false; //variable to hold ajax object

          /*
          if (!pageRequest && typeof XMLHttpRequest != 'undefined')
             pageRequest = new XMLHttpRequest();
          */

          if(window.ActiveXObject)  // Internet Explorer  
          { 
            try
            {
              pageRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
              pageRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
          }
          else  // Firefox, Opera, Safari  
          { 
            pageRequest = new XMLHttpRequest();  
          }

          if (pageRequest){ //if pageRequest is not false
             pageRequest.open('GET', url, false); //get page synchronously 
             pageRequest.send(null);
             embedpage(pageRequest);
             }
          }

          function embedpage(request){
          //if viewing page offline or the document was successfully retrieved online (status code=200)
          if (window.location.href.indexOf("http")==-1 || request.status==200)
          {
             if(request.responseText != "\n") document.write(request.responseText);
             else end = true;
          }
          }

          HttpRequest("unhandled_one_row.php?id=" + rowid);
        }

        // function for deleting a row
        function RemoveRow(obj)
        {
          var rws;
          obj=document.getElementById(obj);
          rws=obj.getElementsByTagName('TR');
          obj.removeChild(rws[rws.length-1]);
        }

        // row loading loop
        do
        {
          getRow(id++);
        } while(!end && document.getElementById("dash_table").clientHeight < document.body.clientHeight - 100);

        // avaiable height exceed control
        // deletes one row if the height was exceeded
        if(document.getElementById("dash_table").clientHeight >= document.body.clientHeight - 100)
        {
          RemoveRow('dash_table');
          id--;
        }

Предполагается динамически загружать таблицу строка за строкой, сравнивая высоту таблицы с доступной высотой экрана, и когда достигается доступная высота, цикл останавливается. Этот код прекрасно работает в FF G.Chrome, но в IE цикл зацикливается бесконечно.

Почему?

Answer 1

ОК, после нескольких часов попыток возможного и невозможного я обнаружил, что IE (в отличие от FF или G.Chrome) поддерживает динамическое создание таблиц с использованием объектов DOM. Использование функции document.write, как я сделал, не является ошибкой, поскольку вам не нужно обновлять атрибуты таблиц после добавления каждой строки. После изучения этого, решение заняло всего несколько минут.

Внутри функции getRow я поставил следующий код:

var content = request.responseText.split(";");

var row = document.createElement("tr");
row.className = content[0];

var cell = document.createElement("td");
cell.innerHTML = content[1];
row.appendChild(cell);

cell = document.createElement("td");
cell.innerHTML = content[2];
row.appendChild(cell);

Пусть это будет уроком для всех, кто попытается сгенерировать свою таблицу, используя простой / ленивый способ :)

Answer 2

Вы можете использовать этот фасад и забыть о проблеме с IE https://github.com/ilinsky/xmlhttprequest или https://github.com/bga/jbasis/blob/master/src/ieXDRToXHR.js