바닐라 자바스크립트 테스트, JSONPlaceholder, XMLHttpRequest()

JSONPlaceholder

테스트를 위한 가짜 서버 서비스
/posts, /comments, /albums, /photos, /todos, /users 리소스 제공

open()함수 사용해서 데이터 받아오기

const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts"); // HTTP Method, URL 정의
xhr.setRequestHeader("content-type", "application.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); // 응답 상태와 응답 메시지를 출력
    }
};

전체 데이터 중 특정 id에 해당하는 데이터만 가져오고 싶으면
https://jsonplaceholder.typicode.com/posts/:id
만약에 id가 1번인 데이터를 가져오고 싶다면
https://jsonplaceholder.typicode.com/posts/1

데이터 생성, 수정, 삭제

const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts"); // 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===201) {
        // 201 상태코드는 요청이 성공적으로 처리되었으며, 자원이 생성되었음을 나타내는 성공 상태 응답코드
        // 일반적으로 POST 요청에 대한 응답 결과로 사용
        const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수의 JSON 객체로 변환
        console.log(res); // 응답 데이터 출력
    } else {
        // 에러 발생
        console.error(xhr.status, xhr.statusText); // 응답 상태와 응답 메시지를 출력
    }
};

// 아이디가 1인 데이터 수정
// xhr.open("PUT", "https://jsonplaceholder.typicode.com/posts/1");
// 아이디가 1인 데이터 삭제
// xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/1");