XMLHttpRequestはヘッダーを追加しません - "X-Requested-With：XMLHttpRequest"

Question

私はjvery.ajax（）を使用してmvcアクションを要求するajaxコールを持っています。これはすべてうまくいきました。しかし、ファイルコントロールを持ついくつかのフォームのために、私はjQuery.ajax（）を使用してXMLHttpRequestを使用してHTML5 File 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); 

このコードはダーリンディミトロフが解決策を提供し、私が持っていた問題で、以下の提供されたので、私は、Ajaxによって、ファイルの入力を送信することができます。

このリクエストがajaxコールのヘッダーを送信しない理由は何ですか？

Answer 1

X-Requested-WithがjQueryによって自動的に追加されます。 AjaxRequestObject.setRequestHeader()で簡単に追加できます。 Docs

Answer 2

私のリクエストがajaxであるかどうかを検出する際に問題が発生しました。 Flaskでテスト

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

：だから、多分このサンプルは、誰か1,2分が保存されます。

Answer 3

あなたは、要求されたX-と同じようにヘッダネイティブすべてXMLHttpRequest.openメソッド呼び出しを無効にし、それに追加することができます。私はそれを知らなかった

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