[jQuery] Ajax 비동기 처리

 

목차

 

Ajax 란?

Ajax란 Asynchronous JavaScript and XML의 약자로서, 비동기 방식으로 서버와 통신할 수 있도록 하는 새로운 개발 기법입니다. 기존 방식의 웹에서는 웹 브라우저가 웹 서버에 요청을 전송하면, 웹 서버는 요청을 처리한 후 처리 결과를 HTML로 생성해 웹 브라우저에 전송합니다. 이렇게 되면 새로운 페이지 전체가 다시 로딩되기까지 사용자는 흰 화면에서 대기 상태에 놓여있어야 합니다. 반면, Ajax를 이용하면 페이지 전환 없이 한 페이지 내에서 서버로 값을 보내고 받아올 수 있으며 서버와 통신하는 중에도 다른 작업을 수행할 수 있게 됩니다. 이러한 방식을 비동기 처리라고 합니다. jQuery에서는 Ajax 기능을 손쉽게 구현할 수 있도록 여러 메소드를 제공하고 있습니다.

 

Ajax 장점

1. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.
2. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있습니다.
3. 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있습니다.
4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있습니다.

 

Ajax 한계

1. Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다.
2. Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.
3. Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없습니다.
4. 클라이언트의 PC로 Ajax 요청을 보낼 수는 없습니다.

 

Ajax 동작 원리

이미지 출처 http://www.tcpschool.com/ajax/ajax_intro_works

1. 사용자에 의해 요청 이벤트가 발생합니다.
2. 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출됩니다.
3. 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냅니다. 이때 웹 브라우저는 요청을 보내고 나서 서버의 응답을 기다리지 않고 다른 작업을 처리할 수 있습니다.
4. 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리합니다.
5. 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달합니다. 이때 새로운 페이지를 전부 보내지 않고 필요한 데이터만을 응답으로 전달합니다.
6. 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출합니다.
7. 웹 페이지의 일부분만이 다시 로딩되어 표시됩니다.

 

 

$.ajax([settings]) 메소드

비동기 HTTP 요청을 수행하는 메소드로서, jQuery Ajax 메소드의 핵심입니다. 매개변수로 설정 가능한 settings는 HTTP 요청을 구성하는 키와 값의 쌍입니다.

 

주요 settings

setting	Type	설명
url	String	클라이언트가 HTTP 요청을 보낼 서버의 주소
type	String (GET, POST)	HTTP 요청 방식. type은 method의 alias로서, method를 사용해도 된다.
data	PlainObject or String or Array	HTTP 요청과 함께 서버로 보낼 데이터
dataType	String (text, xml, json, script, html)	서버로부터 응답받은 데이터의 타입
success	Function( Anything data, String textStatus, jqXHR jqXHR )	요청에 대해 응답이 성공한 경우 호출되는 함수. 세 개의 인자를 전달받는데, 서버로부터 응답받은 data와, 현재 상태를 설명하는 status, 그리고 jqXHR이다.
error	Function( jqXHR jqXHR, String textStatus, String errorThrown )	요청에 대해 응답이 실패한 경우 호출되는 함수. 세 개의 인자를 전달받는데, jqXHR, 발생한 에러의 타입을 설명하는 status, 그리고 HTTP 상태의 텍스트 일부를 수신하는 errorThrown이다.

 

dataType:"text"

버튼 클릭시 페이지 전환 없이 클라이언트가 입력한 텍스트를 서버로 전달하고, 서버로부터 다시 텍스트 데이터를 응답받아 출력하는 프로그램입니다.

 

test_text.html

<script type="text/javascript">
$(function () {
	$("#a").on("click", getData);
});
function getData() {
	/* $.ajax( { jsonObject형식으로 설정 
	    key: 데이터 ,
	    key: 함수 설정 가능
	 } ) */
	 $.ajax({
		type: "get", 			//1.서버에 요청하는 방식(get/post) 
		url: "test_text.jsp", 		//2.서버에 요청되는 주소 
		data: {					//3.클라이언트가 서버에 전달할 데이터 
			v1: $("#v1").val(), 
			v2: $("#v2").val()
		},
	 	dataType: "text", 		//4.서버로부터 받아온 응답 데이터의 타입
	 	success: function (data, status, xhr) { //5-1.요청에 대한 응답이 성공했을때 동작할 함수
	 		$("#result").text(data);			//data변수: 응답으로 비동기 전송된 data
		},
		error: function (xhr, status, error) { //5-2.요청에 대한 응답이 실패했을때 동작할 함수
			 console.log("error", e, status);
		}
	 });//end ajax 
}
</script>
<button id="a">ajax요청</button><br>
v1:<input type="text" name="v1" id="v1"><br>
v2:<input type="text" name="v2" id="v2"><br>
<div id="result"></div>

 

test_text.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String v1 = request.getParameter("v1");
	String v2 = request.getParameter("v2");
%>
<%= v1+" "+v2+" 서버로부터 응답" %>

 

dataType:"json"

버튼 클릭시 페이지 전환 없이 서버로부터 데이터를 응답 받는데, 응답 데이터가 json 객체의 배열인 경우를 살펴보겠습니다.

 

test_json.html

<script type="text/javascript">
$(function () {
	$("#a").on("click", getData);
});
function getData() {
	$.ajax({
		type:"get", 
		url:"test_json.jsp",  
		dataType:"json",
		success: function (data, status, xhr) {
			$.each(data, function (idx, v) { //배열 방 하나씩 꺼낸 v는 json객체 
				$("#result").append(v.username+":"+v.age+"<br>");
			});
		},
		error: function (xhr, status, error) {
			$("#result").text(error);
		}
	});//end ajax
}
</script>
<button id="a">ajax요청</button>
<div id="result"></div>

 

test_json.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String name = "홍길동";
int age = 20;
%>
[
	{"username":"<%= name %>", "age":"<%= age %>"},
	{"username":"이순신", "age":"10"},
	{"username":"유관순", "age":"20"}
]

 

 

 

참고

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

http://www.tcpschool.com/ajax/intro