XMLHttpRequest no agrega el encabezado - "X-Requerido-Con: XMLHttpRequest"

Question

Tengo una llamada ajax donde utilicé jQuery.ajax() para realizar una solicitud a una acción mvc. Todo esto funcionó bien. Sin embargo, debido a que algunas formas tienen un control de archivos, lo cambié de jQuery.ajax() a usar XMLHttpRequest para enviarlo usando la API de archivos HTML5.

Dado que hacer esto cambia el método de acción MVC ya no lo ve como una solicitud de AJAX. Utilizando Fiddler2 noté que ya no agrega el "X-Requerido-Con: XMLHttpRequest" a la solicitud y asumo que este es el problema.

El formulario que intento enviar no tiene entrada de archivo, solo cuadros de texto normales, etc., pero estaba tratando de mantener el método genérico para tratar con ambos. El siguiente es el código que estoy utilizando para enviar la petición 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); 

Este código fue proporcionada después de un problema que tuve, que Darin Dimitrov proporciona la solución a, por lo que podría enviar las entradas del archivo de ajax.

¿Alguna idea de por qué esta solicitud no enviaría el encabezado para una llamada ajax?

Answer 1

X-Requested-With ha sido añadido automáticamente por jQuery. Puede agregarlo tan fácilmente con AjaxRequestObject.setRequestHeader(). Docs

Answer 2

Estaba teniendo problemas para detectar si mi pedido era ajax. Así, tal vez esta muestra va a salvar a alguien de un minuto o dos:

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(); 

probado con Flask.

Answer 3

Puede anular de forma nativa todas las llamadas a métodos XMLHttpRequest.open y añadir en él solicitada-X-Con cabecera como:

(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'); 
    }); 
}());