이미지(img)를 이용한 백그라운드 통신

글 추천, 즐겨찾기, 친구 추가 등
처리하고 나서 페이지 내용이 바뀌지 않아도 되는 것이 많이 있습니다

이럴 경우 보통
숨은 팝업창을 띄워서 처리를 한 후 처리가 끝나면 숨은창을 다시 닫는 방식을 많이 사용합니다
그러나 이용자가 팝업창을 금지하였을 경우에는
추가버튼등을 눌러도 아무런 액션이 일어나지 않아
이용자는 이를 오류라고 인식하게됩니다

그래서 해결방법으로 생각해본 것이 이미지를 이용한 통신방법입니다
iframe을 이용한 방법도 있겠으나 iframe을 이용하면 window.history가 바뀌어서
이용자가 앞/뒤가기를 눌렀을 경우 다르게 가게 됩니다

이미지를 이용한 통신이고 기존의 xmlHttp와 유사한 기능을 하므로
일단 "imgHttp"라고 이름을 지었습니다


기능은 다음과 같이 동작합니다

1. img src를 대체시킴으로써 서버에 쿼리를 전송합니다
2. 서버에서는 쿼리를 받아서 처리한 후 그 결과에 따라 크기가 다른 이미지를 출력합니다
3. 이미지 onload 시에 js가 이미지의 사이즈를 읽습니다
4. 미리 준비해놓은 메시지 배열에서 이미지 사이즈를 인덱스로 하여 메시지를 얼럿합니다


파일
1. imghttp.js
<!--
// 기본 이미지
var sImg = 'http://ib.emimg.com/blog/imghttp/default.gif';

// 얼럿 메시지
var rMsg = new Array();
rMsg[0] = '즐겨찾기에 추가하였습니다.';
rMsg[1] = '이미 즐겨찾기 되어있습니다.';
rMsg[2] = '즐겨찾기는 1,024개까지만 가능합니다.';

// 쿼리 전송
function imgHttpPost(sItem,sURL)
{
var o = document.getElementById('imgHttp_' + sItem);
var s = new Date().getSeconds();
o.src = sURL + '#' + s;
}
// 결과 수신
function imgHttpGet(sItem)
{
var o = document.getElementById('imgHttp_' + sItem);
if(o.src != sImg)
{
var i = o.width - 1;
window.alert(rMsg[i]);
}
}
//-->


2. html
<div style="position:absolute; top:0px; left:0px; z-index:0">
<img id="imgHttp_favorite" src="http://ib.emimg.com/blog/imghttp/default.gif" onload="imgHttpGet('favorite')">
</div>
<a href="javascript:imgHttpPost('friend','/infoserv/favorite/write.html')">즐겨찾기 추가</a>


3. php (처리하는 부분)
<?php
function imgHttp($nX)
{
$nX++;
$sURL = 'http://ib.emimg.com/blog/imghttp/'.$nX.'x1.gif';
header('Location: '.$sURL);
exit;
}

// 결과값으로 이미지 출력함수 호출
.
.
.
$nRes = ...;
imgHttp($nRes);
?>



http://mytechnic.com/MT_Reference/view.php?language=PHP&seq=3255<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:12:10 PHP & HTML에서 이동 됨]</div>