ajax

Asynchronous JavaScript And XML

비동기식 요청을 보내는데 필요한 기술
Server와 js가 소통
서버로부터 데이터를 가져와 전체 페이지를 고치지 않고 일부만 로드할 수 있게 하는 기법 (페이지가 아닌 데이터를 넘겨준다)

장점

1. 비동기 방식으로 웹 서버의 응답을 기다리지 않고 데이터를 빠르게 처리한다
2. 페이지 리로딩이 없이 처리한다

단점

1. 한 페이지에 지속적으로 사용 시 리소스가 쌓여 페이지가 느려진다
2. 스크립트로 되어 있어 에러 발견이 어렵다

JavaScript Ajax

Ajax는 jQuery에 특화되어 있어 사용하지 않을 예정

<h3>서버호출</h3>
<button class="btn bc11" id="js">js방식</button>

<script>
$("#js").on("click", function(){
      // 1. XMLHttpRequest 객체 생성
     	 const xhttp = new XMLHttpRequest();
   	  // 2. 요청정보 설정
  	  // (요청메서드, 요청url, 비동기여부)
  	    xhttp.open("GET","/ajaxTest1.do",true);
      // 3. 서버요청 처리에 따른 동작함수 설정
     	xhttp.onreadystatechange = function(){
        if(this.readyState==4 && this.status==200){
          	// 요청이 다 끝나고 정상인 경우
          	console.log("서버 요청 완료 !")
         	// (이 곳에서 html에 변화를 준다)
        }else if(this.readyState==4 && this.status==404){
          	// 요청이 다 끝나고 결과가 페이지를 찾을 수 없는 경우
          	console.log("주소를 찾을 수 없습니다.")
        }
      }
      // 요청에 대한 결과를 모두 처리한 후 send
      xhttp.send();
})
</script>

jQureyAjax

서블릿에서 값을 처리하여 기본형을 돌려주는 방법 (response)

// 인코딩
request.setCharacterEncoding("utf-8");

// 값추출
int su1 = Integer.parseInt(request.getParameter("num1"));
int su2 = Integer.parseInt(request.getParameter("num2"));

// 결과처리
int result = su1+su2;

// 비지니스 로직
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(result);

서버로 전송하여 값을 받는 방법 (성공함수의 매개변수)

<script>
$("#jQ4").on("click", function(){
	const input = $(this).prev();
	const inputVal = input.val();
	const result = $(this).next();
	$.ajax({
		url : "/ajaxTest4.do",
		type : "get", // 생략하면 get
		data : {memberId : inputVal},
		dataType : "json",
		success : function(data){
			if(data == null){
				result.append("회원 정보를 조회할 수 없습니다");
			}else{
    	         result.append("아이디 : "+data.memberId+"<br>");
				result.append("이름 : "+data.memberName+"<br>");
				result.append("전화번호 : "+data.memberPhone+"<br>");
			}
		},
		error : function(){
			console.log("실패")
		}
	})
})
</script>

서블릿에서 값을 처리하여 js레벨로 java객체를 돌려주는 방법 (JSON)

{"key1":"value1", "key2":"value2"....}

// 인코딩
request.setCharacterEncoding("utf-8");
// 값추출
String memberId = request.getParameter("memberId");
// 비즈니스로직
MemberService service = new MemberService();
Member member = service.selectOneMember(memberId);

// 결과처리
// java객체를 js가 인식할 수 있는 객체로 변환하는 작업
JSONObject result = null;
if(member != null) {
      result = new JSONObject();
      result.put("memberNo", member.getMemberNo());
      result.put("memberId", member.getMemberId());
      result.put("memberPw", member.getMemberPw());
      result.put("memberName", member.getMemberName());
      result.put("memberPhone", member.getMemberPhone());
      result.put("memberAddr", member.getMemberAddr());
      result.put("memberLevel", member.getMemberLevel());
      result.put("enrollDate", member.getEnrollDate());
}
response.setContentType("application/json");
// 되돌려주는 타입 명시 // 없으면 String
// 혹은 보낼 때 dataType : "json" 명시
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(result);

서블릿에서 값을 처리하여 js레벨로 java객체를 돌려주는 방법 (GSON)

request.setCharacterEncoding("utf-8");

// 값추출
String memberId = request.getParameter("memberId");

// 비지니스로직
MemberService service = new MemberService();
Member m = service.selectOneMember(memberId);

// 결과처리
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
Gson gson = new Gson();
gson.toJson(m,out);

비동기처리

$("#jQ8").on("click", function(){
	let test = 10;
	console.log("이벤트 시작 : "+test);	//10
	$.ajax({
		url : "/ajaxTest8.do",
		success : function(data){
			test = data;
			console.log("ajax 내부 : "+test);	//100
		}
	}).then(function(){
		console.log(".then() : "+test);	//100
	})
	console.log("이벤트 끝 : "+test);	//10
})3

이미지 파일 insert 시 미리보기

<input type="file" name="imageFile"
accept=".jpg,.png.,.jpeg"
onchange="loadImg(this);">		<!-- 이미지첨부-->
<img id="img-view" width="500px">	<!-- 이미지 미리보기-->

// this = input태그 자체를 의미
function loadImg(f){
	// 첨부파일이 여러개 일 수 있으므로 항상 배열 처리
	console.log(f.files);
  //input에서 file을 선택하면 해당 파일이 들어있는 배열로 리턴
	if(f.files.length != 0 && f.files[0] != 0){
      // 배열의 길이가 0이 아니면서, 파일의 데이터가 0이 아닐 때
    	const reader = new FileReader();
      //파일 정보를 읽어올 수 있는 객체
    	reader.readAsDataURL(f.files[0]);
      //배열에서 선택한 파일 정보 읽어옴 (비동기)
    	reader.onload = function(e){
          //파일 리더가 파일을 다 읽어오면 동작한 함수
      	$("#img-view").attr("src", e.target.result);
		}
  	}else {
    	$("#img-view").attr("src", "");
  	}
}

이미지 파일 list 보기 (더보기 버튼 클릭 시 5개씩 추가되는 list)

<button class="btn bc44 bs4" id="more-btn"
totalCount="<%=totalCount %>" currentCount="0" value="1">더보기</button>
<!-- 
	totalCount		전체 게시물 수
	currentCount	실제 jsp에 가지고 온 게시물 수
	value 			더보기 다음 게시물 시작번호
-->

서블릿을 통해 start부터 start+amount-1개의 photo객체를 가져온다

		$("#more-btn").on("click", function(){
			const amount = 5;	// 더보기 클릭하면 추가로 가져올 게시물 수
			const start = $(this).val();	// 추가로 가져올 게시물의 시작번호
			$.ajax({
				url : "/photoMore.do",
				type : "post",
				data : {start:start, amount:amount},
				success : function(data){
					console.log(data);
				},
				error : function(){
					console.log("에러발생");
				}
			})
		})