AJAX 편
Q. Ajax란 무엇인가?
만약 페이지 내용의 일부를 업데이트 하고자한다. 보통의 경우는 해당 페이지에서 서버에게 request
를 보내고 response를 받아 갱신한다. 그런데일부를 업데이트 하기위해 전체를 갱신(업데이트)하면
이게 무슨 자원 낭비란 말이냐. 소를 위해 대를 희생해야 하는가. 의문을 가진다.
이게 무슨 자원 낭비란 말이냐. 소를 위해 대를 희생해야 하는가. 의문을 가진다.
그래서 개발한 게 Ajax이다. Ajax는 html 전체 페이지가 아니라 업데이트가 필요한 부분만 객체
(ex.XMLHttpRequest )에 담아 요청한다. 이는 주로 Json이나 xml형태이다. 이렇게 필요한 데이터만
response로 다시 받아서 해당되는 페이지의 필요 부분만 업데이트 시켜준다. 그러면 자원 낭비를 줄
일 수 있다.
소를 위해 대를 희생하지 않는 것. 자원 낭비를 줄이는 것. 이것이 Ajax라 할 수 있다.
*Ajax는 Asynchronous Javascript and Xml의 약자이다. 해석하자면 비동기적 자바스크립트와
xml이라고 할 수 있다.
*참고로 이 인터뷰에서는 중요한 것을 표시하기 위해 😎를 사용했다.
Q. Ajax가 사용하는 파일 형태는 무엇인가?
Ajax가 객체를 담아 요청을 보내거나 응답을 받는 파일 형태에는 XML, JSON, text 등이 있다.
데이터가 많거나 규격화해야 한다면 XML, JSON 파일 사용하길 권장한다.
Q.😎 Ajax가 데이터를 요청하는 방식은 어떤 것들이 있는가?
Ajax가 데이터를 요청하는 방식에는 크게 두 방식이 있다.
(1)Get 요청 방식
(2)Post 요청 방식
이들을 예시를 통해 살펴 보도록 하겠다.
(1)Get 방식
먼저, 여기서 type은 데이터 요청 방식을 결정하는 속성이다. 여기서는 get요청 답게 type:
‘get’으로 설정하였다.
그렇다면 dataType은 무엇인가, 하면 이는 데이터를 다시 받을 때 text 형태로 받겠다는 소리
다.
success: function은? 이 #get 아이디를 걸어놓은 태그를 클릭하면 이 함수를 실행한다는 것
이다.
실행되는 순서는 다음과 같다.
#get을 클릭하면 get 방식으로 url에게 요청을 보낸다. 요청의 응답을 text 형태로 받으면, 이
data를 success : function 안에 넣어서 함수를 실행 시켜 결과를 가져온다.
(2) Post 방식
실행순서는 다음과 같다.
post 방식으로 data 안에 있는 내용을 url에 적혀있는 주소로 값을 요청한다. 값은 datatype인
text 형태로 가져와서 success : function에 넣어서 함수를 실행시킨다. 함수에서 결과가 도출
된다.
Q. Ajax 사용법은?
Ajax를 사용하는 방법은 다음과 같다.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
/* 0. $.ajax('파일url', {옵션}*); - 가장 기본적인 형태*/
$.ajax('date.jsp', {
success : function(data){
alert(data);
$('body').append(data);
}
});
// * 옵션은 객체형태{}여야 한다.
/* 1. $.ajax({옵션});과 url을 속성으로 정의한 경우*/
$.ajax({
url : 'date.jsp',
success : function(data){
alert(data);
$('body').append(data);
}
});
});
</script>
[date.jsp]
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
</style>
</head>
<body>
<h1><%= new java.util.Date() %></h1>
</body>
</html>
1번의 결과)
2번의 결과)
Q. $.ajax() 메서드 안에 속성으로 설정할 수 있는 옵션들은 무엇이 있는가?
노랑 형광펜으로 밑줄을 친 옵션들은 중요하다. 꼭 알고 가야한다.
그런데, 사람들은 이 옵션들을 사용하기 귀찮아서 이 보다 더욱 편리한 메서드 만들었다.
Q. 만약 요청/응답하는 파일의 타입을 달리하면, 파일을 사용하는 메서드들도 달리 해야하지 않는가?
맞다. 아주 slightly하게 문법이 달라진다. 그러나 ajax를 사용하는 큰 맥락은 비슷하다.
이 <추가적인 jQuery Ajax 메서드>에서 주의깊게 볼 부분은 getJSON()과 같이 타입이 다른 파
일(ex. json, xml)들을 파일url로 가져와 사용하는 것이다.
이 메서드(<추가적인 jQuery Ajax 메서드>)를 사용하는 예시는 다음과 같다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
/* 1. get() 메서드 사용 */
$.get('date.jsp', function(data){
alert(data);
$('body').append(data);
});
/* 2. load() 메서드 사용 */
$('body').load('date.jsp');
😎/*3. getJSON() 메서드 */*
$.getJSON('data.json.json*', function(data){
$.each(data, function(key, value){
var str = '<h1>' + value.name + ' : '+ value.price + '</h1>';
$('body').append(str);
});
});
😎/*4. xml 파일 처리 메서드 */
$.ajax({
url : 'data.xml',
success : function(data){
$(data).find('menu').each(function(){
//data.xml에서 이름에 해당하는 태그 내용들을 가져온다.
var name = $(this).find('name').text()
var price = $(this).find('price').text()
//h1태그 가져와서 가공 후, body에 넣어주기.
$('<h1></h1>').text(name + ' : ' + price).appendTo('body');
});
}
});
});
</script>
<style>
</style>
</head>
<body>
</body>
</html>
3번 getJSON()메서드에서 사용했던 [data.json.json] 파일은 다음과 같다.
[
{
"name" : "자장면",
"price" : 6000
},{
"name" : "짬뽕",
"price" : 7000
},{
"name" : "우동",
"price" : 7000
}
]
4번 xml파일 메서드에서 사용했던 [data.xml] 파일은 다음과 같다.
<?xml version="1.0" encoding="UTF-8"?>
<menus>
<menu>
<name>자장면</name>
<price>5000</price>
</menu>
<menu>
<name>짬뽕</name>
<price>6000</price>
</menu>
<menu>
<name>탕수육</name>
<price>10000</price>
</menu>
</menus>
3번과 4번 실행 결과(동일하다))
Q. Ajax에서 가장 중요한 부분이 있다면?
이번 인터뷰에서 꼭 알아두어야 할 것을 뽑으라면,
- get/post 방식을 사용하는 방법
- json/xml 등 다른 형태의 파일들을 방법
이라 할 수 있다.
Q. 시간이 흐를 수록, 글쓰는 실력이 하락하고 있다. 이에 대해 어떻게 생각하는가?
맞다. 요즘 인터뷰 컨텐츠에 대한 흥미가 떨어지고 있다. 그래서 새로운 컨텐츠는
무엇이 있을까 고민하고 있다.
더불어 요즘따라 책을 읽지 않아 어휘력이 현저하게 하락하고 있는 중이다.
인터뷰어가 정확하게 파악했다. 글솜씨를 키우도록 분발해보겠다.
댓글 없음:
댓글 쓰기