728x90
SMALL
emp_search_form_xml.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>emp_search_form_xml</title>
<style>
#items >div {
display : inline-block;
width : 200px;
height : 150px;
padding : 15px;
box-sizing : border-box;
box-shadow : 2px 2px 3px #999;
border-radius : 9px;
background-color:#fee;
margin-bottom: 20px;
margin-right:7px;
}
.emp > div:first-child{
color : #00f;
border-bottom : 1px dotted #555;
}
.emp > div:nth-child(2){
font-weight : bolder;
}
</style>
</head>
<body>
<div id='emp_search_form'>
<h2>사원조회(XML)</h2>
<form name='frm' method='post' id='frm'>
<label>검색어를 입력하세요 </label>
<input type='text' name='findStr' size='30' placeholder ='성명, 이메일, 연락처로 검색' />
<input type='button' value='검색' id='btnFind'/>
</form>
<hr/>
<!-- 실행된 값을 표시 -->
<div id='items'></div>
</div>
<script>
$('#btnFind').on('click', function(){
let param = $('#frm').serialize(); //form태그안에있는 정보들을 직렬화(p=v & p=v)
let req = new XMLHttpRequest(); //중요한부분
//1 오픈
req.open('get', './ajax/emp_search_xml.jsp?' + param); //get타입으로 요청, **에게 자료요청 (get타입은 ?문자열형태라 간단함)
//2 상태값체크
req.onreadystatechange=function(){
//console.log(req.status + "," + req.readyState);
//200 : 정상요청(송신) & 4 : 응답이 정상적으로 왔다(수신)
if(req.status==200 && req.readyState==4){
let xml = req.responseXML; //xml로 읽어들일경우 text읽어들이면 인식을 못하기때문에 responseText를 responseXML로 바꿔준다 이를 임의의변수 xml로 저장, 응답정보를 xml로 읽겠다
let emps = xml.getElementsByTagName("emp");//emp태그들을 배열로 넘겨받음
let result = '';
for(var i=0; i<emps.length; i++){
var emp = emps.item(i);
var id = emp.getElementsByTagName("id").item(0).firstChild.nodeValue; //items안에 있는 첫번째태그안의 문자열
var name = emp.getElementsByTagName("name").item(0).firstChild.nodeValue; //items안에 있는 첫번째태그안의 문자열
var email= emp.getElementsByTagName("email").item(0).firstChild.nodeValue; //items안에 있는 첫번째태그안의 문자열
var phone = emp.getElementsByTagName("phone").item(0).firstChild.nodeValue; //items안에 있는 첫번째태그안의 문자열
var salary = emp.getElementsByTagName("salary").item(0).firstChild.nodeValue; //items안에 있는 첫번째태그안의 문자열
result += "<div class = 'emp'>"
+ "<div>" + id + "</div>"
+ "<div>" + name + "</div>"
+ "<div>" + email + "</div>"
+ "<div>" + phone + "</div>"
+ "<div>" + salary + "</div>"
+ "</div>";
}
$('#items').html(result); //외부 XML파서를 사용하지 않는 경우
}
}
//3 전송, 요청 실행
req.send();
})
</script>
</body>
</html>
emp_search_xml.jsp
<?xml version ='1.0' encoding='UTF-8' ?>
<%@page import="bean.EmpVo"%>
<%@page import="java.util.List"%>
<%@page import="bean.EmpDao"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*xml타입을 만들기위한 세가지 형태
/1) <?xml version ='1.0' encoding='UTF-8' ?>
2) text/xml로 수정
3) 임의의 태그를 선언해 자료를 구조화
*/
%>
<%
String findStr = request.getParameter("findStr");
EmpDao dao = new EmpDao();
List<EmpVo> list = dao.search(findStr);
%>
<emps>
<% for (EmpVo vo: list) { %>
<emp>
<id><%=vo.getEmployee_id()%></id>
<name><%=vo.getFirst_name()%></name>
<email><%=vo.getEmail()%></email>
<phone><%=vo.getPhone_number()%></phone>
<salary><%=vo.getSalary()%></salary>
</emp>
<% } %>
</emps>
얘도 빨간부분만 새로고침됨
다른 페이지로 인식해주기위해 색을 바꿔줌
xml타입을 만들기위한 세가지 형태
1) <?xml version ='1.0' encoding='UTF-8' ?>
2) text/xml로 수정
3) 임의의 태그를 선언해 자료를 구조화
728x90
LIST
'Front > AJAX' 카테고리의 다른 글
| 헷갈려서 적는 ajax-controller 데이터 보내고 받는법 (0) | 2021.11.05 |
|---|---|
| status(요청상태) (0) | 2020.12.09 |
| 사원조회(JSON) (0) | 2020.12.09 |
| 사원정보조회 (0) | 2020.12.09 |
| 정수확인test (0) | 2020.12.09 |
댓글