* Ajax (Asynchronous JavaScript + XML)
JavaScript와 XML을 이용한 비동기 통신처리를 구현하는 기술
-> JavaScript로 웹 페이지 전체를 다시 읽어 들이지 않고 서버와
데이터를 주고 받는 경우에 사용함.
JavaScript를 이용해서 서버에서 데이터를 가져와 페이지 전체의
갱신(refresh)없이 특정 부분만을 변경하는 것이 가능합니다.
이러한 처리를 가능하도록 하는 것이 Ajax입니다.
웹브라우저는 웹페이지를 표시하기 위해 서버로부터 HTML파일을
가져와서 HTML을 해석한 후 화면에 뿌려줍니다.
예를들어 유저가 새로운 정보를 가져와 웹 페이지 전체를 갱신
합니다. 이러한 프로세싱 과정, 즉 브라우저가 서버로부터 HTML을
읽어 들이고 해석하여 화면에 표시할 때 까지 유저는 기다리고
있을 수 밖에 없습니다. 하지만 Ajax를 이용하면 페이지의 일부분만
갱신하는 것이 가능함으로 웹사이트를 훨씬 유연하게 제작할 수 있고
처리 속도 향상과 유저의 사용성을 증가시킬 수 있는 장점이 있습니다.
* JSON (JavaScript Object Notation)
- JSON은 JavaScript Object Notation 의 약어로 XML 데이터를
대신하기 위해서 사용된다.
- JSON은 키와 값을 쌍으로 가지는 구조이다.
- 배열을 사용할 때는 대괄호([ ])안에 중괄호({ })를 사용하여 조합한다.
- jQuery에서는 JSON으로 표현한 데이터를 파일에 저장해 두었다가
필요할 때 이를 로드할 수 있는 $.getJSON()함수를 제공한다.
- jQuery Ajax 부가 메소드
$.ajax()
$.get() : get 방식으로 Ajax을 수행한다.
$.post() : post 방식으로 Ajax을 수행한다.
$.getJSON() : get 방식으로 Ajax를 수행해 JSON 데이터를 가져온다.
$.getScript() : get 방식으로 Ajax를 수행해 Script 데이터를
가져온다.
$(selector).load() : Ajax를 수행한 후에 선택한 문서 객체안에
응답받을 파일(문자열)을 불러온다.
-ajax 함수
$.ajax({
url : "전송 페이지",
type : "전송 방식(get, post방식),
data : "전송할 데이터",
dataType : "요청한 데이터 타입("html","xml","json","text"),
success : function(result){
전송 성공하면 실행될 문장;
}
});
.load() 함수와 ajax예제
<!DOCTYPE html>
<html>
<head>
<title>sample1</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.1.js">
</script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("p").load("sample1.txt");
$('#container').load('resource.html');
});
});
</script>
</head>
<body>
<button>변경</button>
<p>변경전</p>
<button> 서버로부터 데이터 가져오기 </button>
<div id="container"> 데이터 가져오기 전 </div>
</body>
</html>
-------------
sample1.txt 파일
sample1.txt 의 텍스트 입니다.
--------------------------
resource.html파일
hello world
----------------
변경 버튼을 누르면
변경전 문장이 sample1.txt 의 텍스트 입니다.로 바뀐다
서버로부터 데이터 가져오기 버튼을 누르면
div id가 container인 영역의 데이터를 가져온다
hello world 출력
load는 전체 내용을 불러와서 ("p") 태그 영역에 출력했다.
load함수를 ajax 함수형식으로 사용할때
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서버의 데이터를 대상 엘리먼트에 삽입하기</title>
<style type="text/css">
div {
width: 200px; height: 80px;
margin: 3px; float: left;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
/*
- load()를 이용했던 예제를 $.ajax() 함수를 사용해서 구현
- $.ajax()함수는 Ajax 요청을 설정하고 제어할 수 있도록 jQuery에서 제공하는 유틸리티 함수이다.i
*/
$(function() {
/*
- $.ajax()함수를 실행할 때 옵션으로 URL값(menu.html)을 지정하면 해당 URL서버로 Ajax요청을 한다.
- success 옵션에 지정한 콜백함수(function(data))는 요청이 성공했을 때 호출된다.
- 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
- $.ajax()함수는 서버에서 반환되는 데이터의 형식에 따라 다르게 동작한다.
서버측에서 html데이터를 반환하면 html을 받아와 처리하기 위해서 데이터 타입(dateType) 옵션에 html을 지정한다.
*/
$('#menu1').click(function () {
$.ajax({
url:'menu.html', // 서버의 불러올 파일명
dataType:"html",
success: function(data){ // 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
$('#message1').html(data); // 콜백함수로 전달된 data를 id가 message1인 엘리먼트에 설정한다.
}
});
return false;
});
$('#menu2').click(function () {
$.ajax({
url:'menu.html',
dataType:"html",
success: function(data){ // 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
$('#message2').html($(data).find('li')); // menu.html문서의 내용중 li엘리먼트만 읽어서 id가 message2인
} // 엘리먼트에 설정한다.
});
return false;
});
});
</script>
</head>
<body>
<div>
<a href="#" id="menu1">메뉴 보기 1</a><p>
<span id="message1"></span>
</div>
<div>
<a href="#" id="menu2">메뉴 보기 2</a><p>
<span id="message2"></span>
</div>
</body>
</html>메뉴 보기 1을 누르면 $('#menu1').click(function () 아래의 ajax함수 사용.
***************************************************************
아래의 예제에 나오는 함수 설명
- each 함수는 더이상 남은 데이터가 없을때까지 반복한다.
<tr>
<td> id </td>
<td> name</td>
<td>price</td>
<td>description</td>
</tr>
- append 메서드는 A의 자식 요소에 B요소를 추가하는 역할을 한다.
table id="treeDate" 뒤에 each함수의 <tr> <td> 태그를 붙어준다.
getJSON 함수와 ajax처리 예제 (JSON 파일)
일단 item.JSON 파일이다.
[
{
"id": "1",
"name": "레몬",
"price": " 3000",
"description": "레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다."
},
{
"id": "2",
"name": "키위",
"price": " 2000",
"description": "비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다."
},
{
"id": "3",
"name": "블루베리",
"price": " 5000",
"description": "블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다."
},
{
"id": "4",
"name": "체리",
"price": " 5000",
"description": "체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다."
},
{
"id": "5",
"name": "메론",
"price": " 5000",
"description": "메론에는 비타민A와 칼륨이 많이 포함되어 있다."
},
{
"id": "6",
"name": "수박",
"price": "15000",
"description": "수분이 풍부한 과일이다."
}
]
getJSON 함수 사용 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON 이용하기</title>
<style>
td {
border: 1px solid gray;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
- JSON은 JavaScript Object Notation 의 약어로 XML 데이터를 대신하기 위해서 사용된다.
- JSON은 키와 값을 쌍으로 가지는 구조이다.
- 배열을 사용할 때는 대괄호([ ])안에 중괄호({ })를 사용하여 조합한다.
- jQuery에서는 JSON으로 표현한 데이터를 파일에 저장해 두었다가 필요할 때 이를 로드할 수 있는 $.getJSON()함수를 제공한다.
- 서버로 부터 get방식의 요청을 하고, 응답을 JSON 형식으로 받기 위해서 $.getJSON()함수를 사용한다.
- $.getJSON()함수의 첫번째 매개변수는 서버의 URL주소를 지정한다. ('item.json')
- 서버로 요청이 성공적으로 완료되면, 두번째 매개변수로 기술한 콜백함수가 호출된다. (function(data, textStatus))
콜백함수의 첫번째 매개변수인 data는 서버에서 돌려받은 JSON 객체 형식의 데이터이고, 두번째 매개변수인 textStatus는 성공일때
"success" 라는 문자열이 전달된다.
*/
$(function() {
$.getJSON('item.json', function(data, textStatus) {
// alert(data);
// alert(textStatus); success
$("#treeData").append(
"<tr><td>id</td>" + "<td>name</td>"
+ "<td>price</td>" + "<td>description</td>" + "</tr>");
$.each(data, function() {
$("#treeData").append("<tr>" + "<td>"
+ this.id + "</td>" + "<td>"
+ this.name + "</td>" + "<td align='right'>"
+ this.price + "</td>" + "<td>"
+ this.description + "</td>" + "</tr>");
});
});
});
</script>
</head>
<body>
<table id="treeData"></table>
</body>
</html>
JSON함수 ajax함수로 사용 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON 이용하기</title>
<style>
td {
border: 1px solid gray;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
$.getJSON()함수 대신에 $.ajax()함수를 이용해서 JSON 형식의 데이터를 얻을 수 있다.
*/
$(function() {
$.ajax({
url : "item.json",
dataType : "json",
success : function(data) {
$("#treeData").append(
"<tr><td>id</td>" + "<td>name</td>"
+ "<td>price</td>" + "<td>description</td>" + "</tr>");
$.each(data, function() {
$("#treeData").append("<tr>" + "<td>"
+ this.id + "</td>" + "<td>"
+ this.name + "</td>" + "<td align='right'>"
+ this.price + "</td>" + "<td>"
+ this.description + "</td>" + "</tr>");
});
}
});
});
</script>
</head>
<body>
<table id="treeData"></table>
</body>
</html>
마지막으로 XML파일을 사용할때의 예제이다.
일반적으로 JSON이 편하기 때문에 JSON을 많이 사용하지만
전자정부프레임워크를 사용하는 기관등에선 XML파일 형식을 많이 사용한다고 한다.
item.xml파일
<?xml version="1.0" encoding="UTF-8"?>
-<items>
-<item name="레몬" id="1">
<price>3000</price>
<description> 레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다. </description>
</item>
-<item name="키위" id="2">
<price>2000</price>
<description> 비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다. </description>
</item>
-<item name="블루베리" id="3">
<price>5000</price>
<description> 블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다. </description>
</item>
-<item name="체리" id="4">
<price>5000</price>
<description> 체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다. </description>
</item>
-<item name="메론" id="5">
<price>5000</price>
<description> 메론에는 비타민A와 칼륨이 많이 포함되어 있다. </description>
</item>
-<item name="수박" id="6">
<price>15000</price>
<description> 수분이 풍부한 과일이다.</description>
</item>
</items>
XML파일을 get방식으로 로드하는 방식이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XML 파일을 GET 방식으로 로드하기</title>
<style>
td { border: 1px solid gray;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
/*
- $.get() 함수를 이용해서 item.xml 파일을 불러온다.
- $.get() 함수의 첫번째 매개변수에는 서버의 URL 주소를 지정한다.
- $.get() 함수의 두번째 매개변수인 콜백함수를 이용해서 서버에서 보내온 XML 형식의 데이터를 data 로 받늗다.
*/
$(function() {
$.get('item.xml', function(data) {
$("#treeData").append(
"<tr><td>id</td>" + "<td>name</td>"
+ "<td>price</td>" + "<td>description</td>" + "</tr>");
$(data).find('item').each(function() { // 서버에서 얻어온 데이터에서 셀렉터로 item태그를 찾는다.
var $item = $(this); // 6개의 item태그중 현재 처리중인 item태그를 this로 접근한후에 이를
$("#treeData").append("<tr>" + "<td>" // this로 접근한 후에 이를 $(this)를 사용하여 jQuery객체를
+ $item.attr("id") + "</td>" + "<td>" //생성함
+ $item.attr("name") + "</td>" + "<td align='right'>"
+ $item.find("price").text() + "</td>" + "<td>"
+ $item.find("description").text() + "</td>" + "</tr>");
});
});
});
</script>
</head>
<body>
<table id="treeData"></table>
</body>
</html>
JS파일을 get 방식으로 로드하기
test.js
function call(param){
return ("Hello, " + param);
}
js파일 로드하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트 로드하기</title>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
- 현재파일에서 자바스크립트 파일(test.js)을 get방식으로 요청하는 예제
- 자바스크립트 파일을 로드하기 위해서 $.getScript() 함수를 사용함.
*/
$(document).ready(function() {
$.getScript("test.js"); //자바스크립트 파일(test.js)을 $.getScript()함수로 호출한다.
$('#submit').click(function() {
var msg=call($('.username').val()); // 자바스크립트 파일(test.js)에 정의한 자바스크립트 함수 call()함수를 호출한다.
$('#message').html(msg); // call()함수 호출한 결과를 돌려 받아서 msg변수에 저장한다.
return false;
});
});
</script>
</head>
<body>
<form>
<label> 이름을 입력하세요 : </label>
<input type="text" name="username" class="username"/> <br/>
<input type="button" id="submit" value="전송"/>
<div id="message"></div>
</form>
</body>
</html>
GET방식의 ajax 함수들의 간단한 예제였다.
다음엔 댓글을 ajax로 비동기 방식으로 구현하는 방법을 작성할 예정이다.
'FRONT > Jquery' 카테고리의 다른 글
| ajax - 날짜(Date) 받아오기 , Date값을 String값으로 변환 (0) | 2021.08.24 |
|---|---|
| ajax post()함수로 jsp파일 로드(POST) (0) | 2021.08.23 |