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的人使用。