XMLHttpRequest

XMLHttpRequest(XHR)

서버와 통신을 하도록 하는 객체

 

1. 객체는 서버와 상호작용하기 위해 사용

2. 전체 페이지를 새로고침하지 않아도 URL을 통해 데이터를 전송하거나 받아올 수 있음

3. XML 데이터 통신 x, 모든 종류의 데이터 받아올 수 있음

4. 객체는 브라우저에서 제공하는 API임. node.js환경 x

 

 

Ajax

동적으로 서버에서 데이터를 주고받는 기술

 

 

JSON

오브젝트를 보고 만든 데이터 포맷

텍스트를 기반으로 하여 파일이 가벼움

데이터를 직렬화하여 전송할 때 쓰이는 파일

프로그램 언어와 플랫폼에 상관없이 사용가능함

모바일에서도 서버와 전송시 사용됨

 

 

JSON.stringify(obj)

자바스크립트 object를 문자형태로 직렬화

 

JSON.parse(json)

json 타입을 자바스크립트 object 형태로 변환 

 

 

 

 

HTTP 통신은 기본적으로 요청(req)과 응답(resp)로 나눠짐

 

↓ HTTP 구조 ↓

 

요청라인

헤더

공백

바디

 

 

 

객체 생성

(지역변수로 생성)

let xhr = new XMLHttpRequest();

 

 

 

요청 전송

서버 요청 보내기 위해 HTTP Method, 요청 URL을 정의

 

XHR의 내장함수 open() 

xhr.open("get/post/put/delete", "갔다올 url","비동기여부 true(비동기)/false(동기)");

xhr.open('GET','/posts');

 

매개변수로 HTTP method, url정의, 비동기 여부(기본값은 true) 

 

get - 리소스 요청 (? 쿼리)

post - 리소스 생성(post만 body에 담을 수 있음)

put - 리소스 수정

patch - 리소스 일부 수정

delete - 리소스 삭제

 

 

 

클라이언트에서 서버로 HTTP 요청하기 전에 맞는 헤더값 설정

(client에서 'multipart로 보낼게용'을 설정하면, was에서도 'multipart로 받을게용'을 설정)

 

setRequestHeader()함수를 통해 헤더값 설정가능

요청할 때 서버로 전송하는 데이터의 타입을 선언하기 위한 용도로 많이 쓰임

헤더값 중 content-type에 해당

 

content-type은 서버로 전송할 데이터의 MINE 타입 정보를 설정(크게 3가지로 나눠짐)

MINE 타입	content-type 값	목적
application	application/json	json 데이터 전송
text	text/plain	텍스트 데이터 전송
multipart	multipart/from-data	파일 전송

 

 

	xhr.setRequestHeader('content-type', 'application/json');

 

 

open()함수와 setRequestHeader() 함수로 요청에 필요한 정의가 끝나면 send() 함수를 통해 요청을 보냄

 

xhr.send("get이 아닐때만 보낼 내용물");

 

서버로 데이터 전송할 게 있으면 send() 매개 변수로 전달 → reuqest의 body

 

HTTP 요청방법이 get인 경우에는 send() 함수 매개변수로 전달해도 실제로 전송 x

 

 

 

 

HTTP Method	가상서버에서 불러왔을 때	응답상태
get	가상서버에서 전체 객체 요소들을 다 불러옴	성공응답상태 200
post	가상서버에서 한개만 들고옴 101	성공응답상태 201
put	url 뒤에 수정할 객체 번호를 적어줘야함	성공응답상태 200
delete	put과 같이 뒤에 삭제할 번호 적어줘야함	성공응답상태 200

 

HTTP 응답상태 코드 status code(200~500) 200번대 ok

400번대 클라이언트 요청 잘못했을 때 500번대 서버에서 에러발생

403: 허가금지

404: not found

 

 

 

 

XHR readyState

0 (uninitialized) - 객체만 생성(open 메서드가 호출되지 않음), request가 초기화되지 않음

1 (loading) - open 메서드 호출, 서버와의 연결이 성사됨

2 (loaded) - send 메서드 호출, status 헤더가 도착하지 않은 상태. 서버가 request를 받음

3 (interactive) - 데이터의 일부를 받은 상태. request를 처리하는 중

4 (complete) - 데이터 전부 받은 상태. request에 대한 처리가 끝났으며 응답할 준비가 완료됨

 

 

ajax 기본 예시

let xhr = new XMLHttpRequest();
xhr.open("get", "/ajax/data.csv", true);
xhr.onreadystatechange = function () { 
    if (xhr.readyState == 4 && xhr.status == 200) {
    	console.log(xhr.responseText); 
    }
}
xhr.send();

---

put

	const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
        xhr.open("PUT", "https://jsonplaceholder.typicode.com/posts/1");  //POST사용하면 id값 101나옴 / 지금처럼 사용하게되면 id값 1나옴
        //HTTP Method, url정의(가상서버 이용)
        xhr.setRequestHeader("content-type", "application/json; charset=UTF-8"); // 헤더값 중 content-type 정의
        xhr.send(JSON.stringify({title:"foo", body:"bar", userId:1})); //문자열로 요청 전송

        xhr.onload = () => {
            if(xhr.status === 200) {
                //PUT 요청이 정상적으로 완료되면 200
                const res = JSON.parse(xhr.response); //응답 데이터를 JSON.parse 함수의 JSON 객체로 변경
                console.log(res); //응답데이터 출력
            } else {
                //에러발생
                console.error(xhr.status, xhr.statusText); //응답상태와 응답메시지를 출력
            }
        }

 

 

 

delete

	const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
        xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/10"); //HTTP Method, URL정의
        xhr.setRequestHeader("content-type", "application/json; charset=UTF-8"); // 헤더 값 중 content-type 정의
        xhr.send(); //요청전송

        xhr.onload = () => {
            if(xhr.status === 200) {
                // DELETE 요청이 정상적으로 완료되면 200
                const res = JSON.parse(xhr.response); //응답 데이터를 JSON.parse 함수의 JSON 객체로 변경
                console.log(res);
            } else {
                //에러발생
                console.error(xhr.status, xhr.statusText); // 응답상태와 응답메시지를 출력
            }
        }

 

 

 

get

	const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
        xhr.open("GET", "https://jsonplaceholder.typicode.com/posts"); //HTTP Method, URL 정의
        //1번 요소만 가지고 오고싶으면 "https://jsonplaceholder.typicode.com/posts/1" id는 끝에 :id
        xhr.setRequestHeader("content-type", "applicaton/json"); //헤더값 중 content-type 정의
        xhr.send(); //요청 전송

        xhr.onload = () => {
            if (xhr.status === 200) {
                //정상적으로 응답되면 status가 200
                const res = JSON.parse(xhr.response); //응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
                console.log(res); // 100개의 데이터를 받아옴
            } else {
                //에러 발생
                console.error(xhr.status, xhr.statusText); //응답상태와 응답메시지를 출력
            }
        }