AJAX：XMLHttpRequest 中 beforeSend 函数的等效函数是什么答案

【问题标题】：AJAX : What is the equivalent function of beforeSend function in XMLHttpRequestAJAX：XMLHttpRequest 中 beforeSend 函数的等效函数是什么
【发布时间】：2016-09-26 01:23:50
【问题描述】：

$.ajax 中有 beforeSend 函数，但现在我正在尝试使用 XMLHttpRequest，我正在寻找 $.ajax 中的 beforeSend 等效函数。我怎样才能在这里实现它。

这是我的 xhr 代码，

xhr = new XMLHttpRequest();
    var url = '../ajax/ajax_edit/update_ajax_staffUser.php';

    if(file.files.length !== 0){

        if(!check(fileUpload.type)){
            alert("This file format not accepted");
            return false;
        }
        xhr.open('post', url+param, true);
        xhr.setRequestHeader('Content-Type','multipart/form-data');
        xhr.setRequestHeader('X-File-Name', fileUpload.name);
        xhr.setRequestHeader('X-File-Size', fileUpload.size);
        xhr.setRequestHeader('X-File-Type', fileUpload.type);
        xhr.send(fileUpload);
    }else{
        xhr.open('post', url+param, true);
        xhr.setRequestHeader('Content-Type','multipart/form-data');
        xhr.send(fileUpload);
    }


    xhr.onreadystatechange = function(e){
        if(xhr.readyState===4){
            if(xhr.status==200){
                $('.bounce_dim').show();
                setTimeout(function(){
                    $('.trigger_danger_alert_changable_success').show().delay(5000).fadeOut();
                    $('#palitan_ng_text_success').html('User successfully modified');
                    $('#frm_edit_staffUser')[0].reset();
                    $('#modal_staff').modal('hide');
                    $('.bounce_dim').hide();
                },1000);
                getUserStaffTable();
            }
        }
    }

由于用户正在将图像上传到我的网络，因此由于图像太大，我需要在触发调用之前创建一个等待界面。

【问题讨论】：

beforesend 只是一个在发送ajax调用之前执行的函数，没什么特别的？您是否打算摆脱其他依赖于 jQuery 的代码，包括那些动画？不然还有什么意义？
不，我的意思是，当我单击按钮时，它应该首先弹出加载动画，直到图像完全上传。发生的情况是当我单击按钮时，用户将无法识别图片是否仍在上传。此外，我不希望用户在图片仍在上传时在我的页面上进行操作
另外因为，我将动画放在我的其他 $.ajax 代码中的 beforeSend 中。

标签： javascript jquery ajax xmlhttprequest

【解决方案1】：

您只需将 beforeSend() 函数放在 XHR 实例之前即可，如下所示：

beforeSend();
xhr = new XMLHttpRequest();

但是你应该在上面的代码之前定义你的 beforeSend() 函数：

var beforeSend = function(){
    // your code here
}

【讨论】：

在xhr.send(fileUpload) 之前添加beforeSend 会更接近等效。在实例化之前调用似乎不正确。

【解决方案2】：

.beforeSend 只是在运行.send 之前调用该函数，所以只需将您的代码放在该行之前：

xhr.setRequestHeader('Content-Type','multipart/form-data');
xhr.setRequestHeader('X-File-Name', fileUpload.name);
xhr.setRequestHeader('X-File-Size', fileUpload.size);
xhr.setRequestHeader('X-File-Type', fileUpload.type);
beforeSend(); // Put any code to run before sending here
xhr.send(fileUpload);

【讨论】：

这是否意味着我会将我的代码包装到 $.ajax beoreSend 中？
@EchoingThroughoutTelNumara 不，请参阅更新的答案。 beforeSend 实际上只是发送前的任何代码。