Question

我使用这个AJAX代码：

    <script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var age = document.getElementById('age').value;
    var wpm = document.getElementById('wpm').value;
    var sex = document.getElementById('sex').value;
    var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
    ajaxRequest.open("GET", "file.php" + queryString, true);
    ajaxRequest.send(null); 
}

//-->
</script>

如何指示AJAX加载？

Answer 1

常见场景是在ajax请求开始时和结束时显示动画gif图像或更改鼠标光标。

Gif更简单。像（我正在使用JQuery语法）：首先：

$("#progressIndicator").show();

在你的onreadystatechange处理程序

中

$("#progressIndicator").hide();

Answer 2

您可以将应用程序（或仅在其中的某些部分）全局显示/隐藏与以下事件绑定：

<Context path="" reloadable="true" docBase="C:\Workspace\project\project-web" workDir="C:\Workspace\project\work" />

然后定义类加载：

$(document).on({
    ajaxStart: function () { $body.addClass("loading"); },
    ajaxStop: function () { $body.removeClass("loading"); }
});

通过这种方式，您不需要为每个ajax调用管理加载效果，并且可以在整个应用程序中保持一致的样式。

Answer 3

如果您使用JQuery，您可以执行以下操作：

$("#progressIndicator").show();

var age = $('#age')[0].value;
var wpm = $('#wpm')[0].value;
var sex = $('#sex')[0].value;
var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;

$.get("file.php" + queryString, function (data) {
    $("ajaxDiv").html(data);
    $("#progressIndicator").hide();
})

您可以看到有关JQuery get方法的更多信息 here

AJAX加载指标

3 个答案: