formData, XMLHttpRequset, HTTP Content-Disposition

formData

1. form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공

2.  XMLHttpRequest.send() 메서드를 사용하여 쉽게 전송할 수 있다. 인코딩 타입이 "multipart/form-data"로 설정된 경우, form에서 사용하는 것과 동일한 포맷을 사용해야 함.

// 생성자
var data = new FormData();  // 새로운 FormData 객체를 생성

// 메소드
data.append(name, value, filename) // FormData 객체안에 이미 키가 존재하면 그 키에 새로운 값을 추가하고, 키가 없으면 추가합니다.
	(filename은 optional)
data.delete() // FormData 객체로부터 키/밸류 쌍을 삭제합니다.
data.entries() // 이 객체에 담긴 모든 키/밸류 쌍을 순회할 수 있는 iterator를 반환합니다.
data.get() // FormData 객체 내의 값들 중 주어진 키와 연관된 첫번째 값을 반환합니다.
data.getAll() // FormData 객체 내의 값들 중 주어진 키와 연관된 모든 값이 담긴 배열을 반환합니다.
data.has() // FormData 객체에 특정 키가 포함되어 있는지 여부를 나타내는 boolean 을 반환합니다.
data.keys() // 이 객체에 담긴 모든 키/벨류 쌍들의 모든 키들을 순회 할 수 있는 iterator를 반환합니다.
data.set() // FormData 객체 내에 있는 기존 키에 새 값을 설정하거나, 존재하지 않을 경우 키/밸류 쌍을 추가합니다.
data.values() // 이 객체에 포함된 모든 밸류를 통과하는 iterator를 반환합니다.

 

 

XMLHttpRequset

1. 객체는 서버와 상호작용하기 위하여 사용. 전체 페이지의 새로고침없이도 URL 로부터 데이터를 받아올 수 있다. 이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줌. XMLHttpRequest 는 AJAX 프로그래밍에 주로 사용된다.

2.  모든 종류의 데이터를 받아오는데 사용할 수 있고, 또한 HTTP 이외의 프로토콜도 지원합니다(file 과 ftp 포함).

// 생성자
var xhr = new XMLHttpRequest(); // XMLHttpRequest 를 초기화. 다른 모든 메소드 호출이전에 호출되어야함

// 속성
xhr.onreadystatechange // readyState 어트리뷰트가 변경될때마다 호출되는 EventHandler 입니다.
xhr.readyState // 요청의 상태를 unsigned short 로 반환합니다. readonly
xhr.response // Read only 응답 엔티티 바디를 갖는하는 XMLHttpRequest.responseType 의 값에 따라 ArrayBuffer, Blob, Document, JavaScript 객체, 또는 DOMString 을 반환합니다.
xhr.responseText // Read only 요청에 대한 응답을 텍스트로 갖는 DOMString 을 반환합니다. 요청이 성공하지 못했거나 아직 전송되지 않았을 경우 null 을 반환합니다.
xhr.responseType // 응답 타입을 정의하는 열거형 값입니다.
xhr.responseURL // Read only 응답의 연속된 URL 을 반환합니다. URL 이 null 인 경우 빈 문자열을 반환합니다.
xhr.responseXML // Read only 요청에 대한 응답을 갖는 Document 를 반환합니다. 요청이 성공하지 못했거나, 아직 전송되지 않았거나, XML 또는 HTML 로 파싱할 수 없는 경우 null 을 반환합니다.
xhr.status // Read only 요청의 응답 상태를 갖는 unsigned short 를 반환합니다.
xhr.statusText // Read only HTTP 서버에 의해 반환된 응답 문자열을 갖는 DOMString 을 반환합니다. XMLHTTPRequest.status 와는 다르게, 응답 메시지의 전체 텍스트를 갖습니다(예, "200 OK").
xhr.timeout // 요청이 자동으로 종료될때까지 걸린 시간을 밀리초 단위로 나타내는 unsigned long 입니다.

XMLHttpRequestEventTarget.ontimeout // 요청 시간 초과때마다 호출되는 EventHandler 입니다.

xhr.upload // Read only 업로드 과정을 나타내는 XMLHttpRequestUpload 입니다.
xhr.withCredentials // 사이트 간 Access-Control 요청이 쿠키나 인증 헤더와 같은 자격 증명을 사용해야하는지 여부를 나타내는 Boolean 입니다.

// 메소드
xhr.abort() // 이미 전송된 요청을 중지합니다. ★응답시간이 오래되거나 부적절한 응답을받을경우 중단하기 위함!!!! 
xhr.getAllResponseHeaders() // 모든 응답 헤더를 CRLF 로 구분한 문자열로 반환합니다. 응답을 받지 않은 경우 null 입니다.
xhr.getResponseHeader() // 지정한 헤더의 텍스트를 갖는 문자열을 반환합니다. 응답을 아직 받지 못했거나 응답에 헤더가 존재하지 않을 경우 null 입니다.
xhr.open() // 요청을 초기화합니다. 이 메소드는 네이티브 코드로부터의 요청을 초기화하기 위해 JavaScript 코드에 의해 사용됩니다. 대신 openRequest() 를 사용하세요.
xhr.overrideMimeType() // 서버에의해 반환된 MIME 타입을 오버라이드합니다.
xhr.send() // 요청을 보냅니다. 요청이 비동기인 경우(기본값), 이 메소드는 요청이 보내진 즉시 반환합니다.
xhr.setRequestHeader() // HTTP 요청 헤더의 값을 설정합니다. open() 후, send() 전에 setRequestHeader() 를 호출해야합니다.

// 이벤트
abort // 예를 들어 프로그램이 XMLHttpRequest.abort()를 호출해서 요청이 중단되면 발생한다.onabort 속성을 통해서도 가능하다.
error // 요청에 에러가 생기면 발생한다.onerror 속성을 통해서도 가능하다.
load // XMLHttpRequest 처리 과정이 성공적으로 완료되면 발생한다.onload 속성을 통해서도 가능하다.
loadend // 요청이 성공이든 (load 다음) 실패든 (abort 또는 error 다음) 완료되면 발생한다. onloadend 속성을 통해서도 가능하다.
loadstart // 요청이 데이터를 받기 시작하면 발생한다. onloadstart 속성을 통해서도 가능하다.
progress // 요청이 데이터를 받는 동안 주기적으로 발생한다. onprogress 속성을 통해서도 가능하다.

 

HTTP Content-Disposition

1. Disposition이란 기질, 성향, 배치, 배열 이란 뜻

2. HTTP Response Header에 들어가는 Content-Disposition은 HTTP Response Body에 오는 컨텐츠의 기질/성향을 알려주는 속성

3. default 값은 inline으로 web에 전달되는 data라고 생각하면 된다.

4. 특수한 경우는 Content-Disposition에 attachment를 주는 경우로, 이때 filename과 함께 주게 되면 Body에 오는 값을 다운로드 받으라는 뜻이 된다.

5. "Content-disposition: inline"은

브라우저 인식 파일확장자를 가진 파일들에 대해서는 웹브라우저 상에서 바로 파일을 자동으로 보여줄 수 있어서 의미상인 멀티파트 메시지를 표현하는데 있다. 그외의 파일들에 대해서는 "파일 다운로드" 대화상자가 뜨도록 하는 헤더속성이다.

6. "Content-disposition: attachment"은
브라우저 인식 파일확장자를 포함하여 모든 확장자의 파일들에 대해,  다운로드시 무조건 "파일 다운로드" 대화상자가 뜨도록 하는 헤더속성이라 할 수 있다.