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] %>]
<%}
%>
<b>총 <%=per2.length %>명의 예비조장 있음</b>
<%
}
%>
</body>- 다중 선택 가능한 선택 툴(checkbox,select 등)은 선택된 값들을 배열로 호출해야 함
- 이를 위해서는 request.getParameterValues() 함수를 사용하며, 이는 호출한 값들을 String 타입의 배열로 생성
- 배열 값들을 표현식으로 표현하기 위해서는 스크립트릿을 이용해 for문을 사용해야 함
초보개발자
개발자로서 성장하는 데 큰 도움이 된 글이었습니다. 감사합니다.