Ajax를 이용하여 GET방식으로 요청해 보도록 하겠습니다.
우선 기본적인 것 부터 해보도록 하죠. 응답데이터가 텍스트인 경우입니다.
처음 실행하면 결과화면과 같은 view가 출력됩니다. 입력상자에 아이디를 입력하고 검증결과를 출력해 볼 것입니다. 검증을 처리하는 리소스는 "test.jsp"로 DB에서 검증해야 하나 우선 문자열 비교만 해서 검증합니다. 입력한 아이디가 "jang"이면 "사용가능한아이디" 그렇지 않을 경우 "사용불가능한아이디"를 response합니다.
결과 화면을 보면 입력한 아이디가 그대로 입력상자에 나타나 있습니다. 이는 전체 페이지가 로딩되지 않고 [Ajax테스트] 버튼 아래의 일부분만 갱신됐다는 것을 의미합니다. 페이지 전체가 reload되지 않았기 때문에 입력된 데이터가 그대로 남아있는 것입니다.
새로운 ajaxtest라는 새로운 Dynamic Web project를 추가하고 ajax폴더를 작성한 후 ajaxtest01.jsp파일을 추가합니다.
다음과 같이 코드를 작성합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function runAjax(){
//비동기통신을 할 수 있는 객체를 생성 - XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
console.log("정상출력:"+xhr.readyState);
if(xhr.readyState==4 && xhr.status==200){
document.getElementById("mydiv").innerHTML = xhr.responseText;
}
}
//Get방식으로 요청하기
xhr.open("GET", "test.jsp?id="+myform.id.value, true);
xhr.send();
}
</script>
</head>
<body>
<h1>Ajax테스트 하기</h1>
<form name="myform">
<input type="text" name="id">
</form>
<button type="button" onclick="runAjax()">Ajax테스트</button>
<div id="mydiv"></div>
</body>
</html>- runAjax라는 함수는 "Ajax테스트"버튼이 click될때 호출될 수 있도록 설정하였습니다.
- runAjax함수에서는 비동기 통신을 하기 위해 XMLHttpRequest객체를 생성하고 onreadystatechange
이벤트가 발생하면 정상적으로 응답을 받아올 수 있는 상태인지 체크하고 원하는 작업을 할 수
있도록 처리(이 부분은 모든 Ajax처리시에 동일하게 해야 하는 작업입니다.)
- GET방식으로 test.jsp를 요청한 후 요청결과를 비동기 방식으로 동작할 수 있도록 설정
[Ajax요청시에 응답될 페이지]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>Ajax로 요청될 데이터</h3>
<%if(request.getParameter("id").equals("jang")){ %>
<h3>사용가능한아이디</h3>
<%}else{ %>
<h3>사용불가능한아이디</h3>
<%} %>
</body>
</html>[결과화면]
[아이디를 jang을 입력한 경우]
[아이디를 jang을 입력하지 않은 경우]
개발자도구를 실행한 후 다시 실행한 후 콘솔을 확인하면 다음과 같이 readyState값이 출력된 것을 확인할 수 있습니다. 이는 브라우저 종류별로 다르게 출력됩니다.
'웹 > Ajax' 카테고리의 다른 글
| POST방식으로 Ajax요청하기 (0) | 2019.08.12 |
|---|---|
| Ajax문법 (0) | 2019.08.12 |
| Ajax의 개요 (0) | 2019.08.11 |