본문 바로가기

Web/Javascript

아래 xmlhttp를 이용한 우편번호검색기

아래 php 스쿨 긁어오는 예제는 좋은 예제가 아니었던거같습니다.
순서도 잘못돼서 안되는 분도 많으셨을꺼고 인코딩문제가 해결 안된 페이지를 긁어왔으니..

그래서 이번엔 이용할 수 있는 예제 하나를 준비해봤습니다.
db가 필요없는 우편번호 검색기!!!

지난번에 xml 가지고 우편번호 가져오는 예제를 올렸던적이 있는데.. 그건 자신의 서버를 벗어날수가 없었지요.. 그래서 저희 회사에선 xml-rpc를 사용해서 우편번호 검색을 통일해서 쓰고있었는데 그보다 훨씬 간단하면서 확장성이 좋은 재미난 결과물이 나왔습니다.

아래 소스는 어디나 붙여도 똑같이 동작하네요.. 게다가 그냥 복사해서 메모장에 붙이시고 로칼에서 실행하셔도 우편번호 검색이 됩니다.

우편번호를 건네주는 utf8.php 라는놈은 단순히 db 검색을 해서 utf8로 뿌려주는 10줄짜리 스크립트입니다. 그중에 6줄이 헤더전송 부분이군요.. 테스트용으로 만든 주소라 곧 지워질꺼같습니다. 제가 지금 아는사람 서버에 얹혀있는 상태라 우편번호 검색 서버를 제공할만한 상태가 못되네요.. 누구 빵빵한 서버 가지고계신분이 저에게 계정을 제공해주신다면 여러 학우가 잘 쓸수있는 xmlhttp 서버로 사용하면 좋겠는데.. : )

지금 막 되는걸 확인하고 올리는거니까 좀더 정리되면 이건 지우고 제대로된 팁으로 다시 올리겠습니다.

-------------------------- 소스 ------------------------
<script>
var sHttp = new ActiveXObject("Microsoft.xmlhttp");

function httpGet(szURL) {
    sHttp.open("GET",szURL,false);
    sHttp.setRequestHeader("Content-type:", "text/html");
    sHttp.onreadystatechange = onRetriveComplete;
    sHttp.send();
    if (sHttp.status > 200) alert("200 Error");
}

function onRetriveComplete() {
    if (sHttp.readyState == 4) {
        sHttp.onreadystatechange = noop; //re-entrant gate
        document.all('contentView').innerHTML = sHttp.responseText;
    }
}

function noop() {
    return false;
}

function doSearch() {
    var dong = document.forms['search'].elements['dong'].value;
    httpGet("http://comfuture.junghyun.pe.kr/examples/utf8.php?dong="+dong);
    return false;
}

</script>
<body>
<form name="search" action="" onSubmit="return doSearch()">
동명<input type="text" name="dong"><input type="submit" value="검색">
</form>
<div id='contentView' width="100%" height="100%" style="background-color:#f0f0f0; border: solid 1 black">검색결과가 나오는자리</div>
</body>

'Web > Javascript' 카테고리의 다른 글

파일 폼의  (0) 2013.09.26
사업자번호체크스크립트 간단버전  (0) 2013.09.26
js view 막기  (0) 2013.09.26
js로 문자열 자르기, 바이트 구하기  (0) 2013.09.26
엑셀에서 br먹히기  (0) 2013.09.26