-
Ajax library 만들어서 사용하기.(샘플)Programming/AJAX 2011. 3. 2. 16:14
간단하게 라이브러리 만들어서 호출하는 식으로 사용합니다.
test.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.displaybox{
width:150px;
background-color:#fff;
border:2px solid #000;
padding:10px;
font:24px normal verdana;
}
</style>
<script type="text/javascript" src="myAJAXlib.js"></script>
<script type="text/javascript">
function cback(text){
document.getElementById('showtime').innerHTML = text;
}
function ctime(text){
var servertime = text.getElementsByTagName("timenow")[0].childNodes[0].nodeValue;
document.getElementById('showtime').innerHTML = '서버시간: '+servertime;
}
//<input type="button" value="타임" onclick="doAjax('telltimeXML.php','','ctime','post','1')">
</script>
</head>
<body>
<form name="form1">
<input type="button" value="테스트" onclick="doAjax('libtest.php','param=hello','cback','get','0')">
<input type="button" value="시간테스트" onclick="doAjax('telltimeXML.php','','ctime','post','1')">
</form>
<div id="showtime" class="displaybox"></div>
</body>
</html>
myAJAXlib.js
//브라우저 종류 판별을 이용한 방법
/*
function getXMLHTTPRequest(){
var req = false;
if(window.XMLHTTPRequest){
req = new XMLHTTPRequest();
}else{
if(window.ActiveXObject){
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
}catch(err){
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
}catch(err){
req = false;
}
}
}
}
return req;
}
*/// 브라우저에 무관하게 객체 생성
function createREQ(){
try{
req = new XMLHttpRequest(); /* 파이어폭스 등*/
}catch(e){
try{
req = new ActiveXObjext("Msxml2.XMLHTTP");
/* IE 일부버전*/
}catch(e){
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
/* IE 일부버전*/
req = false;
}
}
}
return req;
}function requestGET(url, query, req){
myRand=parseInt(Math.random()*99999999);
req.open("GET",url+'?'+query+'&rand='+myRand,true);
//req.open("GET",url+'?'+new Date().getTime();,true);
req.send(null);
}function requestPOST(url,query,req){
req.open("POST",url,true);
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
req.send(query);
}function doCallback(callback,item){
eval(callback+'(item)');
}function doAjax(url,query,callback,reqtype,getxml){
//XMLHTTPRequest 객체의 인스턴스 생성
var myreq = createREQ();myreq.onreadystatechange = function(){
if(myreq.readyState == 4){
if(myreq.status ==200){
var item = myreq.responseText;
if(getxml ==1){
item = myreq.responseXML;
}
doCallback(callback,item);
}
}else{
document.getElementById('showtime').innerHTML ='<center><img src="amin.gif"></center>';
}
}if(reqtype == 'post'){
requestPOST(url,query,myreq);
}else{
requestGET(url,query,myreq);
}
}
GET 방식의 libtest.php
<?php
header("Content-Type: text/html;charset=euc-kr");
echo "인자값은 : ".$_GET['param'];
?>
POST방식의 telltimeXML.php
<?php
header('Content-Type:text/xml');
//sleep(3);
echo "<?xml version=\"1.0\" ?><clock1><timenow>".date('H:i:s')."</timenow></clock1>";
?>
위의 방식은 간단한 예제이며 테스트시 아래의 이미지는 post방식일 경우 3초간 sleep함수호출하여 딜레이 줬기때문에 필요한이미지입니다.
'Programming > AJAX' 카테고리의 다른 글
Ajax 기본 강의 문서. (0) 2011.03.02 prototype 사용한 테스트 Ajax 샘플 (0) 2011.03.02 AJAX 시스템 시간 샘플 (0) 2011.03.02 AJAX 와 관련된 프레임웍과 라이브러리 (0) 2011.02.12 AJAX 시작하기. (0) 2010.09.29
