(초보자를 위한) Ajax이란?

초보자를 위한 Ajax설명으로 깊게 들어가지는 않고, Ajax의 전반적인 느낌을 정리하고자 함...

Ajax의 개념이 헷갈리신다면 이해에 도움이 되실것이라고 생각합니다. 

 

---

 

나는 Ajax을 처음 배울때, 아이디 중복체크를 구현하는데 Ajax을 사용했다. 아이디를 입력하면, 서버로 Ajax방식으로 요청해서, 페이지는 다시 재로딩되지 않고, 중복체크 결과를 알려준다!!

 

내가 경험한 건 페이지가 재로딩되지 않는다는 점이였고 Ajax은 Asynchronous JavaScript and XML의 약자였으므로 나는 아! 페이지가 재로딩되지 않는 개념이 Asynchronous즉 비동기라는 것이구나! 라고 착각해버렸다.

 

💡 비동기 처리와 페이지 재렌더링은 큰 연관이 없다.

페이지 재랜더링이 안되는 이유는 Ajax이 비동기처리하기 때문이 아니라, XMLHttpRequest(XHR)방식을 사용하고 있기 때문이다. 

 

기존의 통신 방식은 HttpRequest로 보내고 HttpResponse로 응답받았다. 이 통신 방식은 Html을 통째로 전달받으므로 반드시 페이지 재랜더링(=새로고침?)을 해버렸다.

 

이런 문제 때문에, 페이지 재랜더링을 안하면서 데이터를 전송받아 일부만 바꾸게 하기 위해 XMLHttpRequest방식이 생겨났다. XMLHttpRequest방식은 요청에 대한 응답으로 XML또는 JSON의 데이터만 받아오고 페이지를 다시 렌더링하지 않고 일부만 수정한다.

 

그리고 Ajax은 XMLHTTPRequest방식에 비동기처리를 합친방식이다(맨 마지막에 추가 설명)

 

⚠️ XMLHttpReqeust라고해서 XML만 전송하는 것이 아니라, JSON등 다양한 형식도 전송된다.

⚠️ Ajax은 초기에는 XML을 데이터로 받았으나 요즘은 대부분 JSON으로 받는다. 그래서 Ajax의 x는 요즘에는 안 맞는 말이지만, 의미가 굳어져서 계속사용된다.

 

💡 비동기처리와 동기처리의 차이점 아래 더보기 클릭

동기처리와 비동기처리

 

동기처리란, 순차적으로 일을 처리하는 것을 말하며,

비동기처리란, 처리해야할 일을 위임하는 것을 말함.

 

다른 방식으로 설명하면

동기처리란, 코드를 위에서부터 순차대로 처리하는 것이다. 단, 순차적으로 실행하므로 중간에 오래걸리는 것이 있다면, 일단 끝날때까지 기다려야한다. 

 

비동기처리란, 다른 프로그램에 처리를 맡기고 다시 동기처리로 돌아와서 동기처리를 끝낸다음 다른 프로그램에서 비동기처리를 끝냈는지 확인하고 끝냈으면 결과를 가져와서 처리하는 것을 의미한다.

 

최종정리. (+ 예시)

 

Ajax은 XMLHttpRequest로 서버에 요청하기 때문에 요청에 대한 응답을 Http가 아니라 JSON으로 받는다. 따라서, 페이지 재랜더링이 일어나지 않는다. 또한, 비동기 처리를 지원해줌으로써 Ajax으로 요청을 하고 응답이 오는 동안 다른 작업을 할 수 있다.

 

가장 일상에 맞닿아 있는 예시는 구글 검색창에 검색어를 입력하는 것이 Ajax의 방식과 동일하다. 검색어를 입력하면 분명 요청이 구글 서버로 전송되서 구글 서버에서 검색과 관련된 데이터를 가져온다. 하지만 1. 페이지 재랜더링이 일어나지 않고(XMLHttpRequest) 2. 우리는 검색을 계속할 수도 있고 다른 것을 클릭할 수도 있다.(비동기 처리)

 

그냥 나는... AJax이란 대충... XMLHttpReqeuest + 비동기처리라고 생각된다..

 

⚠️ 요즘은 요청을 XMLHttpReqeust가 구려서 XMLHttpReqeuest를 대체하는 방식을 사용하기도 하는데 그런 방식을 Axios, FetchAPI등이 있다.

 

나름 열심히 썻는데.. 틀린점 있으면 댓글 주시면 감사합니다 ㅜㅜ