脚本加载的Ajax查询只运行一次

时间:2014-04-19 13:37:43

标签: javascript php ajax

我有一个javascript脚本来发送ajax请求。 PHP脚本发回将插入脚本标记的文本。 问题是它只能工作一次。该脚本有效。但是当我在我的按钮上执行另一个clic时,脚本的结果不会改变(实际上,我的PHP脚本会返回一个随机数)。

我的代码如下。我希望我很清楚......

<script type="text/javascript">
    $(function()
        {
        $('#submit').bind('click', function(){request(useData)});
            });

    // fonction pour la requête ajax
    var xhr =null;
    function request(callback)
        {
        if (xhr && xhr.readyState != 0)
            {
            xhr.abort(); // On annule la requête en cours !
            }
        // instanciation (globale) de l'objet pour l'envoi de la requête
        xhr = getXMLHttpRequest();

        xhr.onreadystatechange = function()
            {
            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
                {
                callback(xhr.responseText);
                document.getElementById("loader").style.display = "none";
                }
            else if (xhr.readyState < 4)
                {
                document.getElementById("loader").style.display = "inline";
                }
            };

        // définition et protection des variables
        var title = encodeURIComponent($('#title').val()) ;
        // envoi
        xhr.open('POST', 'generate.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('title=' + title);

        // juste pour voir quand la requête a été executée - a enlever en prod
        $('#test').text(Math.random()+title);
        }

    // fonction pour le traitement des éléments reçus
    function useData(sData)
        {
        $('#scriptGraph').text(sData);
        }

    </script>
</head>
<body>
    <script src="js/highcharts.js"></script>
    <script src="js/modules/exporting.js"></script>

        <input type="text" name="title" id="title">
        <input type="submit" value="Update" id="submit">




    <script id="scriptGraph" type="text/javascript"></script>

根据要求,我将PHP页面的代码添加到getXMLHttpRequest()函数的代码中。 PHP:

<?php
$title = $_POST['title'] ;
echo "alert('".$title.rand()."');" ;
?>

XHR实例的功能:

function getXMLHttpRequest() {
var xhr = null;

if (window.XMLHttpRequest || window.ActiveXObject) {
    if (window.ActiveXObject) {
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    } else {
        xhr = new XMLHttpRequest(); 
    }
} else {
    alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
    return null;
}

return xhr;
}

提前谢谢!

3 个答案:

答案 0 :(得分:1)

我发现了我的问题!我必须评估Ajax查询的结果。

所以我使用Ajax查询结果的代码是:

function useData(sData)
{
eval(sData);
}

我没有尝试,但我认为另一个解决方案是:删除脚本标记并在每次单击按钮时创建一个新标记。

答案 1 :(得分:0)

当然你正在中止AJAX对象

xhr.abort(); //关于annulelarequêteencours!

答案 2 :(得分:0)

if (xhr && xhr.readyState != 0)
            {
            xhr.abort(); // On annule la requête en cours !
            }

See this.

readyState仅在request not initialized时才为空,这是第一次。尝试使用它虽然可能不是这样。