이글은 http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=7015 에서
해수(vikal) 님의 글입니다.
=====================================================================================
초보적인것이니 고수님들은 살짝 피해가주셔요^^
미니위니에도 ajax에 관한게 많이 올라왔는데 prototype에 대한내용은없는것같더군요.
prototype외에도 여러가지가 있지만 오늘 소개해드릴내용은 prototype을 이용합니다.
prototype의 단점은 파일 크기가 크다는것이지만 여러모로 쓸곳이 많아 좋습니다.
ajax에대한 어느정도의 개념을 알고계시다고생각하고
간단하게 설명드리고 자세한 설명은 주석으로 대체하겠습니다.
예제는 여기를 통해 확인해주시고
소스는 여기를 통해 받으시면 됩니다.(ajax.js,ajax.php,loading.gif,prototype.js,show.php)
ajax.php 메인페이지입니다.
<meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
<head>
<script src="prototype.js"></script>
<script src="ajax.js"></script>
</head>
<body onload="$('index').focus();">
<input type="text" name="index"><br>
<input type="button" value="전 송" onclick="ajaxSubmit();"><a id="loading"></a>
<div id="show"></div>
</body>
쓰려는 prototype.js를 불러오고 간단한 인풋폼과 전송단추입니다.
loading부분은 로딩이미지가 나오는곳인데요. 뭐딱히 쓸데는없습니다만 미관상;
프로토타입이 정말편한게 document.getElementById('index')이런식으로 불러올껄 $('index')이런식으로
불러올수있어
아주 편리합니다. $F('id')는 value입니다.
결과값은 show부분에 나오게됩니다.
ajax.js 파일입니다.
function ajaxSubmit(){
if(!$F('index')){
alert('내용이 없습니다.');
$('index').focus();
return false;
} //input값확인
var load_img = $("loading");
var img = "<img src="loading.gif">";
load_img.update(img); //로딩이미지^^;;
//객체를 생성합니다. xmlHttp어쩌고~~를 아주 손쉽게 만들수있습니다.
//show.php로 요청을하겠다는의미이고요 mehtod,asynchronous등은 기본값이라
//생략이 가능합니다. parameters부분에 보낼값들을 정해주시면됩니다.
//보낼값을 더주실때는 (,)콤마를 구분자로 index:$F('index'),name:$F('name')....
var myAjax = new Ajax.Request('show.php',
{
mehtod: 'post',
asynchronous: true,
parameters: {
index: $F('index')
},
onComplete: showAjax //가장중요한 콜백부분입니다.
});
$('index').value = '';
}
function showAjax(originalRequest) {
var a = originalRequest.responseText; //콜백받으면
var b = $('show');
b.update(a); //show부분에 업데이트
var load_img = $("loading");
var img = "";
load_img.update(img); //로딩이미지초기화;
$('index').focus();
}
show.php부분입니다.
<?PHP
$index = $_REQUEST['index'];
echo $index;
?>
아주간단합니다.; $_REQUEST로 받아오시면되고요. 그다음에 php에서 지지고 볶고 하면됩니다.
간단하게 하려다보니 이렇게됬습니다. php부분에서 $index라는 변수로 받아왔으니 그다음부터는 맘대로하시면됩니다.
로딩이미지를 보여드리려했으나.. 너무빨라 보이지도 않는군요 ㅋ
아주 간단합니다. 도움되시길바랍니다.
[펌] prototype을 이용한 간단한 ajax예제
bibaram- 22 January 2008, 09:54:59
Category
Popular Posts
- Sponsored Ad -
