[API] 도로명 주소 API를 사용해서 주소 검색을 구현해보자 (검색API호출)

주소 API를 활용해서 주소 검색 기능을 구현해보자

1. 해당 URL로 접속한다.

https://www.juso.go.kr/CommonPageLink.do?link=/addrlink/devAddrLinkRequestSample

2. 오른쪽에 있는 신청하기 버튼을 클릭한다.

3. 정보 입력 후 API를 신청하면, 승인키가 발급된다. (예제는 팝업 API가 아닌 검색 API로 진행하겠다.)

4. 주소 API를 호출해보자

<script type="text/javascript">
 
/* 주소 API 적용 시작 */
 
    // 주소 검색
    function Search_Post_API(PageNo) {
 
        var intPageSize = 10;
        var intTotalPages = 0;
 
        // 검색API URL은 프로토콜(http/https) 맞춰서 설정한다.
        var strUrl = window.location.protocol + "//www.juso.go.kr/addrlink/addrLinkApiJsonp.do";
        
        if (!searchJuso()) {
            try {
                $.ajax({
                    url: strUrl
                    , type: "post"
                    , data: ({ currentPage: PageNo, countPerPage: intPageSize, keyword: $("#txt_SearchText").val(), confmKey: $("#hid_Key").val() })
                    , dataType: "jsonp"
                    , crossDomain: true
                    , success: function (xmlStr) {
 
                        if (navigator.appName.indexOf("Microsoft") > -1) {
                            var xmlData = new ActiveXObject("Microsoft.XMLDOM");
                            xmlData.loadXML(xmlStr.returnXml)
                        } else {
                            var xmlData = xmlStr.returnXml;
                        }
 
                        var errCode = $(xmlData).find("errorCode").text();
                        var errDesc = $(xmlData).find("errorMessage").text();
                        var PostList = "";
 
                        if (errCode == "0") {
                            if (xmlStr != null) {
 
                                PostList += "<p><strong>" + $(xmlData).find("totalCount").text() + "개</strong>의 주소가 검색되었습니다.</p>";
 
                                PostList += "<ul>";
 
                                $(xmlData).find("juso").each(function (i) {
                                    PostList += "<li>";
                                    PostList += "<a href=\"javascript:SetOpenerValue('" + $(xmlData).find("zipNo").eq(i).text() + "', '" + $(xmlData).find("roadAddr").eq(i).text().replace("'"," ") + "');\">";
                                    PostList += "<em>" + $(xmlData).find("zipNo").eq(i).text() + "</em>";
                                    PostList += "<span>" + $(xmlData).find("roadAddr").eq(i).text() + "<br/>" + $(xmlData).find("jibunAddr").eq(i).text() + "</span>";
                                    PostList += "</a>";
                                    PostList += "</li>";
                                });
 
                                PostList += "</ul>";
 
                                $("#dvSearchArea").html(PostList);
 
                                // 페이징
                                if ($(xmlData).find("totalCount").text() != 0) {
                                    intTotalPages = Math.ceil($(xmlData).find("totalCount").text() / intPageSize);
                                    $("#div_paginate").html(PageLink(PageNo, intTotalPages, "Search_Post_API"));
                                }
 
                            }
                        } else if (errCode == "E0005") {
                            alert("검색어를 입력해주세요.");
                        } else if (errCode == "E0006") {
                            alert("주소를 상세히 입력해주세요.");
                        } else { // 에러발생시 주소DB 호출
                            ErrorJuso();
                        }
                    }
                    , error: function (xhr, status, error) {
                        ErrorJuso();
                    }
                });
            } catch (e) {
                ErrorJuso();
            }
        }
        return;
    }
 
    // 검색 API 서비스 오류
    function ErrorJuso() {
        alert("에러발생 시 코드 작성");
    }
 
    // 검색 API 호출 전 검색어 체크
    function searchJuso() {
        if (!checkSearchedWord($("#txt_SearchText").val().toUpperCase())) {
            return true;
        } else {
            return false;
        }
    }
 
    // 특수문자, 특정문자열(sql예약어의 앞뒤공백포함) 제거
    function checkSearchedWord(obj) {
 
        if (obj != null && obj != "") {
 
            //특수문자 제거
            var expText = /[%=><+!^*]/;
            if (expText.test(obj) == true) {
                alert("특수문자를 입력 할수 없습니다.");
                $("#txt_SearchText").val(obj.replace(expText, ""));
                return false;
            }
 
            //특정문자열(sql예약어의 앞뒤공백포함) 제거
            var sqlArray = new Array("AND", "OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE", "ALTER", "DROP", "EXEC", "UNION", "FETCH", "DECLARE", "TRUNCATE", "SHUTDOWN");
 
            for (var i = 0; i < sqlArray.length; i++) {
                if (obj.match(sqlArray[i])) {
                    alert(sqlArray[i] + "와(과) 같은 특정문자로 검색할 수 없습니다.");
                    $("#txt_SearchText").val(obj.replace(sqlArray[i], ""));
                    return false;
                }
            }
        }
        return true;
    }
 
    // 임시 페이징
    function PageLink(curPage, totalPages, funName) {
 
        pageUrl = "";
 
        var pageLimit = 5;
        var startPage = parseInt((curPage - 1) / pageLimit) * pageLimit + 1;
        var endPage = startPage + pageLimit - 1;
 
        if (totalPages < endPage) {
            endPage = totalPages;
        }
 
        var nextPage = endPage + 1;
 
        if (curPage > 1 && pageLimit < curPage) {
            pageUrl += "<a class='first' href='javascript:" + funName + "(1);'><img src='/images_new/common/2016/btn_paging_first.gif' alt='처음' /></a>";
        }
        if (curPage > pageLimit) {
            pageUrl += " <a class='prev' href='javascript:" + funName + "(" + (startPage == 1 ? 1 : startPage - 1) + ");'><img src='/images_new/common/2016/btn_paging_prev.gif' alt='이전' /></a>";
        }
 
        for (var i = startPage; i <= endPage; i++) {
            if (i == curPage) {
                pageUrl += " <a href='#'><strong>" + i + "</strong></a>"
            } else {
                pageUrl += " <a href='javascript:" + funName + "(" + i + ");'> " + i + " </a>";
            }
        }
 
        if (nextPage <= totalPages) {
            pageUrl += "<a class='next' href='javascript:" + funName + "(" + (nextPage < totalPages ? nextPage : totalPages) + ");'><img src='/images_new/common/2016/btn_paging_next.gif' alt='다음' /></a>";
        }
        if (curPage < totalPages && nextPage < totalPages) {
            pageUrl += "<a class='last' href='javascript:" + funName + "(" + totalPages + ");'><img src='/images_new/common/2016/btn_paging_last.gif' alt='끝' /></a>";
        }
 
        return pageUrl;
    }
  
    /* 주소 API 적용 끝 */
 
</script>
...
<input type="hidden" id="hid_Key" value="승인키값"/> <!-- 검색API Key -->
...
<label for="inptxt3">검색어</label><input type="text" id="txt_SearchText"/>
<img src="/images_new/main/btn_srch.gif" alt="검색" onclick="javascript:Search_Post_API('1');" />
...
<div id="dvSearchArea" class="cresultArea"></div>
<div id="div_paginate" class="paginate"></div>