투표프로그램 이어서
AJAX:
(Asynchronous JavaScript And XML)
서버로부터 데이터를 가져와서 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법
- 동기식 / 비동기식
동기식(a, form, submit) : 응답페이지가 돌아와야만 볼 수 있음(페이지가 깜빡거림)
-요청 처리 후 그에 해당하는 응답페이지가 돌아와야만 그 다음 작업 가능
-서버에 요청한 결과까지의 시간이 지연되면 무작정 기다려야 됨(흰 페이지로 보여짐)
-전체 페이지를 응답해주기 때문에 기본적으로 페이지가 깜빡거림
비동기식(ajax)
-현재 페이지를 그대로 유지하면서 중간중간 추가적으로 필요한 요청을 보내 줄 수 있음
-요청을 보냈다고 해서 다른 페이지로 넘어가지 않음(현재 페이지 그대로 유지)
-요청을 보내놓고 그에 해당하는 응답(데이터)가 돌아올 때까지 현재페이지에서 다른 작업을 할 수 있음
-페이지가 깜빡거리지 않음
ex) 실시간 검색어 로딩, 검색어 자동 완성기능, 아이디 중복체크, 찜하기/해제, 추천, 댓글, 무한스크롤 등
- 비동기식의 단점
- 현재 페이지에 지속적으로 리소스가 쌓임 => 페이지가 느려질 수 있음
- 에러 발생시 디버깅 어려움
- 요청 처리 후에 돌아온 응답데이터를 가지고 현재페이지에 새로운 요소를 만들어서 출력해야 됨
=> dom요소를 새롭게 만들어내는 구문을 잘 익혀둬야 함
- 비동기식의 장점
- 코드가 간결하고 사용하기 쉽다
* jQuery방식으로 AJAX통신
$.ajax({
속성명:속성값,
속성명:속성값,
속성명:속성값,
...
});
* 주요속성
- url : 요청할 url(필수속성)
- type|method : 요청전송방식(get/post)
- data : 요청시 전달할 값(없으면 안 넣어도 됨)
- success : ajax통신이 성공했을 때 실행할 함수 정의(보통 메세지를 많이 씀)
- error : ajax통신이 실패했을 때 실행할 함수 정의
- complete : ajax통신의 성공과 실패에 상관없이 무조건 실행할 함수 정의
* 부수적인 속성
- async : 서버와의 비동기 처리 방식 설정 여부(기본값 true:비동기) -기본이 비동기라 잘 안씀
- contentType : request의 데이터 인코딩 방식 정의(보내는 측의 데이터 인코딩)
- dataType : 서버에서 response로 오는 데이터의 데이터 형 설정, 값이 없다면 스마트하게 판단함
xml - 트리 형태의 데이터 구조
json - 맵 형식의 데이터 구조(일반적인 데이터 구조)
script - javascript 및 일반 String 형태 데이터
html - html 태그 자체를 return 하는 방식
text - String 데이터 - accept : 파라미터의 타입을 설정 (사용자 특화 된 파라미터 타입 설정 가능)
- beforesend : ajax 요청을 하기 전 실행되는 이벤트 callback 함수 (데이터 가공 및 header 관련 설정)
- cache : 요청 및 결과값을 scope에서 갖고 있지 않도록 하는 것 (기본값 true)
- contents : JQuery에서 response의 데이터를 파싱하는 방식 정의
- context : ajax 메소드 내 모든 영역에서 파싱 방식 정의
- crossDomain : 타 도메인 호출 가능 여부 설정(기본값 false)
- dataFilter : response를 받았을 때 정상적인 값을 return 할 수 있도록 데이터와 데이터 타입 설정
- global : 기본 이벤트 사용 여부(ajaxstart, ajaxstop) (버퍼링 같이 시작과 끝을 나타낼 때, 선처리 작업)
- password : 서버에 접속 권한(비밀번호)이 필요한 경우
- processData : 서버로 보내는 값에 대한 형태 설정 여부(기본 데이터를 원하는 경우 false설정)
- timeout : 서버 요청 시 응답 대기 시간(milisecond)
--jsp파일
<h1>jQuery 방식을 이용한 AJAX 테스트</h1>
<h3>1. 버튼 클릭시 get방식으로 서버에 요청 및 응답</h3>
입력 : <input id="input1"> <button id="btn1">전송</button>
<br>
응답 : <span id="output1">현재응답없음</span>
<script>
$(function() {
$("#btn1").click(function() {
// 기존 동기식 방식
// location.href = "jqAjax1.do?input=" + $("#input1").val();
$.ajax({
url : "jqAjax1.do",
data : {input : $("#input1").val()}, //키와 값을 쌍으로 하여 객체 생성
type : "get",
success : function(result) { //response로 들어온 값은 변수 result에 들어옴
console.log(result);
$("#output1").text(result);
},
error: function() {
console.log("ajax통신실패");
},
complete: function() {
console.log("ajax통신여부와 상관없이 출력");
}
});
})
})
</script>
<form name="regFrm" method="get" action="idCheck.me"> <!-- 서블릿 확장자는 do, me같은 마음대로 -->
<p>아이디 <input name="id" required>
<input type="button" value="ID중복확인" onclick="idCheck();">
</p>
<input type="submit" value="회원가입" disabled>
</form>
<label id="result"></label>
<script>
//작성박스 바로 밑에 중복결과 보이게 하기
function idCheck() {
$.ajax ({
url : "idCheck.me",
data : {checkId : $("#id").val()},
type : "get",
success: function(result) {
if(result == 'idN') {
$("#result").text("이미 사용중이거나 탈퇴한 아이디입니다").css("color","red");
} else {
$("#result").text("멋진 아이디네요").css("color", "green");
}
},
error:function() {
console.log("아이디 중복체크용 ajax통신 실패");
}
});
}
/* 중복 결과 alert창으로 보이게 하기
function idCheck() {
const $idInput = $("form input[name=id]");//$를 넣으면 jQuery에서 쓰는 변수임을 암시
$.ajax ({
url : "idCheck.me",
data : {checkId : $idInput.val()},
success: function(result) { //idY 또는 idN값이 들어옴
if(result == 'idN') {
alert("이미 사용중이거나 탈퇴한 아이디입니다");
$idInput.val(""); //입력한 값 자동으로 비워지게 하기
$idInput.focus();
} else {
if(confirm("시용가능한 아이디입니다. 사용하시겠습니까?")) {
$("form :submit").removeAttr("disabled");
$idInput.attr("readonly", true);
} else {
$idInput.focus();
}
}
},
error:function() {
console.log("아이디 중복체크용 ajax통신 실패");
}
});
} */
</script>
</body>
</html>--Ajax java파일(ajax 처음 개념 배우면서 어떻게 통신하는지 배우는 파일)
package com.kh;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/jqAjax1.do")
public class JqAjaxController1 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String str = request.getParameter("input");
System.out.println("요청시 전달값: " + str);
// DB에서 요청처리를 다 했다는 가정하에 응답할 데이터
String responseDate = "입력된 값: " + str + ", 길이: " + str.length();
//응답데이터 돌려주기
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("<html>");
response.getWriter().print(responseDate);
}
}--servlet파일
package com.kh;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/idCheck.me")
public class AjaxIdCheckController extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String checkId = request.getParameter("checkId");
//데이터 베이스 연동(커넥션풀과 bean파일, Mgr파일, jdbc.jar파일 있어야함)
MemberMgr mm = new MemberMgr();
boolean result = mm.checkId(checkId);
//boolean result = new MemberMgr().checkId(checkId); 한줄로 쓰면 이렇게
/* 되돌려 주는 값에 한글이 없을 경우 생략해도 됨
response.setContentType("text/html; charset=UTF-8");
*/
if(result) {
response.getWriter().print("idN"); //id가 있어서 쓸 수 없음
} else {
response.getWriter().print("idY");
}
}
}--java파일
package com.kh;
import java.sql.*;
//아이디를 입력하면 db에 있는지 db와 연동하는 프로그래밍 자바 파일
public class MemberMgr {
private DBConnectionMgr pool;
public MemberMgr() {
pool = DBConnectionMgr.getInstance();
}
public boolean checkId(String id) {
Connection con = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
boolean flag = false;
try {
con = pool.getConnection();
String sql = "SELECT id FROM MEMBER WHERE id=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
flag = rs.next();
} catch (Exception e) {
e.printStackTrace();
} finally {
pool.freeConnection(con, pstmt, rs);
}
return flag;
} //checkId end
//데이터 추가할 때
public boolean insertMember(MemberBean bean) { //자료타입: MemberBean 변수명: bean
Connection con = null;
PreparedStatement pstmt = null;
boolean flag = false;
try {
con = pool.getConnection();
String sql = "INSERT INTO MEMBER VALUES(?,?,?,?,?,?,?,?,?,?,?)";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, bean.getId());
pstmt.setString(2, bean.getPwd());
pstmt.setString(3, bean.getName());
pstmt.setString(4, bean.getGender());
pstmt.setString(5, bean.getBirthday());
pstmt.setString(6, bean.getEmail());
pstmt.setString(7, bean.getZipcode());
pstmt.setString(8, bean.getAddress());
pstmt.setString(9, bean.getDetailAddress());
String hobby[] = bean.getHobby();
char hb[] = {'0','0','0','0','0'};
String lists[] = {"운동","넷플릭스","독서","음악감상","여행"};
if(hobby != null) { //취미는 not null값이 아니니까 선택 안 할 수도 있음
for(int i=0; i<hobby.length; i++) {
for(int j=0; j<lists.length; j++) {
if(hobby[i].equals(lists[j])) {
hb[j] = '1';
break;
}//if end
}//중첩for end
}//for end
}
pstmt.setString(10, new String(hb));
pstmt.setString(11, bean.getJob());
if (pstmt.executeUpdate() == 1) //데이터 베이스의 내용이 바뀌면 executeUpdate, 조회는 executeQuery
flag = true;
} catch (Exception e) {
e.printStackTrace();
} finally {
pool.freeConnection(con, pstmt);
}
return flag;
}
public boolean loginMember(String id, String pwd) {
Connection con = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
boolean flag = false;
try {
con = pool.getConnection();
String sql = "SELECT id FROM MEMBER WHERE id=? and pwd=?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id); //?에 해당하는 값들 불러오기
pstmt.setString(2, pwd);
rs = pstmt.executeQuery();
flag = rs.next();
} catch (Exception e) {
e.printStackTrace();
} finally {
pool.freeConnection(con, pstmt, rs);
}
return flag;
}
}
내 인생을 망치러 온 나의 구원, 개발