AJAX : jQuery ajax api 대 Javascript xhr

Question

tl; dr : 아래의 두 스크립트는 동일하다고 생각합니다. 왜?

이 게시물에 대한 배경 정보를 제공해 드리겠습니다. AJAX 요청을 동적 업로드 페이지를 만드는 이미지 업로드 양식을 작성하려고합니다. HTML5의 File API에 대해 배웠으므로 AJAX 요청에서이 API를 사용하려고합니다. MDN에 좋은 예제를 따라 제 자신의 인스턴스를 만들었습니다. 내 작업 스크립트는 AJAX 요청에 대해 직선 JS를 사용하지만 대신 jQuery를 사용하는 버전을 빌드 해 보았다. 제 질문은 jQuery 버전이 제대로 작동하지 않는 이유는 무엇입니까? 내가 말할 수있는 한 JS xhr 스타일 AJAX에서 jQuery 스타일 AJAX에 이르는 직선 포트이다.

$("form").submit(function(){ 

    var file = $("input:file").get(0).files[0]; 
    var xhr = new XMLHttpRequest(); 
    var fd = new FormData(); 

    xhr.open("POST", "/upload", true); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4 && xhr.status == 200) { 
      alert(xhr.responseText); 
     } 
    }; 
    fd.append('img', file); 
    xhr.send(fd); 

    return false; 

}); 

: 여기

는 작업 자바 스크립트 AJAX 요청입니다 (내 실제적인 요구가 충족되고, 이미 작업 스크립트를 갖고 있기 때문에이 질문의 요점은 jQuery의 AJAX API를 학문적 이해하는 것입니다)

그리고 비 작업의 jQuery 버전 : the documentation에 게시 된

$("form").submit(function(){ 

    var fd = new FormData(); 
    var file = $("input:file").get(0).files[0]; 
    fd.append('img', file); 

    $.post("/upload", fd, function(data){ 
     alert(data); 
    }); 

    return false; 

});   

Answer 1

, $.post은 일반 객체 또는 데이터 인수로 문자열 중 하나를 사용할 수 있습니다. FormData을 사용할 수 없습니다.

데이터
유형 : PlainObject 또는 문자열
요청과 서버로 전송되는 일반 객체 또는 문자열입니다.

Answer 2

이 문자열이 아닌 경우 jQuery를이 $.post (및 기타)에 두 번째 인수에 $.param를 호출합니다. fd은 문자열이 아니지만 $.param의 fd은 유효하지 않습니다. 당신은 원시 fd 값을 사용하려는 경우, 당신은 아약스 설정에서 false에 processData을 설정해야합니다 : http://api.jquery.com/jQuery.ajax/

$.ajax({ 
    ur: "/upload", 
    data: fd, 
    processData: false, 
}).done(function (data) { 
    console.log(data); 
});