Ajax) text/plain 처리

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

text

 

text.jsp

<form name="searchFrm">
    <input type="search" name="search" />
    <button>검색</button>
</form>

<script>
document.searchFrm.addEventListener('submit', (e) => {
    e.preventDefault();

    $.ajax({
        url : '<%= request.getContextPath()%>/jquery/search',
        data : {
            search : e.target.search.value
        },
        method : "GET",
        success(response) {
            console.log(response);
        },
        error(xhr, textStatus, err) {
            console.log(xhr, textStatus, err);
        }
    });

});
</script>

$.ajax({})안에 필요한 데이터들을 담아 전송합니다.

서버 응답이 오류없이 넘어오면 success의 매개변수로 담기게 되고, 서버 응답 시 오류가 발생하면 error()가 실행됩니다.

 

SearchServlet

@WebServlet("/jquery/search")
public class SearchServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 1. 사용자 입력 값 처리
		String search = request.getParameter("search");
		
		// 2. 업무로직
		
		// 3. 응답처리
		response.setContentType("text/plain; charset=utf-8"); // 텍스트형식으로 전송
		response.getWriter().print("검색어 [" + search + "] 를 입력하셨습니다 :)");
	}
}

 

※ jquery.Ajax API

https://api.jquery.com/jquery.ajax/

jQuery.ajax() | jQuery API Documentation

 

jQuery Ajax 주요 속성 정리

# jQuery Ajax
* ajax 통신은 jQuery로 하게 되면 훨씬 간단하게 할 수 있음
* 또한 크로스브라우징이슈를 jQuery가 알아서 해결해 줌
* jQuery Ajax에서 가장 중요한 API는 "$.ajax" 임
    
$.ajax의 기본 문법

    jQuery.ajax( [settings ] );

    $.ajax({
        설정 값1,
        설정 값2,
        설정 값3,
        설정 값4……
    });

[참고 API](http://api.jquery.com/jquery.ajax/)


Ajax 주요 속성
* url - 요청 할 server의 url
* accept - 파라미터의 타입을 설정(사용자 특화 된 파라미터 타입 설정 가능)
* async    - 서버와의 비동기 처리 방식 설정 여부(기본값 true)
* beforeSend - ajax 요청을 하기 전 실행 되는 이벤트 callback 함수(데이터 가공 및 header 관련 설정)
* cache    - 요청 및 결과값을 scope에서 갖고 있지 않도록 하는것(기본값 true)
* complete - 요청 완료 후 실행되는 메소드(성공, 에러 이 후에 무조건 실행)
* contents - jquery 에서 response의 데이터를 파싱하는 방식 정의
* contentType - request의 데이터 인코딩 방식 정의,(보내는 측의 데이터 인코딩)
* context    - ajax 메소드 내 모든 영역에서 사용 가능한 값
* converters - object가 포함되었을때 파싱 방식 정의
* crossDomain - 타 도메인 호출 가능 여부 설정 (기본값 false)
* data    - 사용자입력값. 요청 parameter 설정
* dataFilter - response를 받았을때 정상적인 값을 return 할수 있도록 데이터와 데이터 타입 설정
* dataType - 서버에서 response 오는 데이터의 데이터 형 설정, 값이 없다면 스마트하게 판단함.
    * xml - 트리 형태의 데이터 구조
    * json - 맵 형식의 데이터 구조(일반적인 데이터 구조)
    * script - javascript 및 일반 string 형태 데이터 
    * html - html태그 자체를 return 하는 방식
    * text - string 데이터
* error    - ajax통신에 실패했을 때 호출될 이벤트 핸들러
* global    - 기본 이벤트 사용 여부(ajaxStart, ajaxStop)(버퍼링 같이 시작과 끝을 나타낼때, 선처리 작업)
* method | type    - 서버 요청 방식(GET, POST, PUT) 기본값 GET
* password - 서버에 접속 권한(비밀번호)가 필요한 경우
* processData - 서버로 보내는 값에 대한 형태 설정 여부(기본데이터를 원하는 경우 false 설정)
* success - ajax통신에 성공했을 때 호출될 이벤트 핸들러
* timeout - 서버 요청 시 응답 대기 시간(milisecond)



콜백함수 호출순서
1. beforeSend
2. success | error
3. complete


[참고 API:http://api.jquery.com/jquery.ajax/](http://api.jquery.com/jquery.ajax/)

 

콜백함수 호출순서

$.ajax({
    url : '<%= request.getContextPath()%>/jquery/search',
    data : {
        search : e.target.search.value
    },
    method : "GET",
    beforeSend() {
        console.log('beforeSend');
    }
    success(response) {
        console.log(response);
        console.log('success');
    },
    error(xhr, textStatus, err) {
        console.log(xhr, textStatus, err);
        console.log('error');
    },
    complete() {
        console.log('complete');
    }
});

success

 

error