헤엄쳐 해파리

Ajax(Asynchronous JavaScript and XML)란?

Ajax는 비동기적으로 웹 서버와 브라우저 간에 데이터를 교환하기 위한 기술이다. 이 기술은 웹 페이지를 다시 로드하지 않고도 동적으로 데이터를 가져오거나 전송할 수 있게 해준다.

*비동기 방식이란?

웹페이지를 리로드 하지 않고 데이터를 불러오는 방식이다. 비동기 방식을 이용하면 필요한 데이터만 불러올 수 있기 때문에 불필요한 리소스 낭비를 줄일 수 있다.

Ajax는 XMLHttpRequest 객체를 통해 서버에 request 한다.

JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼 자원과 시간을 아낄 수 있다.

장점

• Ajax 요청은 비동기적으로 발생하기 때문에 요청이 완료될 때까지 기다리지 않고 처리가 가능하다.
• 웹 페이지가 다시 로드되지 않고도 데이터를 비동기적으로 가져와 화면을 업데이트 할 수 있으므로 빠른 상호 작용이 가능하다.
• 전체 페이지를 다시 로드할 필요가 없어 서버 부하를 줄일 수 있다.

단점

• 브라우저와 서버 간 데이터를 주고받기 때문에 보안상 문제가 발생할 수 있다. 사용자 입력을 서버로 보내는 경우 데이터 유효성을 검증하고 보안을 강화해야 한다.
• 연속으로 데이터 요청 시 서버 과부하가 발생할 수 있다.
• 일부만 동적으로 업데이트되기 때문에 검색 엔진이 페이지의 전체 내용을 색인인하기 어려울 수 있다.

작동순서

1. 웹 페이지에서 JavaScript를 사용하여 XMLHttpRequest 객체를 생성
2. XMLHttpRequest 객체를 사용하여 서버에 비동기식 요청 전송
3. 서버는 요청을 처리하고, 처리 결과를 웹페이지로 재전송
4. 웹 페이지에서 JavaScript를 사용하여 처리 결과를 받아, 페이지의 특정 부분을 업데이트

Ajax 문법 (JQuery 사용)

        $.ajax({    
        
           url      : "/board/getBoardList",
           data     : $("#boardForm").serialize(),
           dataType : "JSON",
           cache    : false,
           async    : true,
           type     : "POST",    
           success  : function(obj) {
                getBoardListCallback(obj);                
            },           
           error    : function(xhr, status, error) {}
            
         });
    }

• url : Ajax로 요청할 대상 URL 지정
• data : 요청에 포함될 데이터 지정
• dataType : 서버에 반환되는 데이터 타입 지정
• cache : 요청 결과를 캐시할지 여부
• async : 요청을 비동기적으로 처리할지 여부
• type : Ajax 요청의 HTTP 메서드 지정. GET 또는 POST 지정
• success : Ajax 요청 성공 시 호출될 콜백 함수 지정
• error(xhr, status, error) : Ajax 요청 실패 시 호출될 콜백 함수 지정

자세한 설명 (+AJAX란, JQuery-Ajax 사용법 등)

https://mundol-colynn.tistory.com/75