12/21 69-1 [AJAX] jQuery Ajax
다시돌아온 이클립스
이클립스에서 하지만
jQuery 의 연장선이기도 한 AJAX 카테고리를 어디다가 둬야할지 고민스럽다...
마지막 게시판 짤 때 나를 괴롭혔던 AJAX를 드디어 배우게 된다..
[AJAX]
javascript를 사용한 비 동기 통신
동기 : 요청하고 응답이 와야 또 다른 요청을 보낼 수 있음
비 동기 : 응답이 안와도 계속 요청을 보낼 수 있음
페이지 이동이 발생하지 않고, 즉 새로고침이 일어나지 않고 서버로부터 결과를 받아 올 수 있음
ajax사용 목적이 바로이거!! 페이지 이동없이 데이터를 주고 받기 위한 거임!
수업시간에 너무 졸아서.. 잘 기억이 안나지만
처리 순서는 알아둬야 할 거 같다
[순서]
사용자가 이벤트 발생
-> 자바스크립트의 DOM을 사용해서 필요한 정보를 구한 뒤 XMLHttpRequest객체를 통해서 웹 서버에 요청을 전달(send)
-> 웹서버는 XMLHttpRequest로부터의 요청을 알맞게 처리한 후 결과를 xml이나(잘 안씀) 단순 text 혹은 JSON을 생성해서 XMLHttpRequest에 전송
->서버로부터 응답이 도착하면 XMLHttpRequest객체는 자바스크립트에 도착사실을 알리고, 자바스크립트는 응답 데이터와 DOM을 이용해서 사용자 화면에 반영
직접해보면 금방 이해 되겠지
$.메소드명()
요런 메소드가 많은데
우린 그 중에서도 가장 사용빈도가 높은
$.ajax()메서드를 집중공략 할 거 같음.
왜냐면 얘는 jQuery Ajax 관련 메서드를 모.두. 이. 메.서.드.로 .구.현.가.능. 하기 때문임
실행을 위해서 스프링때와 똑같이
index.jsp랑
<h2>13.jQuery AJAX <small><a href="<c:url value="/ajax.do"/>">제이쿼리 에이작스</a></small></h2>컨트롤러에 넣고
@RequestMapping("/ajax.do")
public String ajax() {
//뷰정보 반환
return "ajax12/Ajax";
}
경로대로 폴더와 jsp 파일 생성함
폼은받고
로직은 밑에 <script> 태그에 작성
Ajax.jsp (오늘 진도가 다 나간게 아니라서 진도나간 부분만 자름 )
ajax로 서버에 요청 시에는 form태그가 의미 없다
(왜냐하면 자바스크립트 객체인 XMLHttpRequest가 서버에 요청하기 때문에).
단, 전송할 데이타가 많을 시에는 form태그 추가 시 유리함.
<form id="frm" > <!-- 자바스크립트로 서버에 전송할거라서 submit 없어도 됨 -->
아이디 <input type="text" name="id" />
비빌번호 <input type="password" name="pwd" />
</form>
<ul style="list-style-type: upper-roman;">
<li><input type="button" id="btnNoAjax" value="회원여부(AJAX미사용-HTML페이지를 받는다.)" /></li>
<!--
Spring:반환타입을 void로 하거나
반환타입을 String으로하고 @ResponseBody어노테이션 사용
-->
<li><a href="#" id="btnAjaxText">회원여부(AJAX사용-데이터를 TEXT로 응답받기)</a></li>
<li><input type="button" id="btnAjaxJson" value="회원여부(AJAX사용-데이터를 JSON으로 응답받기)" /></li>
</ul>AJAX사용 여부와 상관없이 모두 이 컨트롤러 안에서 코드작성 !
@Controller
public class AjaxController {
@Autowired
private OneMemoService<OneMemoDTO> service; //주입주입!
}[1.AJAX미사용 시]
뷰
<script>
1.ajax미사용
$('#btnNoAjax').clic(function(){
//form태그에 action속성 및 method속성 설정
$('#frm').prop({action:'<c:url value="Ajax/NoAjax.do"/>',method:'post'})
//폼 객체의 submit()함수로 서버로 전송
$('#frm').submit();
})
</script>
컨트롤러
방법 2가지 !!
[ajax 미사용] - 새로고침이 됨
반환타입 void: 직접 웹브라우저에 출력
@RequestMapping("/Ajax/NoAjax.do")
public void noajax(@RequestParam Map map, HttpServletResponse resp) throws IOException {
//컨텐츠 타입 설정
resp.setContentType("text/html; charset=UTF-8"); //한글깨짐 방지
//웹브라우저에 출력하기위한 출력 스트림얻기
PrintWriter out= resp.getWriter();
//서비스로직 호출
boolean isLogin = service.isLogin(map);
if(isLogin)
out.println("<h2>"+map.get("id")+"님 즐감</h2>");
else {
out.println("<script>");
out.println("alert('아이디 비번 틀림');");
out.println("history.back();");
out.println("</script>");
}
out.close();
}
반환타입 String : 페이지를 새로 받음
@RequestMapping("/Ajax/NoAjax.do")
public String noajax(@RequestParam Map map,Model model) { //페이지전송
//서비스 호출
boolean isLogin = service.isLogin(map);
//데이터 저정
model.addAttribute("isLogin",isLogin? map.get("id")+"님 반갑": "회원정보 불일치" );
// 뷰정보 반환
return "ajax12/Ajax";
}[2.AJAX사용시]
서버로 부터 응답은 TEXT로 받기
※POST방식으로 전송 시
type:"post" 그리고
※GET방식(디폴트)으로 전송 시
type:"get"로
contentType은 디폴트로 "application/x-www-form-urlencoded"
즉 key=value쌍으로 전송한다
※전송할 데이타가 여러 개인 경우
<form>태그로 감싸주고
$("form선택자").serialize( )함수 사용
이름1=값1&이름2=값2&이름3=값3.....쿼리 스트링 형태(key=value쌍)로 반환
뷰? script
<script>
$('#btnAjaxText').click(function(e){
e.preventDefault();
console.log('serialize()함수:',$('#frm').serialize());
//ajax 요청
$.ajax({
url:'<c:url value="/Ajax/AjaxText.do"/>', //요청할 서버의 주소
method:'post', //데이터 전송 방식(디폴트는 get방식)
dataType:'text', //서버로 부터 응답 받을데이터의 형식설정
data:
//1.쿼리스트링 문자열로 전송 (데이터적을 때)
'id='+$(':input[name=id]').val()+'&pwd='+$(':input[name=pwd]').val(),
//2.$("form선택자").serialize()함수 사용-데이타가 많을때
$('#frm').serialize()
//3]JSON데이타 형식으로 전달-데이타가 적을때
{id:$(':input[name=id]').val(),pwd:$(':input[name=pwd]').val()}
}).done(function(data){ //서버로부터 정상적인 응답(200)을 받았을 때 호출되는 콜백함수
/*여기 콜백함수 안에 받은 데이터를 표시해 줄 코드 구현
서버로부터 정상적으로 응답을 받을 때 자동으로 호출되는 콜백 메소드]
여기 안에서 서버로부터 받은 데이타를 원하는 위치에 뿌려주면 된다.
※서버로 부터 받은 데이터는 매개변수로 전달됨(data) */
console.log('서버로부터 받은데이터:',data);
console.log('서버로부터 받은데이터 타입:',typeof data);
//서버에서 "Y" 혹은 "N"으로 응답할때
$('#lblDisplay').html(data==='Y'?$(':input[name=id]').val()+"님 안녕":'회원가입 하세요');
//서버에서 일반 메시지로 응답할때
$('#lblDisplay').html(data);
}).fail(function(error){ //서버로부터 비 정상적인 응답 받았을 때
console.log('%O',error);
console.log('에러:',error.responseText);
});
})
</script>
컨트롤러
ajax 사용 ! 페이지 말고 데이터만 전송!!!! @responseBody 어노 사용
void 메소드 반환
@RequestMapping("/Ajax/AjaxText.do")
public void ajaxText(@RequestParam Map map, HttpServletResponse resp) throws IOException {
//1.컨텐츠 타입 설정
resp.setContentType("text/plain; charset=UTF-8"); //한글깨짐 방지
//2.웹브라우저에 출력하기위한 출력 스트림얻기
PrintWriter out= resp.getWriter();
//3.서비스로직 호출
boolean isLogin = service.isLogin(map);
//"Y" 혹은 "N" 코드값으로 응답할때-반드시 print()메소드로 안그러면 println은 줄바꿈이 추가 됨
//out.print(isLogin ? "Y" :"N");
out.print(isLogin ? map.get("id")+"님 안녕": "회원가입 하세요");
//4.웹브라우저와 연결된 스트림 닫기
out.close();
}
string 반환
@RequestMapping(value="/Ajax/AjaxText.do", produces="text/plan;charset=UTF-8") //한글깨짐 방지
public @ResponseBody String ajaxText(@RequestParam Map map){
//서비스 호출
boolean isLogin = service.isLogin(map); //위에서 service 주입 받은거 쓰는거얌!
//데이터 응답
//return isLogin?"Y":"N";
return isLogin ? map.get("id")+"님 안녕!!!": "회원가입 하세요";
}