ajax란 비동기 방식이 무엇일까?

ajax가 무엇일까요? ajax는 Asynchronous JavaScript And XML의 단축어로 클라이언트와 서버간의 통신을 가능하게하는 용도로 사용되는데요. json이나 xml등의데이터를 통해서 필요한 정보를 받아와서 웹페이지를 갱신할 수 있습니다.

Ajax 란

Ajax는 위와같이 Asynchronous JavaScript And XML의 약자로 웹개발에서 페이지 전체를 새로고침을 하지않고 일부만 서버와 통신해 데이터를 비동기적으로 주고 받을 수 있게하는 기술입니다. 브라우저의 XMLHttpRequest 객체를 활용하여서 클라이언트와 서버간의 통신을 가능하게 하는겁니다. ajax는 json과 xml 등의 데이터를 통해서 서버로부터 필요한 정보를 받아와서 웹페이지를 갱신할 수 있습니다.

Ajax의 작동 방식

ajax는 웹페이지의 일부만 갱신 할 수 있게 설계되어 있는데요. 이를 통해서 전체 페이지를 구지 새로고침을 하지않아도 일부분만 업데이트를 해서 자원과 시간을 절약할 수 있습니다. ajax의 작동방식은 아래와 같습니다.

1. XMLHttpRequest 객체 생성: AJAX 통신을 위해 XMLHttpRequest 객체를 생성합니다.
2. 요청 준비: 서버에 요청을 보낼 준비를 합니다. 이를 위해 필요한 메서드를 설정합니다.
3. 콜백 함수 생성: 서버에서 응답이 왔을 때 실행될 콜백 함수를 만듭니다.
4. 요청 전송: 서버로 요청을 전송합니다.
5. 응답 처리 및 업데이트: 서버에서 응답이 오면 콜백 함수가 실행되고, 필요한 부분의 HTML을 업데이트합니다.

동기 방식과 비동기 방식

• 동기방식 : 요청을 보내고 응답이 올때까지 기다립니다. 화면이 멈추고 자원 낭비가 발생할 수 있습니다.
• 비동기 방식 : 요청을 보내고 응답을 기다리지 않으며, 다른 작업을 계속 진행합니다. 화면이 멈추지 않고 데이터를 효율적으로 보여줄 수 있죠.

Ajax를 사용하는 이유

ajax를 사용하면 웹페이지의 전체를 새로고치지 않고도 필요한 데이터만 서버에서 가져올 수 있어서 쓸데없이 모두를 새로고치지않아도 됩니다. 그래서 사용자가 인터렉션할때 페이지 리로드 없이 빠르게 그 부분만 데이터를갱신해서 보여줄 수 있죠.

AJAX의 장단점

장점

1. 웹페이지 속도 향상: 전체 페이지를 새로 고치지 않고 필요한 데이터만 갱신함으로써 속도가 빨라집니다.
2. 비동기 처리: 서버 처리가 완료될 때까지 기다리지 않고 다른 작업을 계속할 수 있습니다.
3. 코딩의 효율성: 서버에서 필요한 데이터만 전송받아 처리하므로 전체적인 코딩 양이 줄어듭니다.
4. 향상된 사용자 경험: 다양한 UI 요소를 페이지 리로드 없이 구현할 수 있습니다.

단점

1. 히스토리 관리 어려움: AJAX 요청은 브라우저 히스토리에 기록되지 않습니다.
2. 보안 문제: 페이지 이동 없이 통신하기 때문에 보안상의 문제가 발생할 수 있습니다.
3. 서버 부하 증가: 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있습니다.
4. 진행 정보 부족: 요청 진행 상황을 사용자에게 알리지 않으면 혼란이 발생할 수 있습니다.
5. 브라우저 호환성: AJAX를 지원하지 않는 브라우저에서는 문제가 발생할 수 있습니다.
6. 디버깅 어려움: 스크립트로 작성되므로 디버깅이 용이하지 않습니다.
7. Cross-Domain 제한: 동일-출처 정책으로 인해 다른 도메인과의 통신이 제한됩니다.

AJAX의 진행 과정

1. XMLHttpRequest 객체 생성: let xhr = new XMLHttpRequest();
2. 요청 설정: xhr.open(‘GET’, ‘data.json’, true);
3. 콜백 함수 설정

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById('myDiv').innerHTML = xhr.responseText;
    }
};

AJAX의 한계

AJAX는 클라이언트가 서버로 데이터를 요청하는 방식이기 때문에 서버가 자동으로 특정 정보를 제공하는 푸시 알림과 같은 실시간 서비스 구현에는 한계가 있습니다.

AJAX 프레임워크

AJAX 개발을 쉽게 할 수 있도록 다양한 기능을 포함한 개발 환경을 제공하는 것이 AJAX 프레임워크입니다. 자주 사용되는 AJAX 프레임워크로는 Prototype, script.aculo.us, Dojo, jQuery, Axios 등이 있습니다. 이 외에도 수많은 AJAX 프레임워크들이 널리 사용되고 있습니다. 다양한 프레임워크를 경험해 봄으로써 AJAX 개발을 더욱 효율적으로 할 수 있습니다.

결론

AJAX는 웹 페이지의 일부만 갱신할 수 있게 하여 자원과 시간을 절약하고, 사용자 경험을 향상시키는 중요한 기술입니다. AJAX를 사용하면 페이지 새로 고침 없이 필요한 데이터를 효율적으로 주고받을 수 있으며, 다양한 프레임워크를 통해 개발을 더욱 간편하게 할 수 있습니다. AJAX의 장점과 단점을 잘 이해하고, 적절히 사용하여 더 나은 웹 애플리케이션을 개발할 수 있습니다.

오늘은 이렇게 ajax의 대해서 그리고 비동기 방식에 대해서 알아보았는데요. ajax는 지금도 수많은곳에서 사용하고 있습니다. 그래서 ajax는 필수로 알아두어야할 언어중에 하나이고 ajax의대해서 이렇게 알아보았습니다.

파이썬강좌를 진행하고 있습니다. 아래를 참고하세요. 무료입니다.

파이썬(python) 강좌 1 기초문법