Ajax통신의 이해

1. Ajax (XMLHTTPRequest 통신)

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

더 좋은 UX를 제공할 수 있는 기술입니다.

아래 탭 UI를 살펴봅시다.

상단에 탭을 누를때마다 컨텐츠가 달라집니다.

누르지도 않은 탭의 컨텐츠까지 초기로딩시점에 모두 불러온다면 초기로딩속도에 영향을 줄 것이다.

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

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

Ajax통신의 이해

Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고받을 수 있지만, 일반적으로 사용이 편리한 JSON포맷으로 데이터를 주고 받습니다

JSON이 무엇인지 찾아보고, JSON 포맷으로 데이터를 작성하려면 어떤 규칙이 필요한지 알아보세요.

2. AJAX 실행코드

AJAX 실행 코드는 아래와 같습니다.

아래 방법은 XMLHTTPRequest 객체를 사용하는 표준방법입니다.

function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 oReq.send();
}

링크 바로가기

XMLHttpRequest객체를 생성해서, open메서드로 요청을 준비하고, send메서드로 서버로 보냅니다. 

요청처리가 완료되면(서버에서 응답이 오면) load이벤트가 발생하고, 콜백함수가 실행됩니다.

콜백함수가 실행될 때는 이미 ajax함수는 반환하고 콜스택에서 사라진 상태입니다. 

이는 setTimeout함수의 콜백함수의 실행과 유사하게 동작하는 '비동기'로직 입니다.

테스트방법

간단한 서버를 어떻게 해야할지 몰라 테스트해보지 못하고 있다면 아래의 방법으로 해보세요

1. visual studio code를 사용하고 있다.

2. extensions 에서 live-server를 설치한다.

3. 코드를 모두 작성했으면 html 파일에서 우클릭을 누른다.

4. 우클릭후 Open with Live Server 를 찾아 눌러 실행한다.

5. 웹 브라우저에서 잘 실행이 됐는지 확인하면 - 끝 -

CORS가 뭐고 왜 나왔는지 잘 정리된 글을 찾아보니 공유하면 좋을 것 같아서 댓글 남겨봅니다.

http://huns.me/development/1291