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

我有一个JavaScript脚本来发送ajax请求。 PHP脚本发回将被插入到脚本标记中的文本。问题是它只能使用一次。该脚本起作用。但是当我在按钮上做另一个clic时，脚本的结果不会改变（实际上，我的PHP脚本返回一个随机数）。脚本加载的Ajax查询只运行一次

我的代码在下面。我希望我清楚......

<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; 
}

预先感谢您！

来源

2014-04-19 DescampsAu

额外信息：Google Chrome控制台显示每次点击按钮时发送请求。脚本标记问题如此。也许浏览器不考虑标记中的变化？ – DescampsAu

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

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

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

我没有尝试，但我认为另一个解决办法是：删除脚本标记和创建一个新的每次按键被点击。

来源

2014-04-19 14:21:07 DescampsAu

它当然你中止AJAX对象

xhr.abort(); //在ANNULE拉requête恩赛道！

来源

2014-04-19 13:40:09 underscore

我明白了！谢谢。我补充说，以防止多个请求发送。但是，如果我删除这部分代码，结果是一样的。 – DescampsAu

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

See this.

readyState仅空时request not initialized，其是仅在第一次。尽管可能并非如此，但试着玩吧。

来源

2014-04-19 13:46:08 user3461434

谢谢！我尝试通过扩展条件“if（xhr &&（xhr.readyState！= 0 || shr.readyState！= 4））”但没有任何变化。 – DescampsAu

这是因为大部分时间你的状态都是'4'，因为其他状态持续很短的时间。如果你想阻止多个请求，你应该写一个子句，如果在3秒左右的时间内有3个以上的请求，那么这个子句会中止这个函数。 – user3461434

我会找到另一个系统来防止多个请求（禁用按钮）。但是如果我删除了这部分代码，它仍然不起作用。 – DescampsAu

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

回答

相关问题