Ajax 통신의 이해

Ajax (XMLHTTPRequest 통신)

이 기술은 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는것이 좋겠다는

생각에서 출발했다.

예를들어

다음 탭의 UI에서 만약 누르지도 않은 탭의 컨텐츠까지 초기 로딩시점에 모두 불러온다면

초기 로딩속도에 영향을 줄 것이다.

고로 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 더 좋다.

이 경우가 Ajax 기술을 활용할 수 있는 대표적인 경우이다.

Ajax 통신으로 XML, Plain Text, JSON등 다양한 포맷의 데이터를 주고받을 수 있지만,

일반적으로 사용이 편리한 JSON포맷으로 데이터를 주고 받는다.

Ajax 실행코드

XMLHTTPRequest 객체를 사용하는 표준방법으로 실습을 해보겠다.

다음과 같이 코드를 짜서 실행을 해보면 

이것이 Http만 지원하고 지금은 파일 프로토콜이기 때문에 load에 실패한다.

그래서 tomcat서버로 다시 돌렸더니

이렇게 잘 동작하는것을 확인할 수 있었다.

네트워크의 XHR버튼을 클릭해보면 이렇게 요청한 내용에 대해서 확인을 할 수 있다.

get방식으로 보낼 때 url뒤에 다음과 같이 키나 이름을 이렇게 붙여서

Ajax를 보내는 것도 가능하다.

출처 : edwith

https://www.edwith.org/boostcourse-web/lecture/16701/