Ajax & fetch

Ajax(Asynchronous JavaScript and XML)

ajax 관련 링크

Ajax는 비동기 자바스크립트와 서버와 통신하기 위한 Fetch, XMLHttpRequest 등을 이용해 서버로부터 자원을 요청하고 받은 후, JS로 일정 부분 DOM만 변경하는 것.

• Ajax 도입 전에는 정적으로 페이지 렌더링을 했다.
• The old way
  - 태그를 이용한 페이지 전환과 요청에 따른 응답
  • 페이지 전환으로 인해 필요한 부분 뿐만이 아닌 페이지 전부를 로딩
• dynamic web page
  • 서버와 자유롭게 통신 가능
    - XMLHttpRequest(XHR) 등장
    • 페이지 깜빡임 없이 seamless하게 작동
      - JavaScript 와 DOM 이용
  • 단순한 web page가 아닌, 보다 애플리케이션다운, web app의 등장

fetch

---

• 서버 자원을 가져오기 위해 사용하는 API
• 비동기적으로 작동한다.

fetch 사용법

1.fetch를 이용하면 Http Response가 넘어온다.
2.http.json()을 하면 Http Response의 body부분이 json으로 파싱된다.
3.JSON.parse를 쓰게 되면 Http Response전체를 파싱하는게 되는데 Http Response안에는 header, body 등등 여러가지가 들어가있으므로 쓰면 안된다.

fetch(url) //url 서버에 접근한다. Promise를 반환한다.
.then(response => response.json()) 
// response는 단순한 HTTP Response이며, 실제 JSON이 아니기 때문에 Response에 내장되어 있는 json()을 이용하여 JSON화 시킨다.
.then(json => console.log(json))//JSON화 된 자원을 콘솔에 출력 
  

• 위 코드는 가장 간단한 fetch 사용법 예이다. fetch안에 url만 적는다면 이는 GET 프로토콜을 이용하는 것이다.

let data = {
  'name': '김코딩',
  'age': 25
}
fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: 'Content-Type': 'application/json'
}) //url 서버에 접근한다. Promise를 반환한다.
.then(response => response.json()) 
// response는 단순한 HTTP Response이며, 실제 JSON이 아니기 때문에 Response에 내장되어 있는 json()을 이용하여 JSON화 시킨다.
.then(json => console.log(json))//JSON화 된 자원을 콘솔에 출력   

• 위 코드는 POST 프로토콜을 이용한 방법이다. POST는 서버에 자원을 저장하기 위한 HTTP method다. 따라서 이 경우 HTTP method를 적어주고 서버에 저장할 데이터를 JSON화 시켜 body에 넣고, headers부분을 작성해 줘야한다.

fetch를 왜 사용하는가?

• 서버 자원을 가져오기 위해 사용한다.
• XHR, jQuery ajax 도 서버의 자원을 가져올 수 있지만 fetch는 코드의 가독성이 좋고 다른 api보다 쓰기 편해서 쓴다.