hyeonga_code

JSON_06_응답 결과를 자바스크립트 객체로 저장하기 28.09.59 본문

JSON

JSON_06_응답 결과를 자바스크립트 객체로 저장하기 28.09.59

hyeonga 2023. 10. 29. 08:59
반응형


- 응답 결과를 자바스크립트 객체로 저장하기

    - XML 응답에서 값을 추출하여 객체에 저장하기
- prototype > 'member_xml.jsp' jsp 파일 생성하기
=====

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="UTF-8" ?>
 
<%@ page contentType="text/xml; charset=UTF-8" %>
 
<result>
    <code>success</code>
    <data>
        <member>
            <name>nameValue</name>
            <id>javaline</id>
            <sno>7000001000000</sno>
        </member>
    </data>
</result>


- prototype > 'loadMemberFromXML.html' html 파일 생성하기
=====

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
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loadMemberFromXML.html</title>
 
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="member.js">
 
    window.load = function() {
        new ajax.xhr.Request("member_xml.jsp", "", viewInfo, "GET");
    }
    
    function viewInfo(req){
        if(req.readyState == 4){
            if(req.status == 200){
                var docXML = req.responseXML;
                
                var code = docXML.getElementsByTagName("code").item(0).firstChild.nodeValue;
                
                if(code == 'success'){
                    var name = docXML.getElementsByTagName("name").item(0).firstChild.nodeValue;
                    var id = docXML.getElementsByTagName("id").item(0).firstChild.nodeValue;
                    var sno = docXML.getElemetsByTagName("sno").item(0).firstChild.nodeValue;
                    
                    var mem = new Member(name, id, sno);
                    
                    alert(mem.toString() + ", " + mem.getAge());
                } else {
                    alert("Fail");
                }
            } else {
                alert("Error : " + req.status);
            }
        }
    }
</script>
</head>
<body>
 
</body>
</html>



- loadMemberFromXML.html 파일을 실행합니다.




    - JSON 응답을 객체로 변환하기
       - prototype > 'member_json.jsp' jsp 파일 생성하기
=====

1
2
3
4
5
6
7
8
9
10
11
12
13
<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
{
    code : 'success',
    data : {
                member : {
                            name : 'nameValue',
                            id : 'idVlaue',
                            sno : '7000001000000'
                        }
            }
}


- prototype > 'loadMemberFromJSON.html' html 파일 생성하기
=====

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loadMemberFromJSON.html</title>
 
<link rel="shortcut icon" href="#">
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
 
    window.onload = function() {
        new ajax.xhr.Request("member_json.jsp", "", viewInfo, "GET");
    }
    
    function viewInfo(req){
        
        if(req.readyState == 4){
            if(req.status == 200){
                
                // req.responseText 문자열을 eval로 변환합니다.
                var result = eval("(" + req.responseText + ")");
                    /*
                    - eval 주의사항
                        - 잘 안되는 경우가 있습니다.
                        >>> json.parse()로 변환합니다.
                        'https://www.w3schools.com/js/js_json_parse.asp'
                    */
                // 변경 ? var data = JSON.parse(req.responseText);
                        
                if(result.code == 'success'){
                    var m = result.data.member;
                    alert(m.id + "[" + m.name + "]");
                } else {
                    alert("Fail");
                }                
            } else {
                alert("Error : " + req.status);
            }
        }
    }
</script>
</head>
<body>
 
</body>
</html>


- loadMemberFromJSON.html 파일 실행하기



- XML과 JSON 응답을 조합하여 객체로 변환하기
    - 전체적인 구조는 XML을 유지합니다.
    - 데이터 부분은 JSON으로 표시한 파일로 작성합니다.
- prototype > 'member_xmljson.jsp' jsp 파일 생성하기
=====

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="UTF-8" ?>
 
<%@ page contentType="text/xml; charset=UTF-8" %>
 
<result>
    <code>success</code>
    <data>
        <![CDATA[
            {
                name : 'nameValue',
                id : 'idValue',
                sno : '7000001000000'
            }
        ]]>
    </data>
</result>


- prototype > 'loadMemberFromXMLJSON.html' html 파일 작성하기
=====

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loadMemberFromXMLJSON.html</title>
 
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="member.js"></script>
<script type="text/javascript">
    
    window.onload = function(){
        new ajax.xhr.Request("member_xmljson.jsp", "", viewInfo, "GET");
    }
 
    function viewInfo(req){
        if(req.readyState == 4){
            if(req.status == 200){
                
                var docXML = req.responseXML;
                var code = docXML.getElementsByTagName("code").item(0).firstChild.nodeValue;
                
                if(code == "success"){
                
                    var dataJSON = docXML.getElementsByTagName("data").item(0).firstChild.nodeValue;
                    var data = eval("(" + dataJSON + ")");
                        /*
                        - eval 주의사항
                            - 잘 안되는 경우가 있습니다.
                            >>> json.parse()로 변환합니다.
                            'https://www.w3schools.com/js/js_json_parse.asp'
                        */
                    // alert(dataJSON);
                            
                    // 변경 >>>
                    //var data = JSON.parse(dataJSON);
                    
                    
                    alert(data.name + "[" + data.id + "]");
                } else{
                    alert("Fail");
                }
            } else {
                alert("Error : " + req.status);
            }
        }
    }
    
</script>
 
 
</head>
<body>
 
</body>
</html>




- loadMemberFromXMLJSON.html 파일 실행하기














반응형
저작자표시

'JSON' 카테고리의 다른 글

JSON_09_JSON ArrayList  (0) 2023.11.04
JSON_08_JSON 파일 만들기  (0) 2023.11.04
JSON_07_JSON 표기법 응답 생성 시 주의할 점  (0) 2023.10.28
JSON_05_자바스크립트에서 패키지 정의하기  (0) 2023.10.28
JSON_04_JSON 표기법  (0) 2023.10.27
'JSON' Related Articles more