이번엔 자바스크립트의 프레임워크인 프로토타입에서의 JSON 데이터 AJAX로 받아오는 것을 구현해봅니다.
* prototype.js는 http://www.prototypejs.org/download 에서 받으셔서 디렉토리에 넣으시면 됩니다.
1. http://marobiana.egloos.com/65298 에서 php배열을 json데이터로 변환한 것을 참고 하세요. (파일이름 : json.php)
여기서 아래 코드를 추가합니다.
$i = $_GET['i']; // 누른버튼이 어떤 버튼인지 식별하기 위해 url로 받아온 값을 $i에 저장
if(is_array($data[$i])){ // $data 배열에 $i 를 키로 넣었을때 그 배열이 존재 하는지 알아봄. 없다면 잘못된 값. (age나 blood_type만 있어야겠지요)
die(json_encode($data[$i]));
}
2. HTML 코드 작성(파일이름 : prototype_json.html)
<center>
<div id="wrap">
<div id="tab_title">
<form name="info" id="infom" action="#">
<input type="button" id="age" value="나이" />
<input type="button" id="blood_type" value="혈액형" />
</form>
</div>
<!-- 클릭한 것에 따라 AJAX에서 받아온 데이터가 아래에 보여지고 content 디비전이 나타나게 됨-->
<div id="content" style="display:none;">
<!--내용 들어갈 곳-->
<table border=1>
<tr>
<td>첫번째 사람</td>
<td id='val1'></td></tr> <!-- innerHTML(프로토타입의 update함수)를 통해 Ajax로받은 데이터가 들어간다-->
<tr>
<td>두번째 사람</td>
<td id='val2'></td><!-- innerHTML(프로토타입의 update함수)를 통해 Ajax로받은 데이터가 들어간다-->
</tr>
</table>
</div>
</div>
</center>
일반 스크립트에서 구현된 Ajax에서는 onclick 이벤트로 ajax를 호출하지만
이번엔 옵저버를 사용해서 그 부분은 빼버렸습니다.
3. 자바스크립트 코드를 prototype_json.html 에 추가합니다.
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
Event.observe(window , 'load' , init);
function init() {
$('age').observe('click' , function(event){getData('age')});
$('blood_type').observe('click' , function(event) {getData('blood_type')});
/* 클릭 이벤트 검사할 항목이 많다면 다음과 같은 방법도 있습니다. (init 함수 안의 내용) */
document.observe('click', function(event) {
var element = Event.element(event);
getData(element.identify());
});
문서 전체에 클릭 이벤트가 일어나는지 observe를 합니다.
클릭이 일어나면 그 이벤트가 일어난 element를 element변수에 저장합니다.
그 element객체의 아이디를 getData의 파라미터로 넘깁니다.
}
function getData(param) {
new Ajax.Request(
'json.php', // json이 있는 위치
{
method:'get',
parameters: {i:param},
/*
콜론이라는 점에 유의하세요.
param은 age또는 blood_type이 될것입니다.
?i=age 또는 ?i=blood_type 으로 사용되는걸 프로토타입에선 parameters로 제공하는것입니다
json.php에서 get으로 받아 사용하게 될겁니다.
*/
onSuccess: function(jsonData) {
var result = jsonData.responseText.evalJSON(true); // 객체로 만든다
var j=1;
for(var i in result){
var obj = document.getElementById("content"); // table 감싼 div를 보일지 말지
obj.style.display ="";
$('val'+j).update(result[i]);
j++;
}
}});
}
</script>
Event.observe(window , 'load' , init);
prototype에서 제공하는 옵저브 함수입니다. observe의 뜻은 '관찰하다'이지요.
이 함수를 통해서 로드 됐을 때 페이지 전체를 관찰합니다.
그리고 init 함수를 호출 합니다.
$('age').observe('click' , function(event){getData('age')});
프로토타입에서 $('아이디')를 하면 그 아이디를 객체로 가져오게 됩니다.
*****만약 해당아이디에 무슨 값이 있는지를 가져오고 싶다면...
(예를 들면 input type이 text인것의 사용자가 입력한 값을 가져오고 싶다면)
$F('아이디') 를 하면 됩니다.
아무튼 age라는 아이디를 가진 버튼에 클릭 이벤트가 주어지면 getData라는 함수를 콜하고 age를 파라미터로 넘깁니다.
age를 왜 넘길까요???
어떤 부분에서 클릭이 일어났는지를 알아야 그 부분에 대한 데이터를 받아오겠죠.
json.php에서 get으로 어디에서 클릭이 일어났는지 받게 되는데요.
그 값이 바로 getData의 파라미터인 것입니다.
new Ajax.Request(
method: 'get' 또는 'post',
parameters: {저장될 곳:값},
onLoading: function() { },
onFailure: function() { },
onComplete: function() { },
onSuccess: function(data){
// 리턴값으로 받아진 내용을 가지고 여기서 구현한다
var result = data.responseText;
}
)
method는 프로토타입에서 기본적으로 post방식으로 제공됩니다.
get인 경우 꼭 명시를 해주어야하고, post일 경우 생략 가능합니다.
onLoading은 Ajax통신을 시작할 때 함수 내용이 실행되며,
onSuccess는 통신이 성공되면 실행합니다.
onFailure는 통신이 실패했을때 실행하구요.
onComplete는 통신의 성공여부에 상관 없이 통신이 끝났을 때 실행하게 됩니다.
필요한 경우에 따라 적절히 사용하세요~
더 많은 옵션이 있지만 잘 안쓰는것 같으므로...
여기서는 onComplete를 사용해도 됩니다.
php에서 보내준 문자열을 eval함수를 통해 객체화 시킵니다.
그냥 자바스크립트에서는 var result = eval("(" + xmlHttp.responseText + ")"); 이렇게 사용했었는데
프로토타입에서는 var result = jsonData.responseText.evalJSON(true); 이렇게 쓰네요.
자세히 뜻은 모르겠지만 json에 대해 적절히 처리를 해주는듯 합니다.
$('val'+j).update(result[i]);
이부분은 innerHTML과 같습니다.
아이디가 'val1' 또는 'val2'인 곳에 result[i] 값을 넣어주는것이죠.
덧글