javascript - XMLHttpRequest 未添加 header - "X-Requested-With: XMLHttpRequest"

Question

我有一个 ajax 调用，我在其中使用 jQuery.ajax() 向 mvc 操作发出请求。这一切都很好。但是，由于某些表单具有文件控件，我将其从使用 jQuery.ajax() 更改为使用 XMLHttpRequest 以使用 HTML5 文件 API 发送它。

自从进行此更改后，MVC 操作方法不再将其视为 ajax 请求。使用 Fiddler2 我注意到它不再将“X-Requested-With: XMLHttpRequest”添加到请求中，我认为这就是问题所在。

我尝试发送的表单中没有文件输入，只有普通的文本框等，但我试图使方法通用以处理这两种情况。以下是我用来发送 ajax 请求的代码:

// get the edit tender form
var $Form = $Button.closest('form');
var Url = $Form.attr('action');
var AjaxRequestObject = new XMLHttpRequest();
var FormDataToSend = new FormData();

$Form.find(':input').each(function () {
    if ($(this).is('input[type="file"]')) {
        var files = $(this)[0].files;
        if (files.length > 0) {
            FormDataToSend.append(this.name, files[0]);
        }
    } else {
        FormDataToSend.append(this.name, $(this).val());
    }
});

AjaxRequestObject.open('POST', Url, true);
AjaxRequestObject.onreadystatechange = function () {
    if (AjaxRequestObject.readyState == 4) {
        // handle response.
        if (AjaxRequestObject.status == 200) {
            if (!AjaxErrorExists(AjaxRequestObject.responseText, )) {
                alert("success");
                console.log(AjaxRequestObject.responseText);
            }
            else {
                alert('failure');
            }
        }
        else {
            alert('failure');
        }
    }
};

AjaxRequestObject.send(FormDataToSend);

此代码是在我遇到一个问题后提供的，Darin Dimitrov 提供了解决方案，因此我可以通过 ajax 发送文件输入。

知道为什么这个请求不会发送 ajax 调用的 header 吗？

Answer 1

X-Requested-With 由 jQuery 自动添加。您可以使用 AjaxRequestObject.setRequestHeader() 自己轻松添加它。 Docs