▷ AJAX(에이잭스)
→ Asynchronous Javascript And XML(비동기식 자바스크립트 & XML)
→ 웹페이지(브라우저)의 갱신 없이 화면 상의 요소를 다룰 수 있는 자바스크립트 라이브러리이자 기술의 이름
→ 데이터베이스 등의 작업 요청시에도 요청된 응답이 돌아올 때까지 기다리지 않고
다른 작업을 수행하면서 요청에 대한 응답이 돌아오면 처리가 가능
→ 주로, 아이디 또는 패스워드 등의 검증 등에 사용 가능
< 기본 문법 >
$.ajax();
test1.jsp
// btnOk 버튼에 대한 이벤트 처리
$(function() {
$('#btnOk').on('click', function() {
$.ajax({
type: "post", // 요청방식(GET or POST) 지정
url: "test1_result.js", // 요청 URL 지정
data: { // 전송할 데이터 지정
// 폼 데이터를 가져와서 파라미터로 포함하는 경우
// 파라미터명: 데이터 형식으로 지정
id: $('#id').val(), // id 선택자의 값(value 속성값) 가져와서 id 라는 파라미터로 저장
passwd: $('#passwd').val() // passwd 선택자의 값(value 속성값) 가져와서 passwd 라는 파라미터로 저장
},
dataType: 'text', // 전송하는 데이터에 대한 타입 지정
success: function(response) { // 요청에 대한 처리가 성공했을 경우
// resultArea 선택자 영역에 처리하는 페이지(test1_result.jsp)로부터 전달받은 응답 데이터(response) 출력
$('#resultArea').html(response);
},
error: function(xhr, textStatus, errorThrown) { // 요청에 대한 처리가 실패했을 경우(요청 에러 발생 시)
$('#resultArea').html('xhr = ' + xhr + '<br>' + 'textStatus = ' + textStatus + '<br>' + 'errorThrwn = ' + errorThrown);
}
});
});
});
</script>
</head>
<body>
<h1>학생 정보 입력</h1>
<h1>로그인</h1>
<form action="" method="post">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id" id="id" required="required" size="20"></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="password" name="passwd" id="passwd" required="required" size="20"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="확인" id="btnOk">
</td>
</tr>
</table>
<div id="resultArea"><!-- AJAX 처리 결과 출력될 위치 --></div>
</form>
</body>
</html>
test1_result.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- test1.jsp 페이지에서 AJAX 를 통해 요청한 작업에 대한 응답 결과를 생성하는 페이지 -->
<h1>AJAX - test1_result.jsp</h1>
<!-- test1.jsp 페이지로부터 AJAX 를 통해 전달받은 파라미터(id, passwd) 출력 -->
<h3>아이디 : ${param.id }</h3>
<h3>패스워드 : ${param.passwd }</h3>
</body>
</html>
출력결과
현재 진행하고 있는 팀프로젝트에서 아이디,비밀번호 중복 및 패턴 확인이나
장바구니에 상품 추가, 위시리스트 추가 등에 사용하면 좋을것 같다!
'JSP' 카테고리의 다른 글
| AJAX (3) - error 처리 (0) | 2022.03.09 |
|---|---|
| AJAX (2) - form 데이터를 한번에 옮기기 (0) | 2022.03.09 |
| JQuery (on 이벤트2) (0) | 2022.03.04 |
| JQuery (on 이벤트) (0) | 2022.03.04 |
| JQuery (sumit() 함수) (0) | 2022.03.04 |
