Call XML and JSON from HTML

XML from HTML

<!--xml파일-->
<data>
	<person no="1">
		<name>최성현</name>
		<addr>서울시</addr>
	</person>
	<person no="2">
		<name>장순영</name>
		<addr>경기도</addr>
	</person>
	<person no="3">
		<name>최진평</name>
		<addr>제주시</addr>
</data>
  • xml 파일(data1.xml) 생성
<!--html파일-->
<body>
	<button type="button" id="btn1">data1.xml</button>

	<div id="show"></div>
</body>
  • html 파일의 <body>
<script>
	$("#btn1").click(function(){
		$.ajax({
			type:"get",
			url:"data1.xml",
			dataType:"xml",
				success:function(rsps){
					var s="";
					$(rsps).find("person").each(function(i,ele){
						var n=$(ele);
								
						s+="<div>";
						s+="번호:"+n.attr("no")+",";
						s+="이름:"+n.find("name").text()+",";
						s+="주소:"+n.find("addr").text();
						s+="</div>";
					},
					statusCode:{
						404:function(){
							alert("xml파일을 찾을수 없어요!!!");
						},
						500:function(){
							alert("서버오류...코드를 다시한번 보세요");
						}
					});
							
					$("#show").html(s);
				}
			});	
		});
</script>
  • html에서 btn1 버튼 클릭 시 ajax 작동
  • ajax에서 필요한 요소는 type, url, dataType, success function 등 있음
  • type은 get과 post 방식 중 선택
  • get : 서버로부터 데이터를 반환 반환 받으며, 민감한 정보가 없고 안전한 요청일 시 사용
  • post : 서버에 데이터를 제출하며, 민감한 정보가 포함되고 미확인된 요청일 시 사용
  • success function은 파일 불러오기에 성공 시 작동하는 함수
  • statusCode는 오류 발생 시 오류의 종류에 따라 작동하는 함수 정의
  • xml에서는 each() 함수(반복문) 사용 시 element를 불러올 때 $(element)와 같이 코드 사용

JSON from HTML

//json파일
[
	{"num":10,"sangpum":"남바완","photo":"../image/logoImg/a02.png"},
	{"num":11,"sangpum":"남바투","photo":"../image/logoImg/a03.png"},
	{"num":12,"sangpum":"남바쓰리","photo":"../image/logoImg/a04.png"},
	{"num":13,"sangpum":"남바포","photo":"../image/logoImg/a05.png"},
	{"num":14,"sangpum":"남바파이브","photo":"../image/logoImg/a06.png"}
]
  • json 파일에 여러 속성을 포함하는 배열 생성
<body>
	<button type="button" class="btn btn-outline-info" id="btn2">data1.json</button>
			
	<div id="show"></div>
</body>
<script>
	$("#btn2").click(function(){
		$.ajax({
			type:"get",
			url:"data1.json",
			dataType:"json",
			success:function(rsps){
				var s="";
							
				//json에서 인자로 넘어온 data는 배열타입
				$.each(rsps,function(i,item){
					s+="<div>";
					s+="index:"+i+"<br>";
					s+="num:"+item.num+"<br>";
								s+="sangpum:"+item.sangpum+"<br>";
					s+="<img src='"+item.photo+"'>";
					s+="</div>";
				});
							
				$("#show").html(s);
			}
		});
	});
</script>
  • json에서는 each() 반복문 사용 시 element 불러올 때 element.(속성 명)과 같이 코드 사용
  • xml과 json에서 each() 함수를 찾는 방법과 사용하는 방법(인자 값 입력 등)의 차이 살펴보기 바람

How to Use JSP

  • jsp는 html5 구조에 자바 코드를 사용할 수 있는 서버 언어

Annotation

<body>
	<!-- 주석1: 소스보기에서는 보인다 -->
	<%--jsp주석: 소스보기에서도 안보인다 --%>
</body>
  • 기본 주석 : 소스 보기에서는 드러남
  • jsp 주석 : 소스 보기에서도 드러나지 않음

Servlet

  • 서블릿은 확장자가 자바이며, 자바의 클래스
  • html, css, json도 사용 가능

Scriptlet & Expression

<body>
	<%
	<!--자바코드 사용가능-->
	 %>

	<%!
	<!--자바 변수,메서드 선언가능
		전역에서 사용가능-->
	%>
</body>
  • 스크립트릿 내에서는 자바 코드 사용 가능
  • 일반적 자바 코드와 같이 위에서부터 순차적으로 독해
  • 일반 스크립트릿 표기에서 !를 추가하면(<%! %>) 선언문으로 인식되며, 이곳에 선언된 변수와 메서드는 독해 순서와 무관하게 전역에서 사용 가능
<body>
		<%= <!--표현식--> >
</body>
  • 스크립트릿 내에서 선언한 변수나 메서드를 표현하려면 표현식 코드(<%= %>) 사용
  • 앞뒤의 문자열과 합할 때 + 사용하지 않음

Write Arrays in JSP

<body>
	<%
	//배열선언
	String [] colors={"green","magenta","gray","yellow","cyan"};
	//제목
	String title="배열출력";
	%>
	<b><%=title %></b>
	<table>
		<tr style="text-align: center;">
			<th>번호</th>
			<th>색상</th>
		</tr>
		<%
			for(int i=0;i<colors.length;i++)
			{%>
				<tr>
					<td align="center"><%=i+1 %></td>				
					<td>
						<b style="color: <%=colors[i] %>"><%=colors[i] %></b>
					</td>
				</tr>
			<%}
		%>
	</table>
</body>
  • 스크립트릿 내에서는 자바와 같이 배열 선언
  • 자바 요소를 포함하는 곳에만 스크립트릿과 표현식 사용 가능하며, html 요소를 사용하기 위해서는 스크립트릿을 벗어나야 함

Application

Multiplication Table

<body>
	<table class="table table-bordered">
		<tr>
			<td colspan="8" align="center">
				<b style="font-size: 2em;">전체 구구단</b>
			</td>
		</tr>
		<tr>
			<%
			for(int dan=2;dan<=9;dan++)
			{%>
				<td align="center"><%=dan %>단</td>
			<%}
			%>
		</tr>	
			<%
			for(int i=1;i<=9;i++)
			{%>
				<tr>
					<%
					for(int dan=2;dan<=9;dan++)
					{%>
						<td align="center">
							<%=dan %>x<%=i %>=<%=dan*i %>
						</td>
					<%}
					%>
				</tr>
			<%}
			%>
	</table>
</body>
  • 구구단 테이블을 만들기 위해 이중 for문을 사용하며 스크립트릿과 표현식 연습

Some Table

<body>
	<!-- 01~20.png 4행5열로 출력 -->
	<table>
		<%
		int n=0;
		for(int i=0;i<4;i++)
		{%>
			<tr>
				<%
				for(int j=0;j<5;j++)
				{
					n++;
				%>
					<td><img src="../image/cartoon/<%=n<10?"0"+n:n %>.png"></td>
				<%}
				%>
			</tr>
		<%}
		%>
	</table>
</body>
  • 4행 5열의 테이블을 만들며 스크립트릿과 표현식 연습

Include & Forward

Include

  • include한 파일 전부 혹은 인자를 통해 해당 인자가 포함된 일부 태그를 자신의 주소로 호출
<body>
	<!--구구단가져오기-->
	<jsp:include page="./guguWrite.jsp"/>

	<!--퀴즈 이미지 가져오기-->
	<jsp:include page="./quizArrImage.jsp"/>
</body>
  • 인자 값 없이 파일을 include하면 해당 파일 전체 요소를 호출
<body>
	<!--oneInclude.jsp를 include하기-->
	<jsp:include page="./oneInclude.jsp">
		<jsp:param value="안녕 오늘은 월요일이야!" name="msg"/>
		<jsp:param value="../image/cartoon/05.png" name="imgname"/>
	</jsp:include>
</body>
  • <jsp:param> 태그에서 name과 value를 통해 include할 인자 값 생성(태그로 인자 생성)
<body>
	<%
	String msg=request.getParameter("msg");
	String iname=request.getParameter("imgname");
	%>
		
	<h3>전달받은 메세지: <%=msg %></h3>
	<h3>전달받은 이미지</h3>
	<img src="<%=iname %>">
</body>
  • 스크립트릿 내에서 request.getParameter() 함수를 통해, 본 파일에 include 시도한 파일에서 인자들의 value 값을 호출(이 함수는 String만을 반환)
  • 호출된 인자 값이 포함된 ‘태그’는, include 시도한 파일의 ‘인자 값’으로 반환

Forward

  • forward한 파일 전체 요소를 자신의 주소로 호출하되, forward 시도한 파일의 주소 값은 유지
  • 따라서 하나의 파일에는 하나의 forward밖에 불가능
<body>
	<h1>이문장이 보일까요?</h1>
	<jsp:forward page="threeForward.jsp"/>
</body>
  • forward를 시도한 파일의 요소는 소스 보기에 드러나지 않음
<body>
	<h2>이곳은 threeForward입니다</h2>
	<img src="../image/cartoon/09.png">
</body>
  • forward 시도한 파일을 실행 시 forward 당한 위 파일 전체 요소가 실행
  • 다만 주소 값은 forward 시도한 파일의 주소로 유지
<body>
	<jsp:forward page="./fourForward.jsp">
		<jsp:param value="migyu" name="name"/>
		<jsp:param value="seoul" name="addr"/>
	</jsp:forward>
</body>
  • forward도 인자 값 부여 가능
<body>
	<%
	String name=request.getParameter("name");
	String addr=request.getParameter("addr");
	%>
		
	<b><%=name %>님의 주소는 <%=addr %>입니다</b>
</body>
  • request.getParameter() 함수로 forward 시도한 파일의 value 값 호출하여 표현식으로 표현
  • forward 시도한 파일 실행 시 forward 당한 본 파일의 전체 요소가 출력

Form Action

<body>
	<form action="oneAction.jsp" method="post">
		<table>			
			<tr>
				<th>이름</th>
				<td>
					<input type="text" name="irum" placeholder="이름" required="required"
					class="form-control"> <!--required:null값체크 submit에서만-->
				</td>
			</tr>
			<tr>
				<th>비밀번호</th>
				<td>
					<input type="text" name="pass" placeholder="비밀번호" required="required"
					class="form-control">
				</td>
			</tr>
			<tr>
				<th>운전면허</th>
				<td>
					<input type="checkbox" name="lic">운전면허
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="서버로전송"> <!--전송을 위해서는submit만 가능-->
				</td>
			</tr>
		</table>
	</form>
</body>
  • <form>은 내부의 태그로 인해 발생한 선택 및 입력 툴에 입력된 값을 DB에 전달하기 위한 태그
  • 이를 위해서는 submit 타입의 <input> 태그가 반드시 존재
  • <form> 태그의 action 속성에 값을 전달할 DB 혹은 파일의 경로 부여
  • <form> 태그의 method 속성은 get, post 중 선택 (get : 민감한 정보가 없고 안전한 요청일 시 사용 / post : 민감한 정보가 포함되고 미확인된 요청일 시 사용)
  • 각 <input> 태그 속성 중 required는 submit 시 자료 값이 null이면(입력 안 할 시) 입력을 요구하며 submit되지 않음
  • submit을 위해서는 일반 <input>이나 <button>은 사용 불가
<body>
	<%
	String name=request.getParameter("irum");
	String pass=request.getParameter("pass");
	String lic=request.getParameter("lic");
	%>
		
	<h3>결과값 출력</h3>
	이름: <%=name %><br>
	비밀번호: <%=pass %><br>
	운전면허 여부: <%=lic==null?"없음":"있음" %>
</body>
  • 입력 혹은 선택된 자료 값은 전송된 DB나 파일에서 request.getParameter() 함수를 통해(인자 값은 <input>태그의 name 속성) 호출
<body>
	<form action="twoAction.jsp" method="post">
		<table>
			<tr>
				<th>조장1순위</th>
				<td>
					<select size="1" name="person">
						<option value="성신">성신</option>
						<option value="민규">민규</option>
						<option value="현규">현규</option>
					</select>
				</td>
			</tr>
			<tr>
				<th>차기조장</th>
				<td>
					<select size="3" name="person2" multiple="multiple">
						<option value="성신">성신</option>
						<option value="민규">민규</option>
						<option value="현규">현규</option>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="전송">
				</td>
			</tr>
		</table>
	</form>
</body>
  • <select> 선택지도 마찬가지
  • <select> 태그는 각 <option>이 아닌 전체 <select>에 name 부여
  • multiple 속성은 다중 선택 가능하게 함
<body>
	<%
	String per1=request.getParameter("person");
	String [] per2=request.getParameterValues("person2");
	%>
		
	조장1순위: <%=per1 %>
		
	예비조장:
	<%
	if(per2==null)
	{%>
		<b style="color: red;">예비조장 없음</b>
	<%}else
	{
		for(int i=0;i<per2.length;i++)
		{%>
			[<%=per2[i] %>]&nbsp;
		<%}
		%>
		<b>총 <%=per2.length %>명의 예비조장 있음</b>
		<%
	}
	%>
</body>
  • 다중 선택 가능한 선택 툴(checkbox,select 등)은 선택된 값들을 배열로 호출해야 함
  • 이를 위해서는 request.getParameterValues() 함수를 사용하며, 이는 호출한 값들을 String 타입의 배열로 생성
  • 배열 값들을 표현식으로 표현하기 위해서는 스크립트릿을 이용해 for문을 사용해야 함
profile
초보개발자

1개의 댓글

comment-user-thumbnail
2023년 7월 31일

개발자로서 성장하는 데 큰 도움이 된 글이었습니다. 감사합니다.

답글 달기