prev 2014. 09 next
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
 
 

포인트 랭킹 Top 9

  • 1위. 김동영b
    23502점
  • 2위. 아름프로
    6846점
  • 3위. netfer
    1289점
  • 4위. 심플
    829점
  • 5위. 정의의소
    813점
  • 6위. 바이스
    627점
  • 7위. 달마다
    590점
  • 8위. 코디
    577점
  • 9위. 데로드
    448점

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

javascript.png


<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>

버튼을 누르기전 화면 :
before.png

servlet으로 부터의 아래의 스트링을 받게됩니다.
[{"name":"강남구","id":1},{"name":"서초구","id":2}]


버튼을 누른 후의 화면:
after.png


List of Articles
등록된 글이 없습니다.