Javascript Ajax loader gif無法正常運行

Question

我正在嘗試使用XMLHttpRequest創建一個Ajax加載器gif。

如果我在輸入中鍵入某物，則會看到一個列表，其中包含不同的單詞，這是您在搜索框中鍵入內容時經常在搜索引擎中看到的技術。 但是我也看到了Ajax加載程序，即使我刪除了文本，它也保持加載狀態。 那不是我想要的。

我做錯了什么？

HTML：

<input type="text" name="input" id="input"  />

    <div id='loading' style='display: none'><img src="gifs/ajax-loader.gif" title="Loading" /></div>

    <div id="result"></div>

Javascript：

var input = document.getElementById("input");

input.addEventListener("keyup", function () {

    var loader = document.getElementById("loading").style.display = "block";

    var request = new XMLHttpRequest();
    request.open("GET", "ajaxtest.php?data=" + input.value, true);
    request.send();
    request.onreadystatechange = function () {

        if (request.readyState === 4) {
            //loader.src = "gifs/ajax-loader.gif";

            document.getElementById("result").innerHTML = request.responseText;

        }
        if (document.getElementById("input").value === "") {
            document.getElementById("result").innerHTML = "";

        }
    };
    loader.style.display = "none";
});

Answer 1

首先添加一個事件，以獲取更好的輸入值：

input.addEventListener("keyup change", function () {

您可以使用一些jQuery代碼：

$("#loading").hide();
........
if (request.readyState === 4) {
//replace loader.src = "gifs/ajax-loader.gif"; with...
                $("#loading").show();

                document.getElementById("result").innerHTML = request.responseText;

            }
            if (document.getElementById("#input").value === "") {
                document.getElementById("result").innerHTML = "";
           //new code
               $("#loading").hide();
            }
        };
      //replace  loader.style.display = "none"; with ...
        $("#loading").hide();  
    });