javascript - Ajax

CHan·2023년 4월 11일

Ajax

동기 : 코드가 순차적으로 실행되며, 한 작업이 완료될 때까지 다른 작업이 대기해야 한다.
이러한 방식은 간단하고 직관적이지만 작업이 길어지면 실행 속도가 느려지고
작업이 차단될 가능성이 높다.
비동기 : 코드가 순차적으로 실행되지 않으며, A 작업을 실행하는 동안 B 작업이 실행될 수 있으며
A가 완료될 때까지 B가 기다리지 않는다. 이 방식은 작업이 길어지더라도 실행 속도가 빠르며
작업이 차단되지 않는다.
동기 방식은 작업의 순서와 정확성이 중요한 경우에 사용되고,
비동기 방식은 작업의 처리 속도와 응답성이 중요한 경우에 사용된다.

사용자의 경험 향상 : 사용자는 웹 페이지를 새로고침하지 않고도 필요한 정보를 동적으로 업데이트 할 수 있다.
서버 부하 감소 : 필요한 정보만 서버에서 가져와서 화면에 표시할 수 있으므로 서버의 부하를 감소시킬 수 있다. 이는 대규모 트래픽이 발생하는 웹 사이트에서 중요한 이점이 된다,
다중 작업 처리 : 여러 개의 ajax 요청을 동시에 보내서 필요한 정보를 병렬로 처리할 수 있다. 이를 통해 더욱 빠른 속도와 높은 처리량을 달성 가능하다.
데이터 용량 감소 : 필요한 정보만 서버에서 가져오기 때문에, 전체 데이터 용량이 감소한다.
동적 업데이트 : 웹 사이트의 사용자 인터페이스를 더욱 동적으로 만들어서 사용자의 요구에 더욱 빠르게 대응할 수 있도록 도와준다.

코드 복잡도 증가 : 비동기 방식을 사용하려면 비동기 콜백 함수나 promise, async/await 등의 기술을 사용해야 하기 때문에 코드의 가독성을 낮출 수 있다.
디버깅(오류를 찾아내고 수정하는 과정)의 어려움 : 코드의 실행이 순차적이지 않기 때문에 오류 발생 시 어디서 발생했는지 찾기 어려울 수 있다.
성능 저하 : 동시에 실행되는 작업이 많아져서 시스템 자원을 과도하게 사용할 수 있다. 이러한 경우 성능 저하를 일으킨다.

사용자가 웹 페이지에서 요청을 보낸다.
javascript를 사용하여 XMLHttpRequest 객체를 생성한다.
(XMLHttpRequest - 클라이언트와 서버 간의 데이터 전송을 위한 javascript 객체)
XMLHttpRequest 객체의 open() 메소드를 사용하여 요청 방식, url, 비동기 여부 등을 설정한다.
XMLHttpRequest 객체의 send() 메소드를 사용하여 서버에 요청을 보낸다.
서버는 요청을 처리하고 응답을 생성하여 클라이언트에 전송
XMLHttpRequest 객체의 onreadystatechange 이벤트를 사용하여, 응답 상태가 변경될 때마다 콜백 함수를 호출한다.
(onreadystatechange - XMLHttpRequest 객체에서 상태변화가 발생할 때마다 호출되는 이벤트)
응답이 완료되면 XMLHttpRequest 객체의 response Text, responseXML 등의 속성을 사용하여 응답 데이터를 처리한다.
(response Text - 서버로부터 받아온 텍스트 데이터를 문자열 형태로 반환)
(response XML - 서버로부터 받아온 XML 데이터를 XML 문서 형태로 반환)
처리된 데이터를 웹 페이지에 업데이트한다.

Hello World!