[JSP] Ajax

ajax 란

페이징 처리를 하지 않고 결과를 가져 오는 것

ajax도 디비조회가 필요하기 떄문에 컨트롤러가 필요하다.

컨트롤러까지 가기위해서는 프론트컨트롤러에서의 요청이 필요하다

지금처럼 서블릿에 직접응답할 파일을 가져와줘야한다.

왜냐하면 프론트컨트롤러에서 에이작스를 위해서 컨트롤러를 ㅇ만들었느데 거기서 

리절트와 겟패스 리다이렉트 설정을 한다?  응답이 두번되는 꼴이다.

에이작스는 갔다가 오는 것이기 때문에 오류가 뜬다.

그러기 때문에 에이작스는 응답할 페이지가 다 준비된 곳으로 이동을 해야한다.

그렇기 떄문에 서블릿에서 응답 페이지를 만들어줘야한다.

그렇기 때문에 에이작스용 컨트롤러에서의 메서드의 리턴값이 널이어야 된다.

만약에 컨트롤러에 매서드의 리턴값이 널이 아니면 리턴이 두번되는 것이다

프론트컨트롤러에서 한번 에이작스에서 한번

 

 

ajax를 보내야하는 controller 에서의 리턴타입은 result 로 받고 그 리턴 값은 null 로 해야 오류가 안난다.

그리고 이곳에서는 무엇을 해야한다?

완성된 페이지가 이곳에 있어야 한다.

 

ajax용 컨트롤러

public Result execute(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		resp.setContentType("text/html; charset=utf-8");
		PrintWriter out = resp.getWriter();
		
		out.print("아이디를 입력하세요");
		out.close();
		
	return null;

프론트 컨트롤러를 타고 컨트롤러의 응답 객체를 가져올수 있어야 한다.

 

 

$("input[name='test']").on("blur", getData);

function getData(){
	$.ajax({
		url: "${pageContext.request.contextPath}/test.me",
		type: "get",
		success: function(result){
			$("#result").html(result);
		}
	})
}

 

 

FrontController 부분

package com.test.app.member;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.test.app.Result;

public class MemberFrontController extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doProcess(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doProcess(req, resp);
	}
	protected void doProcess(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String target = req.getRequestURI().substring(req.getContextPath().length());
		Result result = null;
		System.out.println(target);
		
		 if(target.equals("/test.me")) {
			new TestController().execute(req, resp);
			
		}
}
}

 

 

 

 

동기식은 하나씩 된다는 뜻

동기식은 페이지를 요청하는 것이다. 뒤로가기가 생성

 

근데 에이작스에서 에이는 에이싱그로나이즈드 의 약자인데 이것은 비동기식이라는 것이다.

에이작스의 디폴트는 비동기식의 방식

에이작스는 동기식이 아니라 비동기식이기때문에 요청과 응답이 동시에 응답이 들어간다.

 

클라이언트서버

 

day06 00:26:00

에이작스는 바로 통신하는 메서드이다.

통신은 요청이 먼저이기 떄문에 요청할 경로를 써준다.

우리는 객체한개만 보내면 끝이다

미리 정해진 키값들을 전달받기만함녀 된다 그것이 바로

 

$.ajax({
		url: "요청할 경로",
		type: "get or post",
		contentType: "전달할 데이터의 타입",
		data: "전달할 데이터",
		dataType: "응답할 값의 타입/결과의 타입",
		sucess: function(){} //성공시 실행할 함수
		error: function(){} //실패시 실행할 함수
	});

$.ajax({
         url: "data.jsp",
         success: function(result){console.log(result.trim());},
         error: function(a, b, c){console.log(a, b, c);}
      });

default 값으로 생략 가능한 부분

type - get

dataType - string(문자)

 

위의 경우에는 똑같은 jsp 파일에 data 값을 지정 해줬으므로 contentType, data 는 생략이 가능하다.