PHP와 AJAX를 연동해보자

[ajax & php] PHP와 AJAX를 연동해보자

PHP와 AJAX를 연동해보자라... 참 거창합니다만 실상 알고보면 되게 허섭한 내용입니다 ^^ AJAX란 무엇인가? 복잡한 설명은 패스하고 간단하게 설명합니다.. AJAX는 어떠한 입력폼에 입력하고 전송할때 전송이 완료되어 모든 처리가 끝나기전까지 아무런 작업도 하지 못하고 기다려야 하는 부분이 해소되어 전송하면서도 계속해서 작업을 하거나 빈페이지를 보지 않고 진행상황을 직접 연출하는등 으로 지루함을 달랠수 있는 방법입니다... 간단히 예를 들어보면 우리가 게시판을 접속해서 목록을 보다가 두번째 페이지를 보려고 [2] 라는것을 클릭합니다... 이때 보통은 빈페이지가 보이거나 새로운 페이지를 불러오기 위해 리프래시(새로고침)가 되는 현상을 볼수가 있습니다.. 그러나 AJAX를 이용하게 되면 모든 처리가 완료되어 결과내용이 전달되면 바로 현재 보고있는 상태에서 내용이 바뀌어버립니다.. 그래서 기다릴 필요가 없게 되는거죠.. 그러나 이것도 단점이 있으니 지원하지 않는 브라우저나 OS가 있으며 어떤 오류가 생길때 해당 오류에 대해 정확히 파악을 할수가 없을때가 있다는것이 단점입니다.. 서론은 여기까지 하기로 하고요^^ 그럼 어떻게 연동을 하게 될까요.. 입력폼등 출력페이지를 제작할때 xmlHttpRequest 를 이용해서 하실수 있는데 이를 구성하는 방법이 쉽지많은 않습니다... 해서 간단한 소스를 보겠습니다... function createHttpRequest()
{ if(window.ActiveXObject) {
//Win e4,e5,e6용

try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) { // 위 부분이 실패하게 되면
try { // 여기로 넘어옵니다..
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) { // 이마저도 실패되면 아무값도 리턴하지 않습니다..
return null;
}
}
}
else if(window.XMLHttpRequest) { //그밖에 브라우저
// Win Max Linux m1,f1,o8,Mac s1 Linux k3 용 return new XMLHttpRequest();
}
else {
return null;
}
}
이렇게 함수로 묶었습니다.. 요것을 <script> 와 </script> 사이의 필요에 의해서 불러서 사용할수 있습니다.. ajax = createHttpRequest(); // 이런식으로 연결해서 사용할수 있습니다.. 그러나 요렇게만 해서 사용하게 되면 한글의 경우는 전송시 깨져서 나가기때문에 UTF-8 로 변경하는 작업이 필요하게 됩니다... 그부분을 함수로 묶어봤습니다... function sendRequest(callback,data,method,url,async,sload,user,password)
{ //callback 인자는 전송후 전달받은 값이 있을경우 처리할 곳을 의미합니다.. //data 는 전달시 필요한 데이터가 있으면 붙여주는곳이며 //method 는 POST 또는 GET 방식중 선택합니다.. //url 은 전송할 주소를 지정하는 곳이며 //async 비동기식이면 true 동기라면 false 로 지정합니다.. //sload 는 수퍼로드로 강제로드(true) 혹은 생략 false 로 사용할수 있습니다. //user 와 password 는 인증페이지인경우 전달하여 접근하도록 하는 인자입니다.. //XMLHttpRequest 오브젝트 생성 var oj = createHttpRequest();
if( oj == null ) return null; //강제 로드의 설정 var sload = (!!sendRequest.arguments[5])? sload:false;
if(sload || method.toUpperCase() == 'GET') url += "?"; // 메소드가 GET 이면 주소에 ?를 붙여주어 data 값을 전달하도록 합니다..
if(sload) url = url+"t="+(new Date()).getTime(); oj.onreadystatechange = function ()
{ // 전달된 값이 존재하면 콜백함수로 넘겨줍니다...
if ( oj.readyState == 4 ){ // 이부분은 상태가 전송완료인경우에 해당됩니다..
callback(oj);
}
}

// URL 인코딩
data = uriEncode(data); // 넘겨주는 data 값에 한글이 있을수 있으므로 utf-8 형식으로 포멧합니다..
if(method.toUpperCase() == 'GET') {
url += data;
} oj.open(method,url,async,user,password); //전송합니다.. //해더 application/x-www-form-urlencoded 설정 setEncHeader(oj); //헤더 설정하는 부분으로 케릭터셋도 함께 설정됩니다..
//send 메소드 oj.send(data); //전송할 data 값이 있으면 전송합니다.. //URI 인코딩 헤더 설정 function setEncHeader(oj) {
var contentTypeUrlenc = 'application/x-www-form-urlencoded; charset=UTF-8'; if(!window.opera) {
oj.setRequestHeader('Content-Type',contentTypeUrlenc);
} else {
if((typeof oj.setRequestHeader) == 'function')
oj.setRequestHeader('Content-Type',contentTypeUrlenc);
}
return oj;
}
//URL 인코딩
function uriEncode(data) { if(data!= "") {
//&와 = 로 일단 분해해서 encode

var encdata = '';
var datas = data.split('&');
for(i=1;i<datas.length;i++) {
var dataq = datas[i].split('=');
encdata += '&'+encodeURIComponent(dataq[0])+'='+encodeURIComponent(dataq[1]);
}
} else {
encdata = "";
}
return encdata; }
return oj; } 본 소스는 AJAX 입문이라는 책에서 참고한 내용입니다.. 실질적으로 사용할때는 onclick 또는 링크에 sendRequest("콜백함수명","전달할 데이터명","전송방식","전송할 주소","엔씽크","수퍼로드"); 형식이 되겠습니다... 콜백함수가 onloadl 이라면 function on_loadedl(oj) {
var res = decodeURIComponent(oj.responseText); document.all.testview.innerHTML = res;
} 이런식으로 전달받은 값을 사용하여 출력해줄수 있겠습니다... testview 는 전달받은 내용을 출력해줄 Div(레이어)나 테이블의 ID값등으로 지정하시면 되겠습니다.. 상당히 힘들수도 있는 부분임에도 끝까지 읽어주셔서 감사합니다..^^ 출처 : 우 린친구닷컴 - [ajax & php] PHP와 AJAX를 연동해보자 - http://urin79.com/zb/?mid=blog&category=100313&page=5&document_srl=375257