클라이언트는 서버로부터 데이터를 가져와야 하는 상황이 언제 어디서든 발생할 수 있다. 예를 들어, 아이디와 비밀번호를 입력하고 로그인을 하면 해당 유저의 정보들을 서버로부터 가져와야 한다. 그렇다면 어떻게 가져올 수 있을까?
바로 XMLHttpRequest를 사용해서 가져올 수 있다.
(사용법 : https://m.blog.naver.com/PostView.nhn?blogId=haskim0716n&logNo=220548600462&proxyReferer=https:%2F%2Fwww.google.com%2F)
XMLHttpRequest는 자바스크립트가 서버와 통신할 수 있게 해주는 api이다. api는 메뉴판이라고 보면 된다. 클라이언트가 메뉴판을 보고 주문하면 서버로부터 원하는 것을 얻을 수 있다.
XMLHttpRequest는 다음과 같은 방식으로 작성된다.
어떤가? 좀 길고 어렵지 않은가?
그래서 jQuery ajax를 사용해 가독성과 효율성을 높일 수 있다.
jQuery란, 요청을 쉽게 해주는 자바스크립트 라이브러리이다.
예를 들어 자바스크립트에서 id를 호출한다고 했을 때 자바스크립트는 document.getElementById(‘ID’) <- 이렇게 작성해야 하지만,
jQuery는 $(‘#ID’) <- 이렇게 더 간단하게 작성할 수 있다.
어떤가? XMLHttpRequest보다는 더 효율적으로 작성된 모습이다.
그런데 여기서 더 쉽고 간단하게 쓸 수 있는 방법이 있다.
그것이 바로 fetch이다.
fetch는 ajax(ajax에 대한 설명은 뒤에 나온다) 방식 중 최신 기술이며 상당히 단순하며 직관적인 모습을 보여준다.
https://helloinyong.tistory.com/68
물론 익숙해지려면 많은 노력과 시간이 필요하겠지만, 처음과 비교했을 때 엄청난 효율성과 가독성을 보여준다.
자 그럼 도대체 AJAX가 무엇인가?
AJAX
AJAX(Asynchronous Javascript And Xml)는 한마디로,
JavaScript를 사용하여 비동기적으로(Asynchronous), 클라이언트와 서버간에 XML 데이터를 주고받게 하는 웹 개발 기법이라고 할 수 있다.
https://ko.wikipedia.org/wiki/Ajax
https://coding-factory.tistory.com/143
여기서 비동기 방식(Async)란, 웹페이지 전체를 리로드하지 않고 데이터를 불러오는 방식이다. 전체 페이지 중 필요한 일부만 불러와 사용할 수 있으므로 매우 효율적이다.
왜 AJAX를 사용하는가?
기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려준다. 이때 최초에 폼을 가지고 있던 페이지와 사용자가 이 폼을 채워 결과물로서 되돌려 받은 페이지는 수정된 부분을 제외하면 유사한 내용을 가지고 있는 경우가 많다.
결과적으로 중복되는 HTML 코드를 다시 한번 전송을 받음으로써 많은 데이터를 낭비하게 된다. 데이터의 낭비는 금전적 손실을 야기할 수 있으며 사용자와 대화(상호 반응)하는 서비스를 만들기 어렵게도 한다.
ajax는 페이지 전체가 아닌 일부분만 갱신할수 있도록 XML HttpRequest, fetch 등을 통해 서버에 request를 한다. 이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다. 이때 일반 Javascript만으로 Ajax를 하게되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 단점이 존재한다. 그렇기 때문에 jQuery로 작성을 하게 된다면 더 적은 코딩 작성과 더 적은 방법으로 같은 동작을 할 수 있다. 그래서 fetch에서도 jQuery를 사용한다.
출처
https://helloinyong.tistory.com/68
https://m.blog.naver.com/PostView.nhn?blogId=haskim0716n&logNo=220548600462&proxyReferer=https:%2F%2Fwww.google.com%2F
https://coding-factory.tistory.com/143
https://ko.wikipedia.org/wiki/Ajax
https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest
https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/
