XMLHttpRequest не добавляющий заголовок - «X-Requested-With: XMLHttpRequest»

Question

У меня есть вызов ajax, где я использовал jQuery.ajax(), чтобы сделать запрос к действию mvc. Все это прекрасно работало. Однако из-за некоторых форм, имеющих файловый контроль, я изменил его с помощью jQuery.ajax() на использование XMLHttpRequest для его отправки с использованием API файлов HTML5.

С момента внесения этого изменения метод действия 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); 

Этого код был предоставлен после проблемы я имел который Дарина Димитрова обеспечила решение, чтобы я мог отправить входы файлов с помощью AJAX.

Любые идеи, почему этот запрос не отправил заголовок для вызова ajax?

Answer 1

X-Requested-With автоматически добавляется jQuery. Вы также можете легко добавить его с помощью AjaxRequestObject.setRequestHeader(). Docs

Answer 2

У меня были проблемы с обнаружением, если мой запрос был ajax. Так, может быть, этот пример сохранит кому-то две минуты:

var xmlhttp = new XMLHttpRequest(); 
xmlhttp.open('GET', URL, true); // `true` for async call, `false` for sync. 

// The header must be after `.open()`, but before `.send()` 
xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 

xmlhttp.onreadystatechange = function() { 
    // 4th state is the last: 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { ... } 
}; 
xmlhttp.send(); 

Испытано с Flask.

Answer 3

Вы можете переопределить изначально все вызовы методов XMLHttpRequest.open и добавить в него X-Requested-With заголовка, как:

(function() { 

    // @author https://github.com/stopsopa jfdsa78y453cq5hjfd7s877834h4h3 

    if (window.XMLHttpRequest.prototype.onOpen) { 
     return console.log('XMLHttpRequest.onOpen is already defined'); 
    } 

    function over(method, on, off) { 

     var old = window.XMLHttpRequest.prototype[method]; 

     if (!old.old) { 

      var stack = []; 

      window.XMLHttpRequest.prototype[on] = function (fn) { 
       if (typeof fn === 'function') { 
        stack.push(fn); 
       } 
      } 

      window.XMLHttpRequest.prototype[off] = function (fn) { 
       for (var i = 0, l = stack.length ; i < l ; i += 1) { 
        if (stack[i] === fn) { 
         stack.splice(i, 1); 
         break; 
        } 
       } 
      } 

      window.XMLHttpRequest.prototype[method] = function() { 
       var args = Array.prototype.slice.call(arguments); 

       var ret = old.apply(this, args); 

       for (var i = 0, l = stack.length ; i < l ; i += 1) { 
        stack[i].apply(this, args); 
       } 

       return ret; 
      } 

      window.XMLHttpRequest.prototype[method].old = old; 
     } 
    } 

    over('open', 'onOpen', 'offOpen') 

    XMLHttpRequest.prototype.onOpen(function() { 
     this.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
    }); 
}());