Question

我在下面的代码中看到一个奇怪的问题。单击链接后，通过xmlHttpRequest接收的内容未在IE8中显示。只有在单击链接后移动鼠标/光标后才会显示。

<html>
   <head>
      <script language="javascript">
         var xmlHttpfunction;

         function ShowHint(str,id,currentid,count)
         {
            for(i = 0; i < count; i++)
            {
               if (i == currentid)
               {
                  cellImg(i,'images/head_on.jpg');
               }
               else
               {
                  cellImg(i,'images/btn_img.jpg');
               }
            }
            xmlHttp = GetXmlHttpObject();

            if (xmlHttp == null)
            {
               alert ("Browser does not support HTTP Request");
               return;
            }

            var url = "myurl.php";
            url = url+"?id="+id;
            xmlHttp.onreadystatechange = stateChanged;
            xmlHttp.open("GET",url,true);
            xmlHttp.send(null);
         }

         function cellImg(idCell, imgName)
         {
            document.getElementById(idCell).style.background = "url(" + imgName + ")";
         }

         function stateChanged()
         {
            if (xmlHttp.readyState === 1)
            {
               document.getElementById("element").innerHTML = "<p align='center'><img src='images/wait.gif'></p>";
            }
            else if (xmlHttp.readyState === 4)
            {
               document.getElementById("element").style.display = "block";
               document.getElementById("element").innerHTML = xmlHttp.responseText;
            }
         }

     </script>
  </head>
  <body>
     <div id="navigation">
        <ul >
           <li id=1 >
              <a href="#" onclick="ShowHint('menu',42,1,18);return false;">
                 Item 1
              </a>
           </li>
           <li id=2 >
              <a href="#" onclick="ShowHint('menu',11,2,18);return false;">
                 Item 2
              </a>
           </li>
           <li id=3 >
              <a href="#" onclick="ShowHint('menu',12,3,18);return false;">
                 Item 3
              </a>
           </li>
        </ul>
     </div>
     <div class="element" id="element">
     </div>
  </body>
</html>

以上适用于Firefox，Safari，Chrome和Opera。但是在IE8上，如果在点击链接后没有光标移动，则不显示内容（尽管它被加载到div id =“element”的innerHTML中）。

我已经尝试通过IE8的脚本调试器（在Tools-＆gt; DeveloperTools中）发出警报和调试，但是找不到导致问题的原因。

有人可以帮我解决这个问题吗？

非常感谢， sgullap

Answer 1

检查ajax调用中的responseText是否以回车符开头。我今天遇到了类似的问题（这是我在google搜索时发现这个问题的方式）并发现我的HTML代码意外地在ajax调用的目标页面中以空行开头。删除该额外行导致innerHTML被正确设置并显示。

我不确定为什么这会导致IE不显示我分配给div的innerHTML，但现在知道要确保避免通过ajax检索到的任何HTML输出顶部的空行！

IE8中不会立即显示AJAX响应

1 个答案: