[JQuery] Ajax

📌 Ajax란?

• Asynchronous JavaScript and XML의 약자
• 비동기식으로 서버와 데이터를 주고받을 수 있는 기술
• 페이지 이동 없이 데이터 전송 및 화면 갱신 가능

 

📌 데이터를 서버로 보내는 방법

1. Form 태그 사용
   • action 속성에 지정된 URL로 데이터를 전송
2. a 태그의 href 사용
   • 쿼리 스트링을 이용한 데이터 전달: ?id=test123
3. Ajax 사용
   • 페이지를 새로고침하지 않고 데이터 전송 가능
   • 회원가입 시 ID 중복 체크와 같은 기능 구현에 사용

 

 

📌  Ajax와 서버의 데이터 흐름

1. Ajax → JSP: 입력한 id 값을 전달
2. JSP → DB: id 값을 기반으로 DB 조회
3. DB → JSP: 조회 결과 (count = 1 또는 count = 0) 반환
4. JSP → Ajax: 결과를 String 타입으로 전달

 

 

📌  주의사항

1. DB와 직접 연결할 수 없음
   • Ajax는 서버와의 중간 매개체 역할
   • JSP, PHP, API 등을 통해 DB와 통신
2. Boolean 타입 사용 X
   • 서버에서 결과를 Ajax로 리턴할 때는 String 타입으로 넘겨야 함

 

📌 간단한 Ajax 사용 예시 (JQuery)

$.ajax({
    type: "POST",
    url: "checkId.jsp",
    data: { id: $("#userId").val() },
    success: function(data) {
        if(data === "1") {
            alert("이미 사용 중인 아이디입니다.");
        } else {
            alert("사용 가능한 아이디입니다.");
        }
    },
    error: function() {
        alert("오류가 발생했습니다.");
    }
});

• url: 서버의 JSP 파일 위치
• data: 서버에 전송할 데이터 (id)
• success: 서버에서 받은 응답 처리
• error: 통신 실패 시 처리