ajax - 다음 주소 API(2022-10-26)

3층 1구역 - 개발의 장/ajax통신

ajax - 다음 주소 API(2022-10-26)

상이태상 2022. 10. 26. 10:22

1. 서론

복잡한 걸 했다면 머리 식힐 겸 간단한걸 해보도록 하자.

'다음' 에서 제공하는 주소 API를 이용하여 주소를 기입해보도록 하자.

2. 본론

아무 검색 엔진에 다음 주소라고 쳐보도록 하자.

필자는 네이버에서 검색했다.

그러면 위와 같이 나올텐데 클릭하면 가이드로 알아서 이동한다.

들어가서 잘 둘러보면 필요한 코드들이 눈에 보이니 잘 참고해서 사용하도록 하자.

register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>member</title>
<!-- 
	클라이언트 : doubleCheck 자바스크립트 함수에서 서버로 사용자가 입력한 아이디를 갖고 요청
	서버 : doubleCheck 요청을 받아 doubleCheck 자바 메서드호출
	서버 : server객체 내 doubleCheck 자바 메서드 호출
	서버 : dao 객체 내 doubleCheck 자바 메서드 호출
	서버 : testMapper.xml 파일에서 <select>태그로 중복 확인 쿼리문 동작
	서버 : 클라이언트 반환 데이터 "중복된 아이디" or "사용가능 아이디"
	클라이언트 : id="doubleCheckMsg" 태그에 출력
 -->
 
 <!-- 
		클라이언트 : sendAuth 자바스크립트 함수에서 서버로 사용자가 입력한 이메일을 갖고 요청 
		서버 : sendAuth 요청을 받아 sendAuth 자바 메서드 호출
		서버 : sendAuth 메서드 안에서 6자리의 랜덤 값 생성 후 클라이언트에게 응답
		클라이언트 : id="emailMsg" 태그에 출력.
		
		클라이언트 : checkAuth 자바스크립트 함수에서 서버로 사용자가 입력한 인증번호를 갖고 요청 
		서버 : checkAuth 요청을 받아 checkAuth 자바 메서드 호출
		서버 : checkAuth 메서드 안에서 인증번호 검증 후 클라이언트에게 응답
		서버 : 응답 메시지 : "인증번호를 입력하세요" or "인증 실패" or "인증 성공"
		클라이언트 : id="emailMsg" 태그에 출력.
	-->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
	var req;
	function doubleCheck(){
		req = new XMLHttpRequest();
		req.onreadystatechange = doubleCheckMsg
		var i = document.getElementById('id').value
		req.open('get', 'doubleCheck?id='+i)
		req.send(null)
	}
	function doubleCheckMsg(){
		if(req.readyState == 4 && req.status == 200){
			var doubleCheckMsg = document.getElementById('doubleCheckMsg')
			doubleCheckMsg.innerHTML = req.responseText
		}
	}
	
	
	function sendAuth(){
		req = new XMLHttpRequest();
		req.onreadystatechange = emailMsg
		var email = document.getElementById('email').value
		req.open('post', 'sendAuth')
		req.send(email)
	}
	function checkAuth(){
		req = new XMLHttpRequest();
		req.onreadystatechange = emailMsg
		var authNumber = document.getElementById('authNumber').value
		req.open('post', 'checkAuth')
		req.send(authNumber)
	}
	function emailMsg(){
		if(req.readyState == 4 && req.status == 200){
			var emailMsg = document.getElementById('emailMsg')
			emailMsg.innerHTML = req.responseText
		}
	}
	
	function daumPost() {
		new daum.Postcode({
	        oncomplete: function(data) {
	            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
	            // 예제를 참고하여 다양한 활용법을 확인해 보세요.
	            if(data.userSelectedType === 'R'){
	            	addr = data.roadAddress;
	            }else{
	            	addr = data.jibunAddress;
	            }
	            document.getElementById('postcode').value = data.zonecode
	            document.getElementById('address').value = addr
	            document.getElementById('detailAddress').focus();
	            console.log(data.zonecode)
	            console.log(addr)
	        }
	    }).open();
	}
	  
	
</script>
</head>
<body>
<c:if test="${not empty msg }" >
	<script>alert("${msg}");</script>
</c:if>

	<font id="doubleCheckMsg" color="red"></font><br>
	<font id="emailMsg" color="blue"></font>
	<form action="register" method="post">
		<input type="text" name="id" id="id" placeholder="아이디">
		<input type="button" value="중복 확인" onclick="doubleCheck()">
		<br>
		<input type="password" name="pw" placeholder="비밀번호"><br>
		<input type="password" name="confirmPw" placeholder="비밀번호 확인"><br>
		<input type="text" name="name" placeholder="이름"><br>
		
		<input type="text" name="email" id="email" placeholder="이메일">
		<input type="button" value="인증 번호 전송" onclick="sendAuth()"><br>
		
		<input type="text" name="authNumber" id="authNumber" placeholder="인증 번호">
		<input type="button" value="인증 번호 확인" onclick="checkAuth()"><br>
		
		<input type="text" id="postcode" placeholder="우편번호" readonly="readonly">
		<input type="button" onclick="daumPost()" value="우편번호 찾기"><br>
		<input type="text" id="address" placeholder="주소" readonly="readonly"><br>
		<input type="text" id="detailAddress" placeholder="상세주소">
		
		<input type="submit" value="회원 가입" >
		<input type="button" value="취소" onclick="location.href='index'">
	</form>
</body>
</html>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function daumPost() {
		new daum.Postcode({
	        oncomplete: function(data) {
	            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
	            // 예제를 참고하여 다양한 활용법을 확인해 보세요.
	            if(data.userSelectedType === 'R'){
	            	addr = data.roadAddress;
	            }else{
	            	addr = data.jibunAddress;
	            }
	            document.getElementById('postcode').value = data.zonecode
	            document.getElementById('address').value = addr
	            document.getElementById('detailAddress').focus();
	            console.log(data.zonecode)
	            console.log(addr)
	        }
	    }).open();
	}
    </script>
    
    <input type="text" id="postcode" placeholder="우편번호" readonly="readonly">
		<input type="button" onclick="daumPost()" value="우편번호 찾기"><br>
		<input type="text" id="address" placeholder="주소" readonly="readonly"><br>
		<input type="text" id="detailAddress" placeholder="상세주소">

잘 긁어와서 위 코드만 기존 register.jsp에 추가시켰다.

실행해보도록 하자.