Ajax无法与Internet Explorer一起正常运行

时间:2012-05-06 06:52:47

标签: php javascript ajax

我目前正在开发一个电子商务购物网站,其中不同的产品需要评级。我正在使用星级评分脚本。

一切正常,但产品应根据访问者的IP进行一次评级,一旦访问者点击一颗星(五颗星中),所有星星都应被禁用,以便同一产品的重复评级与可以防止相同的IP(我也使用服务端验证),并且根据数据库中的新值的平均评级应该由相同的星号(刚被禁用)指示。

它在Firefox上运行完全没有问题。当访问者点击星号时,新值将传递给数据库(使用Ajax)并根据新值计算并显示平均评级,但Internet Explorer无法使用Ajax从数据库中检索新值。

我只是用非常简单的代码演示了这个问题,如下所示。

以下是Temp.php文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" language="javascript">
    var xmlhttp;        
    function ajax()
    {
        if(window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp = new ActivexObject("Microsoft.XMLHTTP");
        }
    }

    function loadStars(prod_id)
    {
        ajax();

        xmlhttp.onreadystatechange=function()
        {           
            if(xmlhttp.readyState==4 && xmlhttp.status==200)
            {                               
                document.getElementById("ajax_response").innerHTML=xmlhttp.responseText;
                var rating= document.getElementById("rating_value").value;              
                alert(rating);   //Rating value of hidden field from the ajax response is alered.               
            }
        }

        var queryString="Temp1.php?prod_id="+prod_id;
        xmlhttp.open("GET", queryString, true);
        xmlhttp.send();             
    }
</script>
</head>

<body onload="loadStars(11);">
    <span id="ajax_response"></span>
</body>
</html>

以下是Temp1.php


<?php
    include_once("../Connection.php");  
    $con=new Connection();
    $con->get_connection(); 

    if(isset($_GET['prod_id']))
    {           
        $result=mysql_query("select rating_num from rating where prod_id=".$_GET['prod_id']."");
        $rating=mysql_result($result, 'rating_num');        
        echo "<input type='hidden' id='rating_value' name='rating_value' value='$rating'/>";                                                                    
    }
?>

两个文件中的代码都与之无关。 js函数loadStars(prod_id)onload事件(查看body标签)上调用,该事件实际调用Temp1.php的Ajax请求,该rating_num从数据库中检索rating_value并简单地存储到名为Temp.php的隐藏字段中,最终使用alert(rating);

rating_num文件上收到警报

实际问题是在数据库中更改{{1}}的值时,Firefox显示更新的值,这是必不可少的但是Internet Explorer(8)仍然显示旧值甚至虽然页面被刷新并一次又一次地重新加载。

应该是什么原因?有没有解决这个问题的方法?希望你能理解我的意思。

1 个答案:

答案 0 :(得分:6)

Internet Explorer有时会使用缓存做一些有趣的事情。与其他浏览器相比,它往往采用更加强烈的缓存方法。当我们通常访问相同的资源两次,三次或更多时,缓存是一件好事。在静态内容的情况下,我们实际上希望浏览器足够智能,不要求它已经检索过的数据,因为这样可以节省时间和带宽。

然而,AJAX请求的不同之处在于它们通常是动态的。在某个时刻提出的相同请求当然可能在另一个时刻产生完全不同的结果。因此,我们通常不希望缓存AJAX请求。

然而,当涉及到AJAX请求时,IE的强烈缓存成为一个问题。浏览器处理一个AJAX请求,就像请求静态,不变的图像一样,它从该缓存中提取该请求的先前结果,就好像什么都没有改变一样。

这当然不是您希望Internet Explorer执行的操作。因此,您可以用来强制IE提取新数据的最快最简单的技术是每次对URL进行一点修改。

幸运的是,时间是不断向前发展的东西,从本质上说,它保证是独一无二的。以下是如何避免此问题:

var queryString="Temp1.php?prod_id="+prod_id + "&t=" + new Date().getTime();

通过将纪元时间附加到查询字符串的末尾,我们确保URL始终是唯一的,确保浏览器始终从服务器获取新鲜内容。

我在所有的AJAX请求中使用这种技术,并发现它非常有价值。