[Web_JSP] 10

●​ Ajax(Asynchronous Javascript and XML)

- Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지 일부분만을 갱신할 수 있고

- 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

- 이 때 서버와 아래와 같은 데이터를 주고 받을 수 있다.

 

1. JSON

2. XML

3. HTML

4. 텍스트 등

 

 

 

●​ Ajax의 특징

1. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.

2. 반복적인 데이터를 요청하면 느려지거나 작동하지 않게 된다(pending).

3. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보내거나 받을 수 있다.

4. 페이지 이동이 없기 때문에 히스토리 관리가 안된다.

 

 

 

●​ Ajax 문법(jQuery)

$.ajax({

    url: "요청할 경로",

    type: "GET, POST 등",

    data: {키:value,...},

    contentType: "data에 작성할 타입",

    dataType: "돌려받을 응답 값의 타입",

    success: function(응답 값을 받을 매개변수){성공 시 실행할 문장 작성},

    error: function(request, status, error){오류 발생 시 실행할 문장 작성}

});

 

 

---

 

●​ EL문과 JSTL: 페이지 가독성 상승

- 자바 구문을 라이브러리 형태로 만들어 놓고 필요할 때마다 태그로 꺼내쓰는 기술이다.

- JSP페이지 내에서 자바코드와 HTML 코드가 섞여 있으면 가독성이 떨어지고 복잡해진다.

- EL문과 JSTL문을 사용하면 HTML 태그로만 구성된 일관된 소스코드를 볼 수 있다는 장점이 있다.

 

 

 

●​ EL(Expression Language)

- 값을 간결하고 간편하게 출력할 수 있도록 해주는 기술

 

1. 값을 찾을 때에는 작은 Scope에서 큰 Scope로 찾는다.

page > request > session > application

 

2. 원하는 Scope의 변수를 찾을 때 아래와 같이 사용한다.

- ${param.name} : GET방식의 쿼리 스트링으로 전달된 파라미터 중 name을 찾는다.

- ${requestScope.name} : request.setAttribute()로 저장된 파라미터 중 name을 찾는다.

- ${sessionScope.name} : session.setAttribute()로 저장된 데이터 중 name을 찾는다.

 

 

 

●​ EL 연산자

1. %, mod

2. &&, and

3. ||, or

4. >, lt

5. <, gt

6. >=, le1. <=, ge

7. ==, eq

8. !=, ne

9. empty : 값이 비어있으면 true, 값이 있으면 false

10. !, not

 

 

 

---

 

실습

- [Web_JSP] 09 이어서

 

1. MemberDAO.java

package com.member.domain.dao;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import com.member.domain.vo.MemberVO;
import com.mybatis.config.MyBatisConfig;

public class MemberDAO {
	SqlSessionFactory sqlSessionFactory = MyBatisConfig.getSqlSessionFactory();
	SqlSession sqlSession;
	
	public MemberDAO() {
		sqlSession = sqlSessionFactory.openSession(true);
	} 
	
	//회원가입
	public void join(MemberVO memberVO) {
		sqlSession.insert("Member.join", memberVO);
	}
	
	//아이디 중복검사
	public boolean checkId(String memberId) {
		return (Integer)sqlSession.selectOne("Member.checkId", memberId) == 1;
	}
}

 

 

 

2. MemberMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http//mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="Member">
	<!-- 회원가입 -->
	<insert id="join" parameterType="memberVO">
		insert into tbl_member
		(member_id, member_name, member_pw, member_gender, member_address, member_address_detail)
		values(#{memberId}, #{memberName}, #{memberPw}, #{memberGender}, #{memberAddress}, #{memberAddressDetail})
	</insert>
	
	<!-- 아이디 중복검사 -->
	<!-- 기본 자료형은 앞에 _를 붙이고, 클래스 자료형은 앞글자를 소문자로만 바꿔준다. -->
	<select id="checkId" parameterType="string" resultType="int">
		select count(member_id) from tbl_member where member_id = #{memberId}
	</select>
	
</mapper>

 

 

 

3. MemberFrontController.java

package com.member;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.ibatis.session.SqlSession;

import com.member.action.ActionInfo;
import com.member.domain.vo.MemberVO;
import com.mybatis.config.MyBatisConfig;

public class MemberFrontController extends HttpServlet{
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doProcess(req, resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doProcess(req, resp);
	}
 
	protected void doProcess(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String requestURL = req.getRequestURI();
		String command = requestURL.substring(requestURL.lastIndexOf("/") + 1);
		ActionInfo actionInfo = null;
		
		if(command.equals("JoinOk.me")) {
			actionInfo = new MemberJoinOk().execute(req, resp);
			
		} else if(command.equals("Join.me")) {
			actionInfo = new ActionInfo();
			actionInfo.setRedirect(true);
			actionInfo.setPath(req.getContextPath() + "/join.jsp");
		} else if(command.equals("CheckIdOk.me")) {
			new CheckIdOk().execute(req, resp);
		} else {
			// 404 일 때 출력할 에러 페이지 경로 작성
		}
		
		
		if(actionInfo != null) {
			if(actionInfo.isRedirect()) {
				resp.sendRedirect(actionInfo.getPath());
			}else {
				RequestDispatcher dispatcher = req.getRequestDispatcher(actionInfo.getPath());
				dispatcher.forward(req, resp);
			}
		}
		
	}
}

 

 

 

4. CheckIdOk.java

package com.member;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONObject;

import com.member.action.Action;
import com.member.action.ActionInfo; 
import com.member.domain.dao.MemberDAO;

public class CheckIdOk implements Action {

	@Override
	public ActionInfo execute(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		req.setCharacterEncoding("UTF-8");
		PrintWriter out = resp.getWriter();
		MemberDAO memberDAO = new MemberDAO();
		JSONObject resultJSON = new JSONObject();
		
		String memberId = req.getParameter("memberId");
		resultJSON.put("check", memberDAO.checkId(memberId));
		
		out.print(resultJSON.toJSONString());
		out.close();
		return null;
	}

}

 

 

 

5. joinSuccess.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 성공</title>
</head>
<body>
	<h1><%=request.getParameter("memberName")%>님 회원가입에 성공하셨습니다!</h1>
</body>
</html>

 

 

 

6. join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
	<section>
		<form action="JoinOk.me" name="joinForm" method="post">
			<p>
				<label>
					아이디 : <input type="text" name="memberId">
				</label>
				<input type="button" value="중복확인" onclick="checkId()">
				<p id="result"></p>
			</p>
			<p>
				<label>
					이름 : <input type="text" name="memberName">
				</label>
			</p>
			<p>
				<label>
					비밀번호 : <input type="password" name="memberPw">
				</label>
			</p>
			<p>
				<label>
					비밀번호 확인 : <input type="password" id="memberPw">
				</label>
			</p>
			<p>
				성별 : 
				<label>
					남자 <input type="radio" name="memberGender" value="M">
				</label>
				<label>
					여자 <input type="radio" name="memberGender" value="W">
				</label>
				<label>
					선택안함 <input type="radio" name="memberGender" value="N">
				</label>
			</p>
			<p>
				<input type="text" id="sample5_address" placeholder="주소" name="memberAddress">
				<input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br>
				<input type="text" name="memberAddressDetail" placeholder="상세 주소">
				<div id="map" style="width:300px;height:300px;margin-top:10px;display:none"></div>
			</p>
			<p>
				<input type="button" value="가입 완료" onclick="join()">
			</p>
		</form>
	</section>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=37a9abf54fb9bec320d474d06c964451&libraries=services"></script>
<script>
	function checkId(){
		$.ajax({
			url: "/day07/CheckIdOk.me",
			type: "get",
			data: {memberId: $("input[name='memberId']").val()},
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function(result){
				if(result.check){
					$("p#result").text("중복된 아이디입니다.");
				}else{
					$("p#result").text("사용가능한 아이디입니다.");
				}
			},
			error: function(request, status, error){
				console.log("실패..");
				console.log(request);
				console.log(status);
				console.log(error);
			}
		});
	}

	function join(){
		joinForm.submit();
	}

    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
            level: 5 // 지도의 확대 레벨
        };

    //지도를 미리 생성
    var map = new daum.maps.Map(mapContainer, mapOption);
    //주소-좌표 변환 객체를 생성
    var geocoder = new daum.maps.services.Geocoder();
    //마커를 미리 생성
    var marker = new daum.maps.Marker({
        position: new daum.maps.LatLng(37.537187, 127.005476),
        map: map
    });


    function sample5_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                var addr = data.address; // 최종 주소 변수

                // 주소 정보를 해당 필드에 넣는다.
                document.getElementById("sample5_address").value = addr;
                // 주소로 상세 정보를 검색
                geocoder.addressSearch(data.address, function(results, status) {
                    // 정상적으로 검색이 완료됐으면
                    if (status === daum.maps.services.Status.OK) {

                        var result = results[0]; //첫번째 결과의 값을 활용

                        // 해당 주소에 대한 좌표를 받아서
                        var coords = new daum.maps.LatLng(result.y, result.x);
                        // 지도를 보여준다.
                        mapContainer.style.display = "block";
                        map.relayout();
                        // 지도 중심을 변경한다.
                        map.setCenter(coords);
                        // 마커를 결과값으로 받은 위치로 옮긴다.
                        marker.setPosition(coords)
                    }
                });
            }
        }).open();
    }
</script>
</html>