[AJAX] 기본 문법

🔍 AJAX (Asynchonous Javascript And Xml, 비동기식 자바스크립트&XML)

 

- 웹 페이지(브라우저)의 갱신(Refresh) 없이도 요청을 수행하고 

요청에 대한 응답을 처리할 수 있는 자바스크립트(정확히 말하면 jQuery) 라이브러리이다. 

- 데이터베이스 등의 작업 요청 시 요청된 응답이 돌아올 때까지 기다리지 않고, 

다른 작업을 수행하면서 요청에 대한 응답이 돌아오면 해당 응답을 처리하는 기술 

- 주로, 아이디 및 패스워드 검증 등의 실시간 정보 조회 작업에 사용한다. 

 

✍ 기본 문법

$.ajax({
    type : xxx, // AJAX 로 요청 시 사용할 메서드(= 요청 방식 = "GET" or "POST" 등) 지정
    url : xxx, // AJAX 로 요청할 요청 주소(URL)
    data : xxx, // 요청(전송할) 데이터 지정(복수개 파라미터일 경우 중괄호로 묶음)
    dataType : xxx, // 응답 데이터에 대한 타입 지정
    success : function(response) { // 요청에 대한 처리 성공 시 처리할 함수 정의

    }, 
    error : function(xhr, textStatus, errorThrown) { // 요청에 대한 처리 실패 시 처리할 함수 정의

    }
});

 

✍ 간단하게 연습해보기 

<h1>AJAX - test1.jsp</h1>
<form action="" method="post">
    <table border="1">
        <tr>
            <th>아이디</th>
            <td><input type="text" name="id" id="id" required="required"></td>
        </tr>
        <tr>
            <th>패스워드</th>
            <td><input type="text" name="passwd" id="passwd" required="required"></td>
        </tr>
        <tr>
            <td colspan="2" id="btnArea">
                <input type="button" id="btnLogin" value="로그인">
            </td>
        </tr>
    </table>
</form>
<hr>
<h1>응답 처리 결과</h1>
<div id="resultArea"><!-- AJAX 요청 응답 처리 결과 출력 --></div>

=> 간단한 로그인 폼을 작성하였다. ajax를 통해 로그인 결과를 확인하고자 한다. 

 

$(function() {
    $("#btnLogin").on("click", function(){
        let sendData = $("form").serialize();
        $.ajax({
            type: "post",
            url: "MemberLoginPro.me", // 실제 로그인 작업을 수행하는 서블릿 주소 요청 
            // serialize() 메서드를 통해 가져온 폼데이터를 전송할 데이터로 지정(중괄호 불필요)
            data: sendData, // sendData 변수 대신 직접 $("form").serialize() 지정도 가능
            dataType: "text",
            success: function(response){ // 요청 처리 성공 시 자동으로 호출되는 콜백함수
            	// 익명 함수 파라미터로 응답 데이터가 전달된다. (처리하는 페이지에서 응답한 결과)
                // id 선택자 "resultArea" 영역에 응답 데이터(response) 출력하기 
                $("#resultArea").html(response);
            },
            error: function(xhr, textStatus, errorThrown){
            	// 요청 처리 실패 시(= 에러 발생 시) 자동으로 호출되는 콜백함수 
                $("#resultArea").html("xhr = " + xhr + "<br>textStatus = " + textStatus + "<br>errorThrown = " + errorThrown);
            }	
        });
    });
});

 

✍ serialize()

form 태그 내부 파라미터를 모두 요청 페이지로 전송해야할 때, 자바스크립트를 통해 요소 각각에 접근하여 데이터를 가져올 수도 있지만, 폼(form 객체)을 대상으로 serialize() 메서드를 호출하면 해동 폼의 데이터를 "직렬화"를 통해 내보내기가 가능하다. 

그래서 let sendData = $("form").serialize(); 를 통해 form 태그 내의 모든 요소를 내보내기 하였다. 

 

✍ result 영역에는 확인을 위해 세션아이디 출력 코드를 작성 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>AJAX - test1_result.jsp</h1>

<h3>세션 아이디 : ${sessionScope.sId }</h3>

 

💻 로그인 전 화면 

💻 로그인 후 화면 

=> 웹 페이지의 갱신 없이도 처리 결과가 출력된 걸 확인 할 수 있다. 

이게 바로 ajax의 장점이다. 그래서 주로 회원가입 시 중복아이디 확인, 비밀번호 확인에 사용된다.