[Ajax] Ajax가 무엇일까?

Ajax 란?

Asynchronous JavaScript And XML, 서버와 비동기적으로 데이터 주고 받는 자바스크립트 기술

Ajax 이해에 필요한 사전 지식

서버란 무엇인지에 대해 이해하고 있어야 한다. 서버란, 데이터를 요구하면 데이터를 보내주는 프로그램이다.
ex) 네이버 웹툰 서버 : 유저가 웹툰을 달라고 요구하면 웹툰을 보내주는 프로그램이다.

GET 요청

서버한테 데이터를 달라고 할 때는 정해진 방법이 있다.
1. 원하는 데이터 URL
2. 그 URK로 GET 요청

example

1. 주소창에서 바로 GET 요청
2. 버튼으로 GET 요청 (form tag)
   → 전부 브라우저가 새로고침 된다. 이게 싫다면 ajax 방법을 사용하면 된다.
3. ajax : 새로고침 없이 서버에게 GET요청하는 쪼그마한 JS 코드이다.
   • 장점 : 새로고침이 없으니까 웹페이지 전환이 부드러워짐

Ajax 요청 방식

1. 옛날 JS 방식 (Using XMLHttpRequest)

• 길고 복잡해서 요새 잘 쓰이진 않는다.

function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

2. 요즘 JS 방식 (Using Fetch)

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

• fetch 라는 기본 함수에 url 을 적으면 get 요청을 날려준다. 갖고 온 데이터를 출력하고 싶다면 then 함수를 이용하여 콜백함수를 집어넣는다.
• 콜백함수 안에 있는 파라미터가 실제 수신한 데이터라고 보면 된다. 파싱을 하고 싶다면 파싱을 할 수 있고, 파싱한 결과를 출력하고 싶다면 다음의 방식을 사용하면 된다.
• 여기서 에러처리를 하고 싶다면 .catch를 사용하면 된다. 하지만 정확히 에러를 캐치하고 싶다면 if 문을 사용해서 처리해준다.

fetch('http://example.com/movies.json')
  .then(function(response) {
  	if(!response.ok) {
      throw new Error('400 아니면 500 에러남')
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  })
  .catch(() => {
    console.log('에러남')
  })

• then 함수를 2개를 붙이는 게 싫다면 async await 문법을 사용해도 된다.

3. 외부 라이브러리 방식

• 제이쿼리를 사용한다고 하면 안에 ajax() 함수가 기본적으로 있다. $.ajax()
• 리액트나 뷰에서는 axios 설치해서 많이 사용하고 있다.

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }

CORS Error

ajax 요청 시 CORS 관련 에러를 자주 보게 된다. naver.com -> kakao.com 으로 ajax 요청이 불가능하다. 보안 이슈 중 하나이다.

이 기능을 끄고 싶을 때는 헤더에
Access-Control-Allow-Origin : "*" 를 추가하거나 CORS 정책 관련 기능을 끄면 된다.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
https://www.youtube.com/watch?v=nKD1atl6cAw&t=11s
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
https://tuhbm.github.io/2019/03/21/axios/
https://github.com/axios/axios