AJAX를 이요한 서버 비동기 통신.
수업중에 진행 중인 Community project의 index중
Content 1 영역에 정보를 비동기로 통신하는 코드를 작성했다.
회원의 이메일을 입력받아 정보를 출력하는 DIV박스
1. jsp 페이지 상에서 수행
<h3>회원 정보 조회(AJAX)</h3>
<p>이메일을 입력받아 일치하는 회원 정보 출력</p>
이메일 : <input type="text" name="email" id="in1">
<button id="select1">조회</button>
<div id="result1" style="height:150px;"></div>
<hr>- display : inline-block으로 세팅되있기 떄문에 입력 상자 바로 옆에 조회 버튼이 있다.
js에서 jquery-ajax를 이용해 WebServlet과 비동기 통신 수행.
document.getElementById("select1").addEventListener("click",function(){
const input = document.getElementById("in1");
const div =document.getElementById("result1");
//ajax 코드 작성
$.ajax({
url:"member/selectOne",
//ajax 필수 입력 속성 (url) .서블릿으로 요청받을 주소
data:{"memberEmail":input.value},
//서블릿으로 전달할 데이터가 있을때 작성
// JS객체형태로 전달 {KEY:VALUE}
type:"POST",
//body부에 data가 포함되서 전달되는 방식 이건 뭐...당연히 할지
//json data 타입 지정
dataType:"JSON", //dataType : 응답 데이터 형식을 지정
//이거 답변 받을 떄 JSON이라고 인지 시켜주는거라
//JSON.parse를 사용하지 않아도 괜찮다. 개꿀
success:function(member){
// 수행 성공 했을 경우에 실행되는 함수
console.log(member);
//테스트할려고 작성한 log
//js 객체 형태 모양인 문자열
// dataType: "JSON" 추가 후 -> JS객체
//JSON.parse(문자열) : 문자열->JS 객체로 변환
//console.log(JSON.parse(member));
/* console.log(JSON.parse(member).memberNickName); */
div.innerHTML="";
//검색이 수행될 때 div박스를 일단 깔끔하게 지우고 시작한다.
if(member != null){ //회원정보가 있을 경우
// 2) ul 요소 생성
const ul = document.createElement("ul");
// 3) li 요소 생성 * 5개 + 내용 추가
const li1 = document.createElement("li");
li1.innerText = "이메일 : "+member.memberEmail;
const li2 = document.createElement("li");
li2.innerText = "닉네임 : "+member.memberNickName;
const li3 = document.createElement("li");
li3.innerText = "전화번호 : "+member.memberTell;
const li4 = document.createElement("li");
li4.innerText = "주소 : "+member.memberAddress;
const li5 = document.createElement("li");
li5.innerText = "가입일 : "+member.enrollDate;
// 4) ul에 li들 순서대로 추가.
ul.append(li1,li2,li3,li4,li5);
// 5) div에 ul을 추가
div.append(ul);
}else{ //회원 정보가 존재하지 않을때
const h4 = document.createElement("h4");
//요소 생성.
h4.innerText="일치하는 회원이 없다";
h4.style.color= "red";
div.append(h4);
//div에 append(덧붙히기.)
}
},
error:function(request,status,error){
/*위에서 전달받은 매개값들은 Servlet에서 전달받은 매개가 아니다
톰캣에서 생성시킨 request 객체가 아니라
브라우저 자체에서 반환 받는다는 것 같다.
나중에 http프로토콜에 관해서 더 공부할 때 찾아봐야겟다.
*/
console.log("ajax 에러 발생");
console.log("상태코드 : "+request.status);
//에러 번호 404,405,500
/*console.log(request.responseText);/
/에러 메세지
console.log(error); //에러 객체 출력 */
}
})
})비동기동신으로 요청받은 Servlet 파일
//webServlet 어노테이션 선언 (요청받은 주소 (상대주소))
@WebServlet("/member/selectOne")
public class SelectOneServlet extends HttpServlet{
//나는 예외처리를 Exception으로 그냥 깡으로던졌는데 자동완성이 알아서 Servlet으로 처리된것 같다.
//ajax통신에서 요청방식을 Post방식으로 요청한다
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//ajax에서 전달한 DATA 저장할때 파라미터은 JS객체 방식 선언할떄 KEY 이름으로 하면 된다.
String memberEmail = req.getParameter("memberEmail");
try {
//JDBC 수행을 위해 사용될 메서드 호출 객체와
//JDBC 수행후 값을 전달 코드
MemberService service = new MemberService();
Member member = service.selectOne(memberEmail);
/*Google이 제공하는 JS 객체 변환 지원 메서드 기능이 아주 미쳤다
GSON라이브러리를 추가해 사용해야 한다
JSON은 JS객체형 기술 방식이지만 GSON은 JSON객체 변환 라이브러리다.
거의 모든 문야의 자료형을 변환해준댄다.
컬렉션해주는게 개꿀인듯.
*/
// 작성 방식.
// new Gson().toJson(객채,응답스트립);
//-> 매개변수 위치에 작성된 객체를 JSON 형태로 변환후 스트림을 통해서 출력한다.
new Gson().toJson(member,resp.getWriter());
}catch(Exception e) {
e.printStackTrace();
}
}
}실시간 비동기통신.
JSP에서 테이블 구성
<h3>회원 목록 조회</h3>
<p>일정 시간 마다 비동기로 회원목록(회원번호,이메일,닉네임) 조회 </p>
<table border="1">
<thead>
<tr>
<th>회원 번호</th>
<th>회원 이메일</th>
<th>회원 닉네임</th>
</tr>
</thead>
<tbody id="memberList">
//내용 append 될 공간
</tbody>
</table>js에서 특정 동작없이 수행되는 함수(interval)
//즉시 실행 함수 (함수(){})();
//속도 빠름 , 변수명 중복 해결등의 문제 개꿀
(function(){
selectAll();
//실행시 바로 한번 호출
setInterval(selectAll,10000);
//수행후 10초후 첫 함수 호출 후 10초 지연
//10초 == 10000 . 1초가 1000
//setInterval()은
//지연 - > 수행 -> 지연 - > 수행의 반복이다
//지연 부터 시작한다는게 중요
})();호출되는 ajax수행 함수.
function selectAll(){
//Ajax 코드 작성
$.ajax({
url:"member/selectAll",
dataType:"JSON", //응답 데이터 형식을 지정해 자동으로 JS 객체로 변환
success:function(list){
//list ==JS 객체 배열
//#1 mberList 내용 전부 삭제
const memberList = document.getElementById("memberList")
memberList.innerHTML="";
//#2 list를 for문으로 이용해 반복 접근
for(let i of list){
// i 는 회원 한명의 정보가 담긴 JS 객체
//#3 tr 요소 생성
const tr = document.createElement("tr");
//#4 td생성
const td1 = document.createElement("td");
td1.innerText=i.memberNo;
const td2 = document.createElement("td");
td2.innerText=i.memberEmail;
const td3 = document.createElement("td");
td3.innerText=i.memberNickName;
//#5 tr에 추가
tr.append(td1,td2,td3);
memberList.append(tr);
}
},
erroe:function(){
console.log("에러발생");
}
})
}servlet 파일에서 요청 응답
@WebServlet("/member/selectAll")
public class SelectAll extends HttpServlet{
//그냥 자기 알아서 servlet이랑 입출력 예외처리로 수정하는거같다.
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
MemberService service = new MemberService();
//리스트<Member>객체로 생성후 JDBC
List<Member> memberList = service.selectAll();
//GSON을 이용해 JS객체로 자동 변환해서 파일 전달.
new Gson().toJson(memberList,resp.getWriter());
}catch(Exception e) {
e.printStackTrace();
}
}
}
AJAX는 JS에서 화면 그리는게 귀찮을거같다 .
AJAX 통신은 JS 객체 / GSON을 까먹지 말자.
