JS- AJAX란?

JS- AJAX란?

안녕하세요!
오늘은 프로그램 개발을 하면서 유용하게 사용될
AJAX에 대해서 소개해드리겠습니다~!!

우선 AJAX란 정의를 먼저 설명드리면

AJAX(Asynchronous JavaScript and XML)는 비동기 자바스크립트와 xml을 의미합니다!

여기서 비동기란 서버와 브라우저가 연결되면서
브라우저가 끊기지 않고 서버와 연동되는 것을 의미하고

xml은 간단하게 설명을 드리면 서버에 정보를 요청하면 해당 요청에 대해 답변을 의미한다
정도로 생각하시면 좋을 거 같습니다!!

그럼 어떤 경우에 사용되는지 알면 좋을 거 같은데요~

예를 들면 A라는 Select Box와 B라는 Select Box가 있습니다.
근데 A를 선택하면 해당 결과에 따라 B의 내용이 바뀌게 하고 싶은 상황입니다.

만약 html으로 고정으로 A와 B를 구성하면 위에 상황에서 변화가 불가능하겠죠?!
그럴 때 AJAX를 통해서 A의 값을 전달해서 B의 내용을 요청받는 것입니다.

이렇게 요청을 하게 된다면 비동기 방식으로 화면전환이 없이
B의 내용을 변화할 수 있기 때문에
사용자의 입장에서는 더욱 편리한 느낌을 받을 것입니다.

이런 예시를 제외하고도 DB와 CRUD를 연동하는 경우, 테이블 표의 값을 상황에 따라 불러오는 경우,
검색어를 작성했을 때 연관검색어가 나오게 되는 상황 등등
엄청 다양한 경우에 사용될 수 있고
다양한 API를 활용해서 많은 결과를 도출할 수도 있습니다!!

이제 유용하다는 말은 그만하고! 가장 중요한 사용방법에 대해 설명드리겠습니다.

사용 방법은 

$.ajax({
    url: , // 요청할  URL
    type: 'GET', // 데이터 전송 방식
    data: 'a:b', // 전송할 데이터
    success: function onData (data) { // 요청에 성공했을 경우 결과
        console.log(data);
    },
    error: function onError (error) { // 요청에 실패했을 경우 결과
        console.error(error);
    }
});

이런 식으로 요청할 url에 data를 type에 맞춰서 url에 요청하고 success에서 성공 시 결과를
error에서 실패 시 결과를 보여줍니다.

AJAX의 기본 구조로 API를 사용해서 더욱 다양한 방식으로 사용할 수 있고
data에 다양한 데이터를 보내서 원하는 결과를 얻을 수 있습니다.

AJAX는 사용방법도 어렵지 않아서 사용할 때에도 간편하게 사용할 수 있고
결과 자체도 성공과 실패를 직관적으로 보여주기 때문에 오류를 찾고 해결하기도 유용합니다.

해당 AJAX를 이해했다면 여러분들도 비동기로 사용자에게 서비스를 제공할 수 있습니다.

오늘은 AJAX에 대해서 설명을 드렸는데 AJAX는 정말 정말 유용하게 사용할 수 있기 때문에
알아두시면 좋을 것 같습니다!

긴 글 읽어주셔서 감사합니다!!