[JavaScript] Ajax 개념 정리

서버란?

- 유저가 데이터를 달라고 요청하면 데이터를 보내 주는 간단한 프로그램

- 서버 데이터를 요청할 때는

데이터를 보내 준다.

- GET 요청 : 서버에 있던 데이터를 읽고 싶을 때 주로 사용

- POST 요청 : 서버로 데이터를 보내고 싶을 때 사용 (서버는 유저 데이터를 DB에 저장해 주는 역할도 함)

- PUT, DELETE 요청도 있음

GET 요청을 날리는 가장 쉬운 방법은 브라우저 주소창이다. 주소창에 URL 적으면 그곳으로 GET 요청을 날려 준다.

POST 요청을 날리는 방법은 <form action="요청할 url" method="post"> 태그를 이용하면 된다. 폼이 전송되었을 때 POST 요청을 날려 준다.

그런데 이렇게 GET, POST 요청을 날렸을 때의 단점은 브라우저가 새로고침 된다는 것이다.

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능

$.get('URL');

- $.get()라는 함수를 쓰고 안에 url을 기입하면 된다.

$.get('URL').done(function(data){
  console.log(data)
});

- .done 또는 .then을 뒤에 붙여서 콜백함수를 넣고 파라미터를 하나 만들면, 그 파라미터에 가지고 온 데이터를 넣을 수 있다.

$.post('url', {name : 'kim'})

- 서버로 데이터를 보낼 수 있는 POST 요청을 날리고 싶으면 이렇게 하면 된다. url을 적고 뒤에 바로 서버에 보낼 데이터를 적으면 된다.

$.get('url')
  .done(function(data){
    console.log(data)
  })
  .fail(function(error){
    console.log('실패')
  });

- ajax 요청 성공시 .done 안에 있는 코드를 실행해 준다.

- ajax 요청 실패시 .fail 안에 있는 코드를 실행해 준다.

- error를 출력해 보면 에러 관련 정보를 출력해 준다. 그걸 보고 디버깅하면 된다. 예를 들어 에러 코드가 404라면 url이 잘못 되었다는 뜻이다.

- done/fail 대신 then/catch를 써도 된다.

fetch('URL')
  .then(res => res.json())
  .then(function(data){
    console.log(data)
  })
  .catch(function(error){
    console.log('실패')
  });

- fetch 함수는 Edge 브라우저 이상에서만 동작한다.

.then(res => res.json())이 필요한 이유는?

- 서버와 데이터를 주고받을 때는 문자만 주고받을 수 있다. array, object는 전송이 불가능하다.

object, array 데이터를 보내고 싶으면 따옴표를 쳐서 문차러머 만들어야 한다. ( {price : 5000} → "{"price" : 5000"}" )

이렇게 따옴표 친 objec, array 자료를 JSON이라고 하는데, JSON은 문자로 인식하기 때문에 서버와 데이터 주고받기가 가능하다.

- jQuery의 $.get()은 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔 준다.

- 기본함수 fetch()는 JSON으로 자료가 도착하면 알아서 array/objcet로 자료를 바꿔 주지 않기 때문에 fetch()로 가져온 결과를 array/object로 바꾸고 싶으면 res.json() 코드를 한 줄 추가해야 한다.

* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.