[AJAX] AJAX란 / jQuery-AJAX 사용법 / AJAX 메소드

*이 포스팅을 보완하여 아래 포스팅을 작성하였습니다.

이 포스팅으로 이해가 어려운 부분이 있다면 아래 포스팅에 설명이 있을수도..

https://mundol-colynn.tistory.com/142

비동기통신 - AJAX와 JSON, 그리고 GSON

AJAX란?

Asynchronous JavaScript And XML의 약자


서버와 통신하기 위해  XMLHttpRequest객체를 사용하는 것을 의미
JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음
페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"
=> 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트가 가능

AJAX 는 프로그래밍 언어가 아니며, 
 웹 서버에 데이터 요청을 보내기 위한 XML HttpRequest 객체 브라우저와 
데이터를 보여주기 위한 JavaScript,HTML DOM 의 조합

= 페이지 새로고침 없이 서버에 요청
= 서버로부터 데이터를 받고 작업을 수행

AJAX는 이름처럼 AJAX 어플리케이션은 정보전송을 위해 XML만을 사용하는 것은 아니며, 
일반 텍스트나 JSON 텍스트로도 데이터를 전송

AJAX는 데이터를 behinde the scenes에서 데이터를 웹서버와 교환하여 비동기적으로 웹 페이지가 업데이트되는 것을 허용
 

https://www.w3schools.com/xml/ajax_intro.asp

 

 

 

• 1. 웹 페이지 이벤트 발생 (페이지 로딩, 버튼 클릭 등)
• 2. XMLHttpRequest object가 JavaScript에 의해 생성
• 3.  XMLHttpRequest object가 웹 서버에 요청 전송
• 4.서버가 요청을 진행함 
• 5. 서버가 웹페이제에 response를 보냄
• 6. response를 JavaScript가 읽음
• 7. JavaScript가 응답에 상응하는 action을 동작시킴

 

 

jQuery - 사용법

$.ajax({name:value, name:value, ... })

인자값으로  AJAX 요청을 받는 한개 혹은 복수의 name-value 를 받음

 

메소드설명

Method	Description
$.ajax()	비동기식 Ajax를 이용하여 HTTP 요청을 전송함.
$.get()	전달받은 주소로 GET 방식의 HTTP 요청을 전송함.
$.post()	전달받은 주소로 POST 방식의 HTTP 요청을 전송함.
$.getScript()	웹 페이지에 스크립트를 추가함.
$.getJSON()	전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음.
.load()	서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함.

 

 

Value/Description

Name	Return Type	Description
async	Boolean	(default: true) 요청의 비동기 /처리여부 지정  동기 요청이 필요하면 값을 false로 설정
beforeSend(xhr)	Function(  jqXHR jqXHR, PlainObject settings )	전송 전에 실행되며 false 를 리턴하게 되면 요청이 취소된다.
cache	Boolean	전송 전에 실행되며 false 를 리턴하게 되면 요청이 취소된다.
complete(xhr,status)	Function( jqXHR jqXHR, String textStatus )	요청이 완료될 때 요청 성공/실패여부에 관계없이 실행되는 함수
contentType	Boolean or String	해더의 Content-Type을 설정한다.
context	PlainObject	Jquery가 내용을 고려하여 응답 구문을 분석하는 방법을 결정하는 옵션. 새로운 데이터 유형을 정의할 때 사용된다.
data	PlainObject or String  or Array	서버로 보낼 데이터 서버로 요청을 보낼 때 전달할 전달값 ({key1: value1 , key2:value2 }) => form태그 안에 input 태그에 입력한 값
dataFilter(data,type)	Function( String data, String type ) => Anything	success 함수가 호출 되기 전에 실행된다. success로 전달할 데이터를 return 해야 한다.
dataType	String	서버에서 받을 데이터 형식을 지적한다. 지정하지 않으면 MIME 타입을 참고하여 자동 파싱된다.
error(xhr,status,error)	Function( jqXHR jqXHR, String textStatus, String errorThrown )	요청에 실패하면 호출된다.
global	Boolean	global ajax 이벤트 핸들러를 사용할지 결정한다. false로 설정 시 ajaxStart, ajaxStop 등과 같은 이벤트로 제어할 수 없다.
ifModified	Boolean	기본적으로 해더를 무시한다. true 설정 시 해더에서 Last-Modified 를 확인하며 응답이 변경된 경우(결과가 다른 경우)에만 요청을 처리한다.
jsonp	String or Boolean	콜백 함수명을 사용합니다. url에 포함된 쿼리 스트링 중 'callback=?' 문자열 중 'callback' 문자열을 대체 합니다. false로 설정 시 '?callback' 문자열이 url에 추가되는것을 방지하거나 '=?' 문자열의 변조를 방지할 수 있는데 이러한 경우엔 jsonpCallback을 활용해야 합니다.
jsonpCallback	String or Function()	json 요청에 대한 callback 함수를 지정합니다.
password	String	HTTP 엑세스에 활용할 비밀번호를 설정한다.
processData	Boolean	데이터를 querystring 형태로 보내지 않고 DOMDocument 또는 다른 형태로 보내고 싶으면 false로 설정한다.
scriptCharset	String
success(result,status,xhr)	Function( Anything data, String textStatus, jqXHR jqXHR )	요청 성공 시 실행되는 콜백함수 data: 서버로부터 리턴된 data  textStatus : 상태를 설명하는 문자열 jqXHR (in jQuery 1.4.x, XMLHttpRequest) 객체 각각의 함수가 순서대로 실행됨
timeout	Number	요청에 대해 밀리초 단위로 타임아웃을 설정할 수 있다.
traditional	Boolean	데이터에 배열을 전송할 때 데이터 직렬화를 하는 옵션이다.
type	String	(default: 'GET') 요청전송방식 get, post 중 선택 ==>form태그의 메소드 속성과 유사
url	String	(default: The current page) 요청할 URL(필수작성) ==> form태그의 action속성과 유사 (서블릿 매핑값)
username	String	HTTP 액세스 인증 요청에 응답하는데 사용할 사용자 이름.
xhr	Function()	XMLHttpRequest 콜백 사용

ServletResponse인터페이스

 Servlet이 client단에 response 보내는 것을 돕는 객체를 정의하기 위한 인터페이스

서블릿 컨테이너는 ServletResponse객체를 만들고 해당 객체를 Servlet의 Service메소드 인자로 전달함

response.setContentType

public void setContentType(java.lang.String type)

 

client단으로 전달되는 response 내용의 type을 설정하는 메소드

 예) text/html; charset=ISO-8859-4.

PtrintWtriter 객체를 얻기 위해서는 setContentType 메소드가 먼저 호출되어야함 

 

response.getWriter

public java.io.PrintWriter getWriter()
                              throws java.io.IOException

문자열을 client 단으로 전송할 수 있는 PrintWriter 객체 반환

getWriter() 호출을 위해서는   인코딩 타입을 지정하는 setContentType(java.lang.String) 메소드가 먼저 호출되어야 함

 

PrintWriter객체 : 바이트를 문자 형태를 가지는 객체로 바꿔줌

클라이언트에게 문자 형태로 response 하려면 PrintWriter 객체의 getWriter()메소드를  통해

응답으로 내보낼 출력 스트림을 얻은 후 out.print(HTML태그) 형태로 작성하여 스트림에 텍스트를 기록

 

<body>

	  <h1>jQuery방식을 이용한 AJAX 테스트 
	  </h1>
	  <h3>1. 버튼 클릭시 get방식으로 서버에 데이터 전송 및 응답받기
	  입력: <input type="text" id="input1">
	 <button id="btn1">전송</button>
	 <br>
	 응답 : <label id="output1">현재 응답 없음</label>  
	 
	 <script>
	 	$(function(){
	 		$('#btn1').click(function(){
	 			// 동기식 통신: location.href =  '요청 url?쿼리스트링';
	 			// 비동기식 통신: 
	 			// $.ajax()메소드 호출: 객체를 하나 만들어서 {} 보낸다 
	 				$.ajax({
	 					url: 'jqAjax1.do',
	 					data: {input : $('#input1').val()},
	 					type: 'get',
	 					success: function(result){
	 						//console.log(result);
	 						$('#output1').text(result);
	 					},
	 					error: function(){
	 						alert('ajax 통신 실패');		
	 					},
	 					complete: function(){
	 						console.log('asdgawe4rg');
	 						
	 					}
	 				});
	 		});
	 		
	 	});
	 	
	 </script>
	 
	 <hr>
	 <h3> 2. 버튼클릭시 post방식으로 서버에 데이터 전송 및 응답 </h3>
	 이름 : <input type="text" id="input2_1"><br>
	 나이: <input type="number" id="input2_2"><br>
	 <button onclick="test2();">요청</button>
	 응답: <label id="output2">현재 응답 없음</label>
	 	 	 
	 <script>
	 	function test2(){
	 		$.ajax({
	 			url : 'jqAjax2.do',
	 			data: {
	 				name: $('#input2_1').val(),
	 				age: $('#input2_2').val()	 				
	 			},
	 			type: 'post',
	 			success : function(result){
	 				// console.log(result);
	 				
	 				$('#output2').text(result);
	 			},
	 			error : function(){
	 				alert('AJAX통신 실패');
	 			}
	 			
	 			
	 		});
	 		
	 	}
	 </script>
	 </p>
		
</body>
</html>

 

@WebServlet("/jqAjax1.do")
public class AjaxController1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxController1() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//get방식: 인코딩 필요없음
        // data 속성의 key-value로 전달한 input의 value를 request.getParameter로 뽑는다
		String str = request.getParameter("input");
	
		// 응답페이지를 지정하지 않았음에도 오류가 뜨지 않고 기존 페이지가 유지되면서 요청이 넘어간다...
		
		System.out.println("요청시 전달값: "+str);
		System.out.println("입력된 값: "+str +", 길이"+str.length());
		
		//ajax는 페이지를 response로 주지 않고 데이터를 response로 줌
		// 혹시라도 응답데이터에 한글이 있을 경우를 대비하여
		// 항상 응답데이터에 대해 인코딩을 먼저 설정해야함
        // response의 setContentType메소드
		
		response.setContentType("text/html; charset=UTF-8"); 
		
		// 응답: response.getWriter()
		// ==> jsp와의 통로를 열어준다 (자바코드 안에 html코드를 넣을 때 썼음)
        // 응답을 내보낼 출력 스트림을 얻은 후 
        // 스트림에 텍스트를 기록
        
        
		response.getWriter().print("입력된 값:"+str+",길이"+str.length());
		// 응답은 요청한 메소드로 보냄
		// 요청한 메소드의 매개변수로 보냄
        // 요청 성공시: 호출한 함수의 success의 value 함수의 매개변수로 print 내부값 전달
        // 요청 실패시: 호출한 함수의 error의 value 함수의 매개변수로 print 내부값 전달
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 

 

 

 

 

References

https://www.w3schools.com/xml/ajax_intro.asp

AJAX Introduction

https://www.w3schools.com/jquery/ajax_ajax.asp

jQuery ajax() Method

http://www.tcpschool.com/jquery/jq_ajax_method#google_vignette

코딩교육 티씨피스쿨

https://tomcat.apache.org/tomcat-4.1-doc/servletapi/javax/servlet/ServletResponse.html

ServletResponse (Servlet and JavaServer Pages API Documentation)