안녕하세요. 명월입니다.
이전 포스트까지 우리는 Jquery에 대해 공부하였습니다.
이번 포스트에서는 Jquery를 통한 비동기 통신(Ajax)에 대해 공부하겠습니다.
지금까지 웹 서버와 브라우저 간에 문서(HTML)를 주고 받는 통신을 하는 것을 공부했습니다. 그런데 우리가 웹 페이지를 다루다 보면 겉의 형태는 같은데 내용을 다르게 해야 할 경우가 있습니다. 그럴 때마다 HTML 문서를 만들고 그 안의 데이터를 넣는다는 것은 생산성이 매우 떨어 질 것입니다. 그렇게 작성을 한다 하여도 전부 재사용을 한다면 생산성이 매우 떨어지는 편은 아니겠네요..
그러나 우리가 지금 공부하고자 하는 것은 Html문서는 그대로 있고 Jquery을 이용해 백그라운드 통신에 대해 공부를 하는 것입니다.
작성방법은 웹 페이지는 만들지만 데이터를 취득하는 부분을 다르게하여 처리하면 됩니다.
그럼 예제를 통해서 자세히 공부해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.11.3.min.js" language="javascript"></script>
<style>
body > table{
border-top : 1px solid #000;
border-left : 1px solid #000;
padding : 0px;
border-spacing:0px;
width:100%
}
body > table > thead > tr > th,
body > table > tbody > tr > td{
border-right : 1px solid #000;
border-bottom : 1px solid #000;
}
</style>
</head>
<body>
<input type="button" value="setup1"><br />
<input type="button" value="setup2"><br />
<table>
<tbody>
<tr>
<td>1</td>
<td>empty</td>
</tr>
<tr>
<td>2</td>
<td>empty</td>
</tr>
<tr>
<td>3</td>
<td>empty</td>
</tr>
<tr>
<td>4</td>
<td>empty</td>
</tr>
<tr>
<td>5</td>
<td>empty</td>
</tr>
</tbody>
</table>
</body>
</html>
위 소스예제는 웹페이지에 table를 만들고 하위 테이블 컬럼에 값을 넣어서 표시 했습니다.
여기서 우리가 만들 비동기 프로그램은 setup1 를 누르면 empty 대신에 test1, test2, test3, test4, test5가 되고 setup2를 누르면 empty가 hello1, hello2, hello3, hello4, hello5값으로 변경되는 프로그램을 작성하겠습니다.
그럼 비동기 데이터 파일을 만들어 보기로 하겠습니다.
test1,test2,test3,test4,test5
data1.txt를 위 그리드 처럼 하나 만들었습니다.
hello1,hello2,hello3,hello4,hello5
그리고 또 data2.txt를 위 그리드처럼 만들고, data1.txt 값과 data2.txt값을 받아서 테이블에 표시하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.11.3.min.js" language="javascript"></script>
<style>
body > table{
border-top : 1px solid #000;
border-left : 1px solid #000;
padding : 0px;
border-spacing:0px;
width:100%
}
body > table > thead > tr > th,
body > table > tbody > tr > td{
border-right : 1px solid #000;
border-bottom : 1px solid #000;
}
</style>
<script language="javascript">
$(function(){
bindAjax("setup1","data1.txt");
bindAjax("setup2","data2.txt");
});
function bindAjax(bindname,name){
$("input[type=button][value="+bindname+"]").bind("click",function(){
$.ajax({
type:"GET",
url:name,
success:function(msg){
var data = msg.split(',');
for(var i=0;i<data.length;i++){
insertData(i+1,data[i]);
}
},
error:function(xhr,status,error){
alert(error);
}
});
});
}
function insertData(idx,data){
$("table > tbody > tr:nth-child("+idx+") > td:nth-child(2)").html(data);
}
</script>
</head>
<body>
<input type="button" value="setup1"><br />
<input type="button" value="setup2"><br />
<table>
<tbody>
<tr>
<td>1</td>
<td>empty</td>
</tr>
<tr>
<td>2</td>
<td>empty</td>
</tr>
<tr>
<td>3</td>
<td>empty</td>
</tr>
<tr>
<td>4</td>
<td>empty</td>
</tr>
<tr>
<td>5</td>
<td>empty</td>
</tr>
</tbody>
</table>
</body>
</html>
위 그리드 처럼 기존 html 소스 위에다가 Jquery에 Ajax통신 부분을 만들었습니다.
그리고 setup1 버튼을 누르자 위와 같이 text1,text2...처럼 값이 변경이 되었습니다.
또, setup2 버튼을 누르면 위와 같이 hello1,hello2...로 값이 변경이 되었습니다.
예제를 콤마 구분의 텍스트 문서로 전송하여 그 값을 비동기 즉, 백그라운드 통신으로 받아서 테이블에 표시를 하는 처리까지 공부했습니다.
그러나 실제 비동기 통신을 할 때는 이렇게 콤마구분으로 텍스트 데이터를 전송하지 않습니다. 예전에 우리가 Java로 소켓통신을 공부 할 때 xml를 이용해서 문서을 주고 받았습니다. 그러나 웹문서의 구조는 html, 즉 xml의 형태이기에 데이터 형식를 xml로 전송하기에는 데이터 처리시 헷갈리기 쉬울 것입니다. 실제 헷갈리지 않는다고 해도 보통 ajax처리는 xml로 하지 않습니다. 그렇다면 Jquery의 비동기는 어떤 형식로 주고 받을까요?Jquery는 Json이라는 구조형식으로 된 데이터 형식구조를 정보로 주고 받습니다. Json이 무엇인지에 대해 자세히 공부하겠습니다.
xml의 구조형식을 생각할 때 보통 태그 형식의 노드 안에 데이터를 집어 넣거나 또는 하위 노드를 만들어서 트리 구조의 데이터로 전개가 가능합니다.
실제 웹 문서 같은 경우도 xml과 같은 구조로 되어있습니다. Json의 구조 개념은 xml과 같습니다.그러나 표현형식이 조금 다른것 뿐입니다.
예로 xml은 <노드>값</노트>의 형식으로 구성되어 있으면 Json의 형식은 {“노드”:”값”} 의 형태로 구성하면 됩니다.
그리고 <노드><노드>값</노트></노트>의 형식은 {“노드”:{“노드”:”값”}} 의 형태로 표현됩니다.
Json의 형식에 대해 공부하였으니 이번에는 위 예제를 Json의 형식으로 바꾸겠습니다.
{"data1":"test1","data2":"test2","data3":"test3","data4":"test4","data5":"test5"}
{"data1":"hello1","data2":"hello2","data3":"hello3","data4":"hello4","data5":"hello5"}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.11.3.min.js" language="javascript"></script>
<style>
body > table{
border-top : 1px solid #000;
border-left : 1px solid #000;
padding : 0px;
border-spacing:0px;
width:100%
}
body > table > thead > tr > th,
body > table > tbody > tr > td{
border-right : 1px solid #000;
border-bottom : 1px solid #000;
}
</style>
<script language="javascript">
$(function(){
bindAjax("setup1","data1.txt");
bindAjax("setup2","data2.txt");
});
function bindAjax(bindname,name){
$("input[type=button][value="+bindname+"]").bind("click",function(){
$.ajax({
type:"GET",
url:name,
dataType:"json",
success:function(msg){
insertData(1,msg.data1);
insertData(2,msg.data2);
insertData(3,msg.data3);
insertData(4,msg.data4);
insertData(5,msg.data5);
},
error:function(xhr,status,error){
alert(error);
}
});
});
}
function insertData(idx,data){
$("table > tbody > tr:nth-child("+idx+") > td:nth-child(2)").html(data);
}
</script>
</head>
<body>
<input type="button" value="setup1"><br />
<input type="button" value="setup2"><br />
<table>
<tbody>
<tr>
<td>1</td>
<td>empty</td>
</tr>
<tr>
<td>2</td>
<td>empty</td>
</tr>
<tr>
<td>3</td>
<td>empty</td>
</tr>
<tr>
<td>4</td>
<td>empty</td>
</tr>
<tr>
<td>5</td>
<td>empty</td>
</tr>
</tbody>
</table>
</body>
</html>
최초 텍스트 문서와 다른 점이라는 split처를 통해 우리가 그 데이터의 구분을 만드는 게 아니고 Jquery 내에서 Json타입을 구조적으로 나누어서 class형식으로 반환을 해줍니다.. 실제로 사용하게 되면 Json의 형식을 사용하는 편이 편리하고 에러율을 줄일 수 있다고 생각됩니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [HTML] 메타 태그(SEO 최적화 포함) (0) | 2020.01.12 |
|---|---|
| [HTML] Html의 태그 구조 (1) | 2020.01.09 |
| [Jquery] Jquery의 이벤트(Event) 관련 함수 - 2 (Mouse Events) (0) | 2016.03.30 |
| [Jquery] Jquery의 이벤트(Event) 관련 함수 - 1 (Attachment) (2) | 2016.03.29 |
| [Jquery, CSS] Jquery의 CSS 관련 함수 (0) | 2016.03.28 |
| [Jquery] Attributes 관련 함수 (0) | 2016.03.27 |
| [Jquery] Selector (선택자) (0) | 2016.03.26 |
| [Jquery] Jquery 기초 (0) | 2015.07.04 |