Ajax 정리

---

Ajax란?

 

Asynchronous Javascript and XML의 약자로
간단히 정리하면 XMLHttpRequest를 이용해서 새로고침없이 페이지의 일부를 로드하는 방법이다.

 

자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

 

 

비동기 방식

 

웹페이지를 새로고침하지 않고 데이터를 불러옵니다.
Ajax를 통해 서버에 요청을 해도, 프로그램은 멈추지 않고 계속 돌아간다.

 

비동기 방식을 이용하면 시간 단축의 효과와 더불어 화면을 리로드하는 경우 필요한 부분만 가져오는 장점이 있다.

 

 

Ajax를 쓰는 이유 

 

단순하게 웹에서 데이터를 조회하고 싶은 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다.

 

일반적으로 HTTP 프로토콜은 단방향 통신이기 때문에, 클라이언트에서 요청을 보내고, 서버에서 응답을 받으면 연결 종료된다.
그래서 화면의 내용을 갱신하기 위해서는 다시 요청을 보내고 응답을 받으며 페이지 전체를 갱신해줘야한다.
이런 경우에 엄청난 자원과 시간을 낭비하게 된다.

Ajax는 HTTP 페이지 전체가 아닌 일부만 갱신 가능하도록, XMLHttpRequest 객체를 통해서 서버에 요청을 하고 
Json이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 자원과 시간을 절약할 수 있는 장점이 있다.

 

Ajax의 장점

1. 웹페이지의 속도 향상

2. 비동기 방식이라서 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.

3. 서버에서 Data만 전송하면 되서 전체적인 코드의 양이 줄어든다.

4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다.

 

Ajax의 단점

1. 히스토리 관리가 되지 않고, 페이지가 이동하지 않는 통신이므로 보안에 신경을 써야한다.

2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.

3. XMLHttpRequest를 통해 통신을 하는 경우, 사용자에게 진행정보를 전혀 주지 않기 때문에 사용자가 요청이 완료가 되지 않은 상태에 서 페이지를 떠날 수 있다.

4. Script로 작성되므로 디버깅이 어렵다.

 

Axios vs. fetch

 

기존 웹에서 어떤 리소스를 비동기로 요청하기 위해서는 XHR(XMLHttpRequest)객체를 사용했어야 했는데
XHR은 잘 디자인되어 있지 않는 API가 아니고, 요청의 상태나 변경을 작업하려면 Event를 등록해서 변경사항을 받아야 했고
요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 좋지 않았다.

이를 보완하기 위해 HTTP 요청에 최적화 되어 있고 상태도 잘 추상화 되어 있는 API들이 생겨나기 시작했다.
그 중 Axios와 fetch를 간단히 알아보자

 

Axios

Axios는 node.js와 브라우저를 위한 HTTP 통신 라이브러리입니다.

 

비동기로 HTTP 통신을 가능케 하며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기도 쉽다.
react를 사용한다면 axios를 선호하는 편이 많다.

 

axios를 이용한 POST 요청

axios({
	method: 'post',
    url: '/user/1',
    data: {
    	name: 'kimcoding',
        country: 'South Korea'
    }
});

 

fetch

JavaSciprt의 내장 라이브러리로 promise 기반으로 만들어졌다.

 

데이터를 다루기 어렵지 않으며, 내장 라이브러리여서 따로 import해줄 필요도 없다.

 

fetch의 POST 요청

const url ='http://localhost3000/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json'
  },
  body:JSON.stringify({
  	name: 'kimcoding',
    country: 'Souht Korea'
  })

  fetch(url,options)
  	.then(response => console.log(response))

 

---