hyeonga_code

Ajax_innerHTML_CSV 양식의 응답 텍스트 분석하여 화면에 출력하기 본문

Ajax

Ajax_innerHTML_CSV 양식의 응답 텍스트 분석하여 화면에 출력하기

hyeonga 2023. 10. 18. 05:59
반응형

- 응답 결과를 작성합니다.
- webapp > ch02 > 'getMaxTemperature.jsp' jsp 파일을 생성합니다.
=====

1
2
3
4
5
6
7
8
9
10
11
<%@ page contentType="text/plain; charset=euc-kr"%>
<%
    double[] maxTemperature = { 10.2, 11.8, 12.9, 9.0 };
 
    for (int i = 0; i < maxTemperature.length; i++) {
        out.print(maxTemperature[i]);
        if (i < maxTemperature.length - 1) {
            out.print(",");
        }
    }
%>

- 'getMaxTemperature.jsp'파일을 실행하면 저장된 값을 출력합니다.


- webapp > ch02 > 'maxTemperature.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
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>최고기온</title>
<script type="text/javascript" src="httpRequest.js"></script>
<script type="text/javascript">
 
    // get 방식으로 jsp 파일을 불러오며 함수를 호출합니다.
    function loadList() {
        // get 방식으로 매개 변수가 없는 상태로 getMaxTemperature.jsp로 넘어갑니다.
        // 요청이 완료되면 loadedList 메소드를 호출합니다.
        sendRequest("getMaxTemperature.jsp", null, loadedList, "GET");
    }
 
    function loadedList() {
        // 요청이 정상적으로 완료되는 경우
        if (httpRequest.readyState == 4) {
            if (httpRequest.status == 200) {
                
                // Ajx 요청으로 받은 응답 텍스트를 저장합니다.
                var csvStr = httpRequest.responseText;
                
                // 콤마로 읽어온 값을 분리합니다.
                var temperatureStrs = csvStr.split(",");
                
                var temperatures = new Array(temperatureStrs.length);
                
                for (var i = 0; i < temperatureStrs.length; i++) {
                    temperatures[i] = parseFloat(temperatureStrs[i]);
                }
                
                var max = temperatures[0];
                
                // 최대값을 구합니다.
                for (var i = 1; i < temperatures.length; i++) {
                    if (max < temperatures[i]) {
                        max = temperatures[i];
                    }
                }
                
                var maxtemp = document.getElementById("maxtemp");
                
                // maxtemp 이름을 가진 태그에 출력합니다.
                maxtemp.innerHTML = "<strong>" + max + "</strong>";
                
            } else {
                alert(httpRequest.status);
            }
        }
    }
    
    // 윈도우가 로드되면 호출합니다.
    window.onload = function() {
        loadList();
    }
</script>
</head>
<body>
    최근 4일간 최고기온:
    <span id="maxtemp">
        <!-- 내용이 위치합니다. -->
    </span>
</body>
</body>
</html>


 - 'maxTemperature.html' 파일을 실행하면 최고기온을 가져와 출력합니다.








반응형
저작자표시

'Ajax' 카테고리의 다른 글

Ajax_DOM_Document Object Model 과 XML  (0) 2023.10.19
Ajax_innerHTML_종합 예제_제시어 기능 구현  (0) 2023.10.18
Ajax_innerHTML_웹 서버의 응답 결과 반영하기  (0) 2023.10.17
Ajax_innerHTML_1 초마다 현재 시간을 출력합니다.  (0) 2023.10.17
Ajax_InnerHTML  (0) 2023.10.17
'Ajax' Related Articles more