[javascript] JAX를 사용하여 웹페이지에 동적 콘텐츠 추가

11 Dec 2023

javascript

본 문서에서는 JAX (JavaScript와 XML)를 사용하여 웹페이지에 동적으로 콘텐츠를 추가하는 방법을 안내합니다.

JAX란 무엇인가?

JAX는 클라이언트 측에서 동적으로 콘텐츠를 업데이트하는 기술을 의미합니다. 이는 페이지 로딩 시 서버로부터 받아온 초기 콘텐츠를 기반으로, 추가적인 콘텐츠를 서버로부터 요청하여 화면에 동적으로 추가함으로써 사용자 경험을 향상시키는 데 사용됩니다.

JAX를 사용하여 동적으로 콘텐츠 추가하는 방법

XMLHttpRequest 객체 생성: 클라이언트 측 JavaScript에서 XMLHttpRequest 객체를 생성하여 서버로 요청을 보냅니다.
```
 var xhttp = new XMLHttpRequest();
```
서버와의 통신 설정: XMLHttpRequest 객체를 사용하여 서버와의 통신을 설정합니다.
```
 xhttp.open("GET", "get_new_content.php", true);
```
위의 예시에서 "get_new_content.php"는 서버에 동적으로 받아올 콘텐츠를 처리하는 스크립트 파일을 가리킵니다.
통신 완료 핸들링: 서버로부터의 응답이 올 때마다 콘텐츠를 업데이트합니다.
```
 xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
     document.getElementById("dynamic_content").innerHTML = this.responseText;
   }
 };
```
위의 코드에서 dynamic_content는 동적으로 업데이트할 콘텐츠가 표시될 영역의 id를 가리킵니다.
서버로 요청 전송: 실제로 서버로 요청을 보냅니다.
```
 xhttp.send();
```

이렇게 코드를 작성하면, 클라이언트 측 스크립트가 서버로 요청을 보내고, 서버는 요청을 받아 해당하는 동적 콘텐츠를 응답으로 보내주게 됩니다.

마치며

JAX를 사용하면 웹페이지를 더 동적으로 만들 수 있습니다. 이를 통해 페이지의 로딩 시간을 단축하고 사용자 경험을 향상시킬 수 있습니다. JAX를 사용하여 동적 콘텐츠를 추가하는 방법에 대한 이해를 통해 웹 개발 프로젝트에서 다양한 기능들을 구현하는데 도움이 될 것입니다.

위의 예시에서는 JavaScript를 사용했지만, 최신 프레임워크나 라이브러리를 사용한다면, 더욱 효율적으로 JAX를 구현할 수 있을 것입니다.

참고문헌:

MDN Web Docs: AJAX