[javascript] 21. Ajax 개념

📢 서버란 ?

데이터를 요청하면 데이터를 전송해주는 프로그램이다

---

ex) 네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램
ex ) 유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램

📢 서버에게 요청하는 방법

데이터 url 기재와 요청방법(get/post 등) 결정

API 문서 : url 요청해야하는 주소들

🔅 GET & POST

Get

데이터를 읽을 때
ex) 브라우저 창에 검색하는 것

Post

데이터를 보낼 때( ex. 수정한 경우 )

<form action="요청할url" method="post">

둘의 단점은 브라우저가 새로고침이 된다는 것이다

=> 느린 느낌을 줌

➡️ 그래서 ajax를 사용한다

📢 ajax란?

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

📢 ajax 사용법

🔅 GET

데이터 가져오기

$.get('url');

데이터 확인하기

데이터 가져오는 것을 성공하고 실행 가능

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

done 또는 then을 붙이고 콜백함수의 파라미미터로 데이터를 받아올 수 있다

🔅 POST

데이터 전송하기

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

데이터 확인하기

$.post('url').done(function(data){
  console.log(data)
});

GET 과 동일하다

🔅 요청 성공/실패

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

done/fail 말고 then/catch도 된다

📢 fetch

fetch 메서드를 사용해도 ajax 요청이 가능하다

fetch 함수

Edge 브라우저 이상에서만 동작하는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다

사용법

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

res.json()

서버와 데이터를 주고받을 때는 문자만 주고받을 수 있다

jQuery의 $.get()은 자동으로 array/object 자료로 바꿔주지만,
기본함수 fetch() 는 자동으로 바꿔주지 않아 JSON 자료 형식으로 바꾸는 과정이 필요하다

✅ 그래서 자동으로 바꿔주는 axios 라이브러리를 많이 사용한다