for循環和標准Javascript AJAX的問題

Question

我有一些關於for循環和AJAX的問題。 我需要從數據庫中獲取一些信息，因此我將遞增變量傳遞給PHP來獲取信息，然后將其發送回去。 麻煩在於它會立即跳到最大值，從而無法存儲任何信息。

我寧願不使用jQuery。 它可能更強大，但是我發現Javascript更容易理解。

這是JS代碼：

for (var i = 0; i <= 3; i++) {
    var js_var = i;  
    document.getElementById("link").onclick = function () {            
        // ajax start
        var xhr;
        if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers
        else xhr = new ActiveXObject("Microsoft.XMLHTTP");     // for IE

        var url = 'process.php?js_var=' + js_var;
        xhr.open('GET', url, false);
        xhr.onreadystatechange = function () {
            if (xhr.readyState===4 && xhr.status===200) {
                var div = document.getElementById('test1');
                div.innerHTML = xhr.responseText;
                if (js_var == 2) {
                    var rawr = document.getElementById('test2');
                    rawr.innerHTML = xhr.responseText;
                }
            }
        }
        xhr.send();
        // ajax stop
        return false;
    }
};

這是PHP代碼：

<?php
if (isset($_GET['js_var'])) $count = $_GET['js_var'];
else $count = "<br />js_var is not set!";

$con = mysql_connect("xxx","xxxxx","xxxx");

mysql_select_db('computerparty_d', $con);

$get_hs = mysql_query("SELECT * FROM hearthstone");

$spiller_navn = utf8_encode(mysql_result($get_hs,$count,1));


echo "$spiller_navn";
?>

Answer 1

請注意，您正在進行同步AJAX調用，這是不希望的（它在請求期間掛起瀏覽器，但可能不會結束）。 您可能會在某些瀏覽器中遇到此問題，因為您正在調用onreadystatechange，不應將其用於同步請求。

Answer 2

您實際上所做的是在for循環中綁定一個onclick事件，而不發送ajax請求，另一點是，它會立即覆蓋您在上一次迭代中創建的上一個onclick處理程序。

因此，如果要添加多個偵聽器，則應首先考慮使用嵌套函數和閉包來確保每個偵聽器的i變量安全，然后使用addEventListener而不是設置onclick函數。 考慮到以下幾點，您可以改為執行以下操作：

for (var i = 0; i <= 3; i++) {

    var clickFunc = (function (js_var) {
        return function () {
            // ajax start
            var xhr;
            if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers
            else xhr = new ActiveXObject("Microsoft.XMLHTTP"); // for IE

            var url = 'process.php?js_var=' + js_var;
            xhr.open('GET', url, false);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var div = document.getElementById('test1');
                    div.innerHTML = xhr.responseText;
                    if (js_var == 2) {
                        var rawr = document.getElementById('test2');
                        rawr.innerHTML = xhr.responseText;
                    }
                }
            }
            xhr.send();
            // ajax stop
            return false;
        };
    })(i);

    document.getElementById("link").addEventListener("click", clickFunc);
}

Answer 3

看起來您是通過用戶單擊來發出AJAX請求的。

for (var i = 0; i <= 3; i++) {
    var js_var = i;  
    document.getElementById("link").onclick

執行此JS時，它將兩次覆蓋“鏈接”的“ onclick”偵聽器。 第一次分配，第二次被覆蓋，第三次再次被覆蓋。 結果是，當單擊“鏈接”元素時，僅存在最后一個偵聽器，從而導致對最后一個配置發出單個AJAX請求。

HTTP請求是昂貴的（時間），可能值得在一個請求中獲取所有數據，然后使用客戶端JS相應地篩選該數據。

jQuery並不比JS更強大 ，它是帶有一堆包裝函數的JS。 我個人的觀點是，一旦IE9不再適用，jQuery將僅由了解jQuery而不是JS的人使用。