3

有很多类似的帖子，但没有什么很适合我的需要。所以我被迫创建一个帖子。

名称列表显示在 jsp 页面上。当您将鼠标悬停在名称上时，我会执行 ajax 调用以在工具提示弹出窗口中显示该名称的详细信息。

用户将使用 IE8。在 IE8 中完成这个简单的事情大约需要 5 秒，而在 Firefox 和 chrome 中它会立即发生。

我还注意到，随着显示的名称数量增加或减少，响应时间在 IE8 中也是如此。

如何在 IE8 中让它更快？

jsp页面

<td onmouseover ="showDetails('${origin }')">
    <a href="#"><c:out value="${origin}"></c:out><span id="info"></span></a> 
</td>

javascript函数

function showDetails(stop){
    var xmlHttpRequest; 
    if(window.XMLHttpRequest){
        xmlHttpRequest = new XMLHttpRequest();
    }else{
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttpRequest.onreadystatechange=function(){
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            document.getElementById("info").innerHTML = xmlHttpRequest.responseText;
        }
    }
    xmlHttpRequest.open("GET", "showStopsInfoPopup.do?stop="+stop, true);
    xmlHttpRequest.send();
}
4

3 回答 3

4

尝试这个。

function showDetails(stop){
    var t1 = new Date().getTime();
    var xmlHttpRequest; 
    if(window.XMLHttpRequest){
        xmlHttpRequest = new XMLHttpRequest();
    }else{
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttpRequest.onreadystatechange=function(){
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            alert("Call took " + (new Date().getTime() - t1) + " milliseconds");
            document.getElementById("info").innerHTML = xmlHttpRequest.responseText;
        }
    }
    xmlHttpRequest.open("GET", "showStopsInfoPopup.do?stop="+stop, true);
    xmlHttpRequest.send();
}

您可能会看到调用同样快，但在 IE8 中响应的后续呈现速度较慢。

如果您确认这一点，那么问题就是关于 responseText 中的内容。

于 2012-10-26T17:02:42.973 回答
2

反而：

xmlHttpRequest.onreadystatechange=function(){
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        alert("Call took " + new Date().getTime() - t1 + " milliseconds");
        document.getElementById("info").innerHTML = xmlHttpRequest.responseText;
    }
}
xmlHttpRequest.open("GET", "showStopsInfoPopup.do?stop="+stop, true);
xmlHttpRequest.send();

尝试这个：

xmlHttpRequest.open("GET", "showStopsInfoPopup.do?stop="+stop, true);
xmlHttpRequest.onreadystatechange=function(){
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        alert("Call took " + new Date().getTime() - t1 + " milliseconds");
        document.getElementById("info").innerHTML = xmlHttpRequest.responseText;
    }
}
xmlHttpRequest.send(null);

修复新日期

在您的代码中缺少括号（请记住分开Mathematics）Strings。尝试：

xmlHttpRequest.open("GET", "showStopsInfoPopup.do?stop="+stop, true);
xmlHttpRequest.onreadystatechange=function(){
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        alert("Call took " + (new Date().getTime() - t1) + " milliseconds");
        document.getElementById("info").innerHTML = xmlHttpRequest.responseText;
    }
}
xmlHttpRequest.send(null);

测试 Ajax 请求：

<div id="info"></div>
<script>var xhr, t1;
if(window.ActiveXObject){
    try { xhr=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){
        try { xhr=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){}
    }
} else if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
}

xhr.open("GET", "teste.php", true);

t1 = new Date().getTime();//I start the timer that point to prevent the previous functions affect the end result

xhr.onreadystatechange=function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        document.getElementById("info").innerHTML = "Call took " + (new Date().getTime() - t1) + " milliseconds";
    }
}
xhr.send(null);
</script>

php (teste.php):

<?php
sleep(5);
echo 'ok';
?>

结果：

  • IE8：5004 毫秒

  • Chorme：5005 毫秒

  • 火狐：5014 毫秒

  • IE7：5023 毫秒

  • IE6：5053 毫秒

经过测试，得出的结论可能是服务器端的某些东西，更准确地说是在您的 PHP 中。

于 2012-10-26T17:20:00.420 回答
1

如果你想使用 jquery：

function showDetails(stop) {
  $('#info').load("showStopsInfoPopup.do?stop=" + stop);
}
于 2012-10-26T17:03:57.363 回答