기술노트 - JavaScript - JSON 수신 처리

포인트 랭킹 Top 9

1위. 김동영b

21432점
2위. 아름프로

6661점
3위. netfer

1205점
4위. 심플

829점
5위. 정의의소

805점
6위. 달마다

595점
7위. 상남

433점
8위. 곰세영

411점
9위. 원호

218점

> JazzLab > 기술 노트

기술 노트

글 수 111

JavaScript - JSON 수신 처리

김동영b

JavaScript를 통한 JSON 수신 처리를 하는 샘플 코드입니다.

<html>
<head>
<script type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (failed) {
request = false;
}

if (!request)
alert("Error initializing XMLHttpRequest!");

var url = "http://localhost:8080/MetaServlet/Gu";

function getGuList()
{
    var name = navigator.appName;
    if(name == "Netscape"){
      netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
      netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
    }

    request.open("GET", url, true); // true : 비동기 처리용 == Ajax 스타일, false : 동기 처리용 = 일반적인 스타일
    request.onreadystatechange = updatePage; // 비동기 처리용 callback 함수 : 서버에서 처리가 끝나면 불리는 함수
    request.send(null);
}

function updatePage() // 비동기 처리 함수 : 서버에서 처리 후 불리는 함수
{
    if (request.readyState == 4)
    {
        if (request.status == 200)
        {
            var GuString = request.responseText; //GuString = [{"name":"강남구","id":1},{"name":"서초구","id":2}];
            var toEval = "var GuList = "+GuString;
            eval(toEval); // JSON 스트림을 GuList Arrary로 바꿈
            var strHTML = "<table><tr><th>id</th><th>name</th></tr>";
            for(var i in GuList)
            {
                var objHTML = "<tr><td>"+GuList[i].id+"</td><td>"+GuList[i].name+"</td></tr>";
                strHTML +=objHTML;
            }
            strHTML+="</table>";
            document.getElementById("gulist").innerHTML = strHTML; //테이블 결과를 삽입
        }
        else if (request.status == 404)
            alert("Request URL does not exist");
        else
            alert("Error: status code is " + request.status);
    }
}
</script>
</head>

<body>
<form>
   <p><input type="button" value="GU LIST" id="query" onclick="getGuList();"/></p>
   <p>GU LIST:</p>
   <div id="gulist"></div>
</form>
</body>
</html>

버튼을 누르기전 화면 :