XMLHttpRequest nicht hinzufügen Header - "X-Requested-Mit: XMLHttpRequest"

Question

Ich habe einen Ajax-Aufruf, wo ich jQuery.ajax() verwendet, um eine Anfrage an eine MVC-Aktion. Das alles hat gut funktioniert. Aufgrund einiger Formulare, die eine Dateikontrolle haben, änderte ich sie jedoch von jQuery.ajax() zu der Verwendung von XMLHttpRequest, um sie über die HTML5-Datei-API zu senden.

Seit dieser Änderung wird die MVC-Aktionsmethode nicht mehr als Ajax-Anforderung angezeigt. Mit Fiddler2 habe ich festgestellt, dass es die Anforderung "X-Requested-With: XMLHttpRequest" nicht mehr hinzufügt und ich nehme an, dies ist das Problem.

Das Formular, das ich senden möchte, hat keine Dateieingabe, nur normale Textfelder usw., aber ich habe versucht, die Methode generisch zu halten, um beide zu behandeln. Im Folgenden ist der Code, den ich mit der Ajax-Anforderung senden:

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

Dieser Code wurde nach einem Problem zur Verfügung gestellt hatte ich die Darin Dimitrov die Lösung bereitgestellt, so konnte ich die Datei-Eingänge von Ajax senden.

Irgendwelche Ideen, warum diese Anfrage nicht den Header für einen Ajax-Aufruf senden würde?

Answer 1

X-Requested-With wird automatisch von jQuery hinzugefügt. Sie können es genauso einfach selbst hinzufügen mit AjaxRequestObject.setRequestHeader(). Docs

Answer 2

Ich hatte Probleme mit der Erkennung, ob meine Anfrage ajax war. Also, vielleicht wird diese Probe jemand spart eine Minute oder zwei:

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

Getestet mit Flask.

Answer 3

können Sie außer Kraft setzen nativ alle XMLHttpRequest.open Methodenaufrufe und fügen Sie in es X-Requested-With-Header wie:

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