^   ^

광고 수익의 일부는 블로거에게 제공됩니다

ASP - 날씨 비동기 호출

IT관련/웹(Web) 2015. 4. 16. 10:44

how to weather xml in classic asp / how to weather api in classic asp / how to weather in asp / how to weather api in javascript / how to 비동기 날씨가져오기 in classic asp / how to weather ap in jquery

 

어디 넣어야할지 몰라서 우선 개발을  classic ASP 로 했으니 ㅎㅎ 여기 넣어야겠다

 

사용 설명 : 날씨의 지역을 선택하면 하단의 3일간의 날씨가 비동기로 변경된다.

 

※ 아래 소스는 PC버전을 이용하셔야 보입니다.

 

 

날짜를 선택한다.   ▶▶ 선택시 ▶▶      해당 지역의 날짜(3일간)을 표현한다.

 

1. 보여줄 페이지 (weather.asp)

 참고 : jquery1.10을 사용했습니다.

javascript

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function callPage() {
   var weatherKey = $( "#search_area").val();
   var url = './weather_rss.asp';
   var divWeather = $(".left_weatherWrap");
   var tdiv  = "";
   $.ajax({
       type: "POST",
       url: url,
       data:{weatherKey:weatherKey},
       success: function(response){
       $(".weather_txt").remove();
       for (var i in response.weatherData)
       {
           tdiv =  "<div class='weather_txt'><img src='"+response.weatherData[i].imgWeather+"'  alt='"+response.weatherData[i].wfKor+"' /><div class='weather_tw'><span class='txt01'>" + response.weatherData[i].time +"</span><span class='txt02'><span class='txt'>"+ response.weatherData[i].wfKor +"</span><strong>" + response.weatherData[i].temp + " C</strong>("+response.weatherData[i].tmx +"/"+response.weatherData[i].tmn +")</span></div></div>";
 
           divWeather.append(tdiv)
       }
       },
       dataType: "json"
   });
}

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
<!--//날씨정보 시작-->
<div class="left_weatherWrap">
    <h4>날씨정보</h4>
    <select  name="sido" id="search_area" class="region" onchange="callPage();">
        <option value="4200000000" <%If strKey = "4200000000" Then%>selected="selected" <%End if%>>강원</option>
        <option value="4100000000" <%If strKey = "4100000000" Then%>selected="selected" <%End if%>>경기</option>
        <option value="4800000000" <%If strKey = "4800000000" Then%>selected="selected" <%End if%>>경남</option>
        <option value="4700000000" <%If strKey = "4700000000" Then%>selected="selected" <%End if%>>경북</option>
        <option value="2900000000" <%If strKey = "2900000000" Then%>selected="selected" <%End if%>>광주</option>
        <option value="2700000000" <%If strKey = "2700000000" Then%>selected="selected" <%End if%>>대구</option>
        <option value="3000000000" <%If strKey = "3000000000" Then%>selected="selected" <%End if%>>대전</option>
        <option value="2600000000" <%If strKey = "2600000000" Then%>selected="selected" <%End if%>>부산</option>
        <option value="1100000000" <%If strKey = "1100000000" Then%>selected="selected" <%End if%>>서울</option>
        <option value="3600000000" <%If strKey = "3600000000" Then%>selected="selected" <%End if%>>세종</option>                     
        <option value="3100000000" <%If strKey = "3100000000" Then%>selected="selected" <%End if%>>울산</option> 
        <option value="2800000000" <%If strKey = "2800000000" Then%>selected="selected" <%End if%>>인천</option>
        <option value="4600000000" <%If strKey = "4600000000" Then%>selected="selected" <%End if%>>전남</option> 
        <option value="4500000000" <%If strKey = "4500000000" Then%>selected="selected" <%End if%>>전북</option>
        <option value="5000000000" <%If strKey = "5000000000" Then%>selected="selected" <%End if%>>제주</option>
        <option value="4400000000" <%If strKey = "4400000000" Then%>selected="selected" <%End if%>>충남</option>
        <option value="4300000000" <%If strKey = "4300000000" Then%>selected="selected" <%End if%>>충북</option>
    </select>
    <div ID="WeatherDiv">
    </div>
</div>
<!--//날씨정보-->

 

how to weather xml in classic asp / how to weather api in classic asp / how to weather in asp / how to weather api in javascript / how to 비동기 날씨가져오기 in classic asp / how to weather ap in jquery

2. 비동기 데이터 호출 페이지 (weather_rss.asp)

참고: aspJSON1파일(ASP문 JSON 변환)은 다운로드 받으세요.  출처 : http://www.aspjson.com/

 

?
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!--#include virtual="/include/aspJSON1.13.asp" -->
Set oJSON = New aspJSON
 
strKey = request("weatherKey")
 
'strKey = request("sido")
If strKey = "" Then
    strKey = "1100000000"
End If
 
'RSS사이트의 주소입니다.
RSSUrl = "http://www.kma.go.kr/wid/queryDFSRSS.jsp?zone="& strKey
 
'RSS주소에서 text를추출합니다. 아래 Function참고하세요.
RSSData = GetXmlHttp(RSSUrl)
 
'DOM을 생성합니다.
Set xmlDoc = Server.CreateObject("MSXML2.DOMDOCUMENT.4.0")
    xmlDoc.async = false
    xmlDoc.loadXml RSSData  '위에서 받은 text를 로드합니다.
 
    '전체뉴스중 랜덤으로 추출하기 위해서 item노드의 갯수를 구한다.
    newsLength = xmlDoc.selectNodes("//data").length
    Set SelectNodes = xmlDoc.SelectNodes("//data")
 
'전체 뉴스의 리스트
Dim strTemp
Dim strWeather
 
 
' oJSON.data("weatherData") = strKey
Set oJSON.data("weatherData") = oJSON.Collection()
 
 
For x = 0 To newsLength-1
    If  SelectNodes(x).selectSingleNode("day").Text > 0 then
        If SelectNodes(x).selectSingleNode("hour").Text = 12 Then
        Set newitem = oJSON.AddToCollection(oJSON.data("weatherData"))
        newitem.add "hour", SelectNodes(x).selectSingleNode("hour").Text
        newitem.add "day", SelectNodes(x).selectSingleNode("day").Text
        newitem.add "temp", fn_Weather_Cal(SelectNodes(x).selectSingleNode("temp").Text)
        newitem.add "tmx", fn_Weather_Cal(SelectNodes(x).selectSingleNode("tmx").Text)
        newitem.add "tmn", fn_Weather_Cal(SelectNodes(x).selectSingleNode("tmn").Text)
        newitem.add "sky", SelectNodes(x).selectSingleNode("sky").Text
        newitem.add "pty", SelectNodes(x).selectSingleNode("pty").Text
        newitem.add "wfKor", SelectNodes(x).selectSingleNode("wfKor").Text
        newitem.add "wfEn", SelectNodes(x).selectSingleNode("wfEn").Text
        newitem.add "pop", SelectNodes(x).selectSingleNode("pop").Text
        newitem.add "time", FormatDateTime(DateAdd("d",SelectNodes(x).selectSingleNode("day").text,now()),1) & " " &SelectNodes(x).selectSingleNode("hour").Text & "시"
        newitem.add "imgWeather", fn_Weather_img(SelectNodes(x).selectSingleNode("wfKor").text, SelectNodes(x).selectSingleNode("wfEn").text)
 
'       CreateNewsLink(SelectNodes(x))
        End if
    Else
        If strTemp = "chk" Then
         
        Else       
        Set newitem = oJSON.AddToCollection(oJSON.data("weatherData"))
        newitem.add "hour", SelectNodes(x).selectSingleNode("hour").Text
        newitem.add "day", SelectNodes(x).selectSingleNode("day").Text
        newitem.add "temp", fn_Weather_Cal(SelectNodes(x).selectSingleNode("temp").Text)
        newitem.add "tmx", fn_Weather_Cal(SelectNodes(x).selectSingleNode("tmx").Text)
        newitem.add "tmn", fn_Weather_Cal(SelectNodes(x).selectSingleNode("tmn").Text)
        newitem.add "sky", SelectNodes(x).selectSingleNode("sky").Text
        newitem.add "pty", SelectNodes(x).selectSingleNode("pty").Text
        newitem.add "wfKor", SelectNodes(x).selectSingleNode("wfKor").Text
        newitem.add "wfEn", SelectNodes(x).selectSingleNode("wfEn").Text
        newitem.add "pop", SelectNodes(x).selectSingleNode("pop").Text
        newitem.add "time", FormatDateTime(DateAdd("d",SelectNodes(x).selectSingleNode("day").text,now()),1) & " " &SelectNodes(x).selectSingleNode("hour").Text & "시"
        newitem.add "imgWeather", fn_Weather_img(SelectNodes(x).selectSingleNode("wfKor").text, SelectNodes(x).selectSingleNode("wfEn").text)
'           CreateNewsLink(SelectNodes(x))
            strTemp = "chk"
        End if
 
    End If
Next
 
    '객체를 소멸시킨다
    Set SelectNodes = Nothing
'DOM을 소멸시킨다.
Set xmlDoc = Nothing
 
'XMLHTTP로 원격지 서버의 정보를 긁어오기
Function GetXmlHttp(XMLURL)
    Set xmlHttp = Server.CreateObject("MSXML2.ServerXMLHTTP")
        xmlHttp.Open "POST", XMLURL, False
        xmlHttp.Send
        GetXmlHttp = xmlHttp.responseText
    Set xmlHttp = Nothing
End Function
 
 
Function fn_Weather_Cal(strTemp)
    Dim strCal
 
    strCal = "-"
     
    select case strTemp
        case "-999.0"
            strCal = "-"
        Case Else
            strCal = strTemp
    End Select
     
    fn_Weather_Cal = strCal
End Function
 
Function fn_Weather_img(strKor, strEn)
    select case strEn
        case "Clear"
            fn_Weather_img = "http://www.kma.go.kr/images/icon/NW/NB01.png"
        case "Partly Cloudy"
            fn_Weather_img = "http://www.kma.go.kr/images/icon/NW/NB02.png"
        case "Mostly Cloudy"
            fn_Weather_img = "http://www.kma.go.kr/images/icon/NW/NB03.png"
        case "Cloudy"
            fn_Weather_img = "http://www.kma.go.kr/images/icon/NW/NB04.png"
        case "Rain"
            fn_Weather_img = "http://www.kma.go.kr/images/icon/NW/NB08.png"
        case "Snow"
            fn_Weather_img = "http://www.kma.go.kr/images/icon/NW/NB11.png"
        case "Snow/Rain"
            fn_Weather_img = "http://www.kma.go.kr/images/icon/NW/NB12.png"
        case "Rain/Snow"
            fn_Weather_img = "http://www.kma.go.kr/images/icon/NW/NB13.png"
        case "구름많고 비"
            fn_Weather_img = "http://www.kma.go.kr/images/icon/NW/NB20.png"
        case "구름많고 눈"
            fn_Weather_img = "http://www.kma.go.kr/images/icon/NW/NB21.png"
        case "구름많고 눈/비"
            fn_Weather_img = "http://www.kma.go.kr/images/icon/NW/NB22.png"
        case "구름많고 비/눈"
            fn_Weather_img = "http://www.kma.go.kr/images/icon/NW/NB23.png"
        case ""
            fn_Weather_img = "NoImage"
        case else
            fn_Weather_img = "NoImage"
    end select
End Function 
 
 
'Return the object
Response.ContentType = "application/json"
Response.Write oJSON.JSONoutput()

저작자표시 비영리 변경금지 (새창열림)

'IT관련 > 웹(Web)' 카테고리의 다른 글

Javascript AJAX 동작 순서 확인  (0) 2015.05.27
네이버 에디터 나눔고딕 고정편  (0) 2015.05.12
ASP - 음력 양력 변환 프로그램  (0) 2015.04.16
zeroPlus[숫자 앞에 0자리 채우기]  (0) 2015.01.26
날씨 비동기 호출  (0) 2015.01.21
하단
Posted by 네이션
,

티스토리툴바