AJAX

AJAX(Asynchronous JavaScript And XML) 는 새로고침을 하지 않고도 url을 요청 할 수 있게 하는 비동기 통신이다.

 

XMLHttpRequest 객체를 사용해서 통신을 할 수 있으며 이벤트가 있으면 이벤트 실행 시 데이터를 요청 할 수 있는 형태가 가능하다.

ajax에는 new XMLHttpRequest 를 이용하는 방법이 있으며, 좀 더 발전된 fetch()를 이용하는 방법 , axios 를 이용하는 방법이 있다.

const xhr = new XMLHttpRequest();

form.addEventListener("submit", (e) => {
    e.preventDefault();
    xhr.open("POST", "http://localhost:3000/ajax");
    xhr.setRequestHeader("Content-type", "application/json");
    const data = { userid: "web7722" };
    xhr.send(JSON.stringify(data));

    xhr.onload = () => {
        // console.log(xhr.readyState, xhr.status, xhr.response);
        if (xhr.readyState === 4 && xhr.status === 200) {
            const response = xhr.response;
            if (response === "true") {
                span.style.color = "red";
                span.innerHTML = "아이디가 중복되었습니다 ";
            } else {
                span.style.color = "green";
                span.innerHTML = "사용 가능한 아이디 입니다";
            }
        }
    };
});

간단한 xhr 요청이다.

xhr.open에 요청메서드, 요청 url 을 입력하고,

*** setRequestHeader 에 타입지정을 해준다 >> 오타나거나 지정을 안해주면 읽지 못한다.

send 에서 요청이 실행된다  >> 타입을 JSON으로 지정해주었기 때문에 JSON 형태로 데이터를 준다.

 

readyState 가 가질 수 있는 모든 값의 목록

• 0 (uninitialized) - (request가 초기화되지 않음)
• 1 (loading) - (서버와의 연결이 성사됨)
• 2 (loaded) - (서버가 request를 받음)
• 3 (interactive) - (request(요청)을 처리하는 중)
• 4 (complete) - (request에 대한 처리가 끝났으며 응답할 준비가 완료됨)

xhr.status 200의 경우 통신이 잘 성공했을 때 나오게 된다.

 

위 코드를 Fetch 형태로 바꾸면 다음과 같다.

 

const xhr = new XMLHttpRequest();

form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const data = { userid: "web7722" };
    const respone = await fetch("http://localhost:3000/ajax",{
    method:"POST",
    header : {
    "Content-type": "application/json"
    }
    body: JSON.stringify(data)
    const json = await respone.json();
    })
    
   
});

fetch는 기본적으로 promise 객체를 반환한다. 그래서 async/await 과 같이 써주면 편하다.

 

첫번째 인자값으로 요청 url 을 보내고, 두번째 인자값으로 req에 들어갈 값들을 지정해준다.

이 때도 마찬가지로 type 지정을 json으로 해줬으면 body에도 json으로 지정을 해주어야 한다.

 

 

 

AXIOS

 

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

const addComment = async (content) => {
    try {
        const res = await axios.post("http://localhost:3000/ajax", { content });
        return res.data;
    } catch (e) {
        return null;
    }
};

axios.post(URL, { body }, {option});

{
  // `url`은 요청에 사용될 서버 URL입니다.
  url: '/user',

  // `method`는 요청을 생성할때 사용되는 메소드입니다.
  method: 'get', // 기본값

  // `url`이 절대값이 아닌 경우 `baseURL`은 URL 앞에 붙습니다.
  // 상대적인 URL을 인스턴스 메서드에 전달하려면 `baseURL`을 설정하는 것은 편리합니다.
  baseURL: 'https://some-domain.com/api',

    return data;
  }],

  // `headers`는 사용자 지정 헤더입니다.
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `data`는 요청 바디로 전송될 데이터입니다.  
  // 'PUT', 'POST', 'PATCH', 'DELETE' 메소드에서만 적용 가능합니다.
  data: {
    firstName: 'Fred'
  },

  // `timeout`은 요청이 시간 초과되기 전의 시간(밀리초)을 지정합니다.
  // 요청이 `timeout`보다 오래 걸리면 요청이 중단됩니다.
  timeout: 1000, // 기본값은 `0` (타임아웃 없음)

}

이 외 AXIOS 요청 config :

요청 Config | Axios Docs (axios-http.com)