javascript - chrome中ajax同步调用显示加载的方式是什么

Question

在ajax调用中使用async:false时，有没有办法在chrome中显示加载。对于 settimeout，当在 settimeout 函数中使用多个 ajax 同步调用时，会出现很多问题。在 Firefox 中加载无需设置超时即可正常运行，但在 chrome 中则不行。

请建议任何其他方式来显示加载。

代码:

 function setDetails() {
            debugger;
            jQuery('loading').show();
            ajaxindicatorstart('loading data.. please wait..');

           setTimeout(function () {

            var serverUrl = location.protocol + "//" + location.host;
            var oDataUri = serverUrl + "/XRMServices/2011/OrganizationData.svc/new_pasm_tblSet";
            debugger;
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                url: oDataUri,
                async: false,
                beforeSend: function (XMLHttpRequest) {
                    ajaxindicatorstart('loading data.. please wait..');
                    XMLHttpRequest.setRequestHeader("Accept", "application/json");
                },
                success: function (data, textStatus, XmlHttpRequest) {
                    debugger;
                    var isDomainExists = false;
                    if (data == null || data.d.results.length <= 0 ) {
                        debugger;
                        //other code
                        oDataUri1 = serverUrl + "/XRMServices/2011/OrganizationData.svc/new_pasm_tblSet";
                        debugger;
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            datatype: "json",
                            url: oDataUri1,
                            data: jsonPO,
                            async: false,
                            beforeSend: function (XMLHttpRequest) {
                                XMLHttpRequest.setRequestHeader("Accept", "application/json");
                            },
                            success: function (data, textStatus, XmlHttpRequest) {
                                debugger;
                                checkInCRM();
                                ajaxindicatorstop();
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert("Error while store license data: " + errorThrown);
                            }
                        });

                    }
                    else {
                        if (keyDetail != data.d.results[0].new_var)
                        {
                            oDataUri1 = serverUrl + "/XRMServices/2011/OrganizationData.svc/new_pasm_tblSet(guid'" + id + "')";
                            debugger;
                            $.ajax({
                                type: "POST",
                                contentType: "application/json; charset=utf-8",
                                datatype: "json",
                                url: oDataUri1,
                                data: jsonPO,
                                async: false,
                                beforeSend: function (XMLHttpRequest) {
                                    XMLHttpRequest.setRequestHeader("Accept", "application/json");
                                    XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
                                },
                                success: function (data, textStatus, XmlHttpRequest) {

                                    checkInCRM();
                                    ajaxindicatorstop();
                                },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    alert("Error while store license data: " + errorThrown);
                                }
                            });
                        }
                        else {}
                    }
                    ajaxindicatorstop();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("Error while getting license data: " + errorThrown);
                    onclickflag = false;
                }
            });
            ajaxindicatorstop();
            }, 10);
        }

function ajaxindicatorstart(text) {
            if (jQuery('body').find('#resultLoading').attr('id') != 'resultLoading') {
                jQuery('body').append('<div id="resultLoading" style="display:none"><div><img src="new_loading.gif"><div>' + text + '</div></div><div class="bg"></div></div>');
            }
            //
            jQuery('#resultLoading').css({
                'width': '100%',
                'height': '100%',
                'position': 'fixed',
                'z-index': '10000000',
                'top': '0',
                'left': '0',
                'right': '0',
                'bottom': '0',
                'margin': 'auto'
            });

            jQuery('#resultLoading .bg').css({
                'background': '#000000',
                'opacity': '0.7',
                'width': '100%',
                'height': '100%',
                'position': 'absolute',
                'top': '0'
            });

            jQuery('#resultLoading>div:first').css({
                'width': '250px',
                'height': '75px',
                'text-align': 'center',
                'position': 'fixed',
                'top': '0',
                'left': '0',
                'right': '0',
                'bottom': '0',
                'margin': 'auto',
                'font-size': '16px',
                'z-index': '10',
                'color': '#ffffff'

            });

            jQuery('#resultLoading .bg').height('100%');
            jQuery('#resultLoading').fadeIn(300);
            jQuery('body').css('cursor', 'wait');
        }
        function ajaxindicatorstop() {
            jQuery('#resultLoading .bg').height('100%');
            jQuery('#resultLoading').fadeOut(300);
            jQuery('body').css('cursor', 'default');
        }

Answer 1

@Haresh Vidja 答案代码很完美......唯一的问题是加载器图像/div 不会在 beforeSend 内自动显示。解决办法如下:

        beforeSend: function () {
            $('#resultLoading').show();
            ajaxindicatorstart('loading data.. please wait..');
            //XMLHttpRequest.setRequestHeader("Accept", "application/json");
        }

在 beforeSend 中，当发送 ajax 请求时，加载程序会加载，直到达到时间成功并触发 ajaxindicatorstop()成功。