腳本加載的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查詢只運行一次

回答

相關問題