AJAX

AJAX

AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법

AJAX의 가장 큰 특징은, 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것

검색창에서 한 글자를 입력할 때마다, 해당 글자로 시작하는 단어들을 서버로부터 받아와, 아래 추천검색어로 보여주게 됩니다. 다시 말해, 검색창에서는 필요한 데이터만 비동기적으로 받아와 렌더링 되며, 여기에 AJAX가 사용됩니다. 

AJAX의 두 가지 핵심 기술

AJAX를 구성하는 핵심 기술은 JavaScript와 DOM, 그리고 Fetch입니다.

전통적인 웹 애플리케이션에서는 <form> 태그를 이용해 서버에 데이터를 전송해야 했습니다. 또한 서버는 요청에 대한 응답으로 새로운 웹 페이지를 제공해 주어야 했습니다. 다시 말해, 클라이언트에서 요청을 보내면 매번 새로운 페이지로 이동해야 했습니다.

 

그러나 Fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있습니다. Fetch는 사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있도록 합니다. 즉, 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용합니다.

 

또한 JavaScript에서 DOM을 사용해 조작할 수 있기 때문에, Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있습니다.

Feach

fetch API는 Promise 기반으로 구성되어 있어 비동기 처리 프로그래밍 방식에 잘 맞는 형태이다. 그래서 then이나 catch 와 같은 체이닝으로 작성할 수 있다는 장점이 있다. 또한 fetch API는 JS 기본 기능 이기 때문에, JQuery와 같이 CDN 과 같은 다른 작업을 하지 않아도 바로 사용할 수 있다.

fetch("https://jsonplaceholder.typicode.com/posts", option)
   .then(res => res.text())
   .then(text => console.log(text));

1. fetch 에는 기본적으로 첫 번째 인자에 요청할 url이 들어간다.
2. 기본적으로 http 메소드 중 GET으로 동작한다.
3. fetch를 통해 ajax를 호출 시 해당 주소에 요청을 보낸 다음, 응답 객체(Promise object Response)를 받는다.
4. 그러면 첫 번째 then에서 그 응답을 받게되고, res.text() 메서드로 파싱한 text값을 리턴한다.
5. 그러면 그 다음 then에서 리턴받은 text 값을 받고, 원하는 처리를 할 수 있게 된다.

HTTP Method 종류 

METHOD	역할
POST	POST를 통해 해당 URI를 요청하면 리소스를 생성
GET	GET를 통해 해당 리소스를 조회합니다. 리소스를 조회하고 해당 도큐먼트에 대한 자세한 정보를 가져
PUT	PUT를 통해 해당 리소스를 수정
DELETE	DELETE를 통해 리소스를 삭제

GET

fetch("https://jsonplaceholder.typicode.com/posts/1") // posts의 id 1인 엘리먼트를 가져옴 
  .then((response) => response.json())
  .then((data) => console.log(data))
Promise {<pending>}
-------------------------------------------------
result: {userId: 1, id: 1,
title: 'sunt aut facere repellat provident occaecati 
excepturi optio reprehenderit', 
body: 'quia et suscipit\nsuscipit recusandae consequuntur 
…strum rerum est autem sunt rem eveniet architecto'}

• 단순히 API의 데이터를 가져오는데 사용
• fetch함수는 디폴트로 GET 방식으로 작동하고, 옵션 인자가 필요 없다.

POST

POST : 새로운 자원 생성 요청

•  폼 등을 사용해서 데이터를 만들어  보낼 때 사용
•  새로운 포스트 생성 위해서는 method 옵션을 POST로 지정해주고, headers 옵션으로 JSON 포맷 사용한다고 알려줘야 함. body 옵션에는 요청 데이터를 JSON 포맷으로 넣어줌.
• method – HTTP 메서드
• headers – 요청 헤드가 담긴 객체(제약 사항이 있음)
• body – 보내려는 데이터(요청 본문)로 string이나 FormData, BufferSource, Blob, UrlSearchParams 객체 형태

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST", 
  headers: { 
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ 
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
---------------------------------------------------
result : {title: 'Test', body: 'I am testing!', userId: 1, id: 101}

 

PUT/PATCH

PUT/PATCH : API에서 관리하는 데이터를 수정하기 위해 사용

💢PUT : 부분수정, PATCH : 전체수정

PUT 코드 

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test" // 
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
------------------------------------------------------------------------------------
result : {title: 'Test', id: 1}

PATCH 코드

fetch("https://jsonplaceholder.typicode.com/posts/1", { 
  method: "PATCH",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test" // title만 바꿈. 나머지 요소는 건들지 않음.
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
-----------------------------------------------------------------------
result: {userId: 1, id: 1, title: 'Test', 
body: 'quia et suscipit\nsuscipit recusandae consequuntur 
…strum rerum est autem sunt rem eveniet architecto'}

DELETE

DELETE : API의 데이터 삭제

• 보낼 데이터가 없어 headers, body 필요 없음!!!!!!

DELETE 코드

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data))
-------------------------------------------------------------

result : {}

fetch의 response 속성

• response.status – HTTP 상태 코드(예: 200)
• response.ok – HTTP 상태 코드가 200과 299 사이일 경우 true
• response.body ㅡ 내용
• response.text() – 응답을 읽고 텍스트를 반환한다,
• response.json() – 응답을 JSON 형태로 파싱한다,
• response.formData() – 응답을 FormData 객체 형태로 반환한다.
• response.blob() – 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환한다.
• response.arrayBuffer() – 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환한다.