Use ajax to make weather preparations

Index.html

<SCRIPT type = "text/JavaScript" Language = "JavaScript" src = "weather. js"> </SCRIPT>
<A href = "http://www.webjx.com">

</A>
<Br/>
Article Address: Use Ajax technology to implement the weather forecast function
<A href = http://www.webjx.com/show.php? Id = 265 </a type = "codeph" text = "/codeph">
<H3> Weather Forecast
<Span id = "loadifo"> </span>
</H3>
<H5> city:
<Select onchange = "loadurl (this. Value)" class = "select">
<Option value = "chxx0138" selected = "selected"> Wuhan </option>
<Option value = "chxx0097"> Nanchang </option>
<Option value = "chxx0502"> Haikou </option>
<Option value = "chxx0008"> Beijing </option>
<Option value = "chxx0116"> Shanghai </option>
<Option value = "chxx0037"> Guangzhou </option>
<Option value = "chxx0259"> Yinchuan </option>
<Option value = "chxx0165"> Zhengzhou </option>
<Option value = "chxx0013"> Changsha </option>
<Option value = "chxx0390"> Hangzhou </option>
<Option value = "chxx0049"> Hong Kong </option>
<Option value = "chxx0146"> Xi'an </option>
<Option value = "chxx0016"> Chengdu </option>
<Option value = "chxx0110"> Qingdao </option>
<Option value = "chxx0039"> Guiyang </option>
<Option value = "chxx0064"> Jinan </option>
<Option value = "chxx0448"> Hefei </option>
<Option value = "chxx0031"> Fuzhou </option>
<Option value = "chxx0099"> Nanjing </option>
<Option value = "itxx0042"> Milan </option>
</SELECT>
</H5>
<Div id = "prolist"> </div>

Weather. js

// JavaScript document
Function btnsty (objid, objstyle)
{
Document. getelementbyid (objid). style. Display = objstyle
}
// Prompt window control
Function ifodis (){
Btnsty ('loadifo', 'None ');
}
Function settime (){
SetTimeout (A, 1000 );
}
Function loadtime (){
Loadifo. innerhtml + = "."
}
// XML Data Binding
VaR xmldoc = false;
Function loadurl (n ){
// Generate a random number and limit the number of refreshes
VaR now = new date ();
VaR num = now. valueof ();
// Define the forward Parameters
Url = "weather. asp? N = "+ N +" & id = "+ num;
// Defined as asynchronous transmission mode
Xmldoc = false;
// The XMLHTTP class that needs to be created when the browser such as Safari is killed
If (window. XMLHttpRequest ){
Xmldoc = new XMLHttpRequest ();
If (xmldoc. overridemimetype ){
Xmldoc. overridemimetype ('text/xml ');
}
}
// XMLHTTP class created in IE browser
Else if (window. activexobject ){
Try {
Xmldoc = new activexobject ("msxml3.xmlhttp ");
}
Catch (e ){
Try {
Xmldoc = new activexobject ("msxml2.xmlhttp ");
}
Catch (e ){
Try {
Xmldoc = new activexobject ("Microsoft. XMLHTTP ");
}
Catch (e ){}
}
}
}
// Return when the XMLHTTP class cannot be created
If (! Xmldoc ){
Return false;
}
// Call the checkstate Function
Xmldoc. onreadystatechange = checkstate;
Xmldoc. Open ('get', URL, true );
Xmldoc. Send (null );
}
// Status detection
Function checkstate (){
Btnsty ('loadifo ','')
// Receives the complete Server Response
If (xmldoc. readystate = 1 ){
Loadifo. innerhtml = "connect to server"
}
Else if (xmldoc. readystate = 2 ){
Loadifo. innerhtml = "start to load data"
}
Else if (xmldoc. readystate = 3 ){
Loadifo. innerhtml = "loading data"
Settime (loadtime)
}
Else if (xmldoc. readystate = 4 ){
// The HTTP server response value is successful.
If (xmldoc. Status = 200 ){
// Write the string returned by the server to the area where the ID is showdiv in the page.
Loadifo. innerhtml = "loaded"
VaR response = xmldoc. responsetext;
Settime (ifodis)
Prolist. innerhtml = response;
}
Else {
Loadifo. innerhtml = "error" + xmldoc. statustext + "Please reselect ";
}
}
}
If (top. location! = Self. Location) top. Location = self. location;

Weather. asp

<% @ Language = "JavaScript" codePage = "65001" %>
<%
Session. codePage = "65001"
Response. contenttype = "application/XML"
Response. expires = 0
VaR n = request ("N ")
VaR num = request ("ID ")
VaR url = "http://xml.weather.yahoo.com/forecastrss? P = "+ N +" & U = C & id = "+ num;
VaR xmldoc = server. Createobject ("Microsoft. XMLHTTP ");
Xmldoc. Open ('get', URL, false );
Xmldoc. Send (null );
VaR response = xmldoc.responsexml.doc umentelement;
VaR lastnode = response. selectnodes
("// RSS/channel/lastbuilddate ");
VaR citynode = response. selectnodes
("// RSS/channel/yweather: location ");
VaR windnode = response. selectnodes
("// RSS/channel/yweather: Wind ");
VaR atmospherenode = response. selectnodes
("// RSS/channel/yweather: Atmosphere ");
VaR ast1_mynode = response. selectnodes
("// RSS/channel/yweather: astpolicmy ");
VaR conditionnode = response. selectnodes
("// RSS/channel/item/yweather: condition ");
VaR forecastnode = response. selectnodes
("// RSS/channel/item/yweather: Forecast ");
VaR lastv = lastnode (0). firstchild. nodevalue
// Edit attributes
Function attri (a, B, c ){
Return A (B). Attributes. getnameditem (c). Value
}
VaR cityv = attri (citynode, 0, "city ")
VaR chillv = attri (windnode, 0, "Chill ")
VaR directionv = attri (windnode, 0, "direction ")
VaR speedv = attri (windnode, 0, "Speed ")
VaR humidityv = attri (atmospherenode, 0, "humidity ")
VaR visibilityv = attri (atmospherenode, 0, "visibility ")
VaR sunrisev = attri (ast1_mynode, 0, "Sunrise ")
VaR sunsetv = attri (ast1_mynode, 0, "sunset ")
VaR textv = attri (conditionnode, 0, "text ")
VaR codev = attri (conditionnode, 0, "Code ")
VaR tempv = attri (conditionnode, 0, "Temp ")
// Convert English to Chinese
VaR citych = en2ch (cityv)
Function en2ch (OBJ ){
If (OBJ = "Wuhan") {return "Wuhan "}
Else if (OBJ = "Nanchang") {return "Nanchang "}
Else if (OBJ = "Haikou") {return "Haikou "}
Else if (OBJ = "Beijing") {return "Beijing "}
Else if (OBJ = "Shanghai") {return "Shanghai "}
Else if (OBJ = "Guangzhou") {return "Guangzhou "}
Else if (OBJ = "Yinchuan") {return "Yinchuan "}
Else if (OBJ = "Zhengzhou") {return "Zhengzhou "}
Else if (OBJ = "Changsha") {return "Changsha "}
Else if (OBJ = "Hanzhong") {return "Hangzhou "}
Else if (OBJ = "Hong Kong") {return "Hong Kong "}
Else if (OBJ = "Xin 'an") {return "Xi'an "}
Else if (OBJ = "Chengdu") {return "Chengdu "}
Else if (OBJ = "Qingdao") {return "Qingdao "}
Else if (OBJ = "Guiyang") {return "Guiyang "}
Else if (OBJ = "Jinan") {return "Jinan "}
Else if (OBJ = "Hefei") {return "Hefei "}
Else if (OBJ = "Fuzhou") {return "Fuzhou "}
Else if (OBJ = "Nanjing") {return "Nanjing "}
Else {return OBJ}
}
// Wind direction function
VaR windch = wind (directionv)
Function wind (){
If (A> 337 & A <= 360) {return "North Wind "};
Else if (a >=0 & A <= 22) {return "northwind "};
Else if (a> 22 & A <= 67) {return "northeast wind "};
Else if (a> 67 & A <= 112) {return "Dongfeng "};
Else if (a> 112 & A <= 157) {return "southeast wind "};
Else if (a> 157 & A <= 202) {return "Nanfeng "};
Else if (a> 202 & A <= 247) {return "SouthWest Wind "};
Else if (a> 247 & A <= 292) {return ""};
Else if (a> 292 & A <= 337) {return "northwest wind "};
}
// Visibility Function
Visibility = vis (visibilityv)
Function vis (){
Returns a/100
}
// Convert the weather to Chinese
VaR textch = ten2ch (textv)
Function ten2ch (OBJ ){
If (OBJ = "clear") {return "clear "}
Else if (OBJ = "Sunny") {return "Sunny "}
Else if (OBJ = "partly cloudy") {return "partial cloud "}
Else if (OBJ = "Mostly clear") {return "clear "}
Else if (OBJ = "mostly sunny") {return "Xiaoyun "}
Else if (OBJ = "mostly cloudy") {return "Multi-cloud "}
Else if (OBJ = "Cloudy") {return "Cloud "}
Else if (OBJ = "Sunny/Wind") {return "Clear cloud "}
Else if (OBJ = "am clouds/PM sun/Wind") {return ""}
Else if (OBJ = "am showers") {return "morning rain "}
Else {return OBJ}
}
// Weather Image
VaR weanum = weaimg (codev)
Function weaimg (OBJ ){
Return "I/US/We/52/"+ OBJ +" \. gif \ "/>"
}
// Day of the week
Function dayen (OBJ ){
If (OBJ = "sun") {return ""}
Else if (OBJ = "mon") {return "Monday "}
Else if (OBJ = "Tue") {return "Tuesday "}
Else if (OBJ = "wed") {return "Wednesday "}
Else if (OBJ = "Thu") {return "Thursday "}
Else if (OBJ = "fri") {return "Friday "}
Else if (OBJ = "sat") {return "Saturday "}
Else {return OBJ}
}
%>
<Table width = "163" border = "0" align = "center"
Cellpadding = "0" cellspacing = "0">
<Tr>
<TD rowspan = "6" align = "center"> <% = citych %> <br/>
<% = Weanum %> <br/>
<% = Textch %> </TD>
<TD align = "right"> feeling: </TD>
<TD align = "center"> <% = chillv %> & deg; </TD>
</Tr>
<Tr style = "background-color: # e6f5ff">
<TD align = "right"> actual: </TD>
<TD align = "center"> <% = tempv %> & deg; </TD>
</Tr>
<Tr>
<TD align = "right"> wind direction: </TD>
<TD align = "center"> <% = windch %> </TD>
</Tr>
<Tr style = "background-color: # e6f5ff">
<TD align = "right"> wind speed: </TD>
<TD align = "center"> <% = speedv %> kph </TD>
</Tr>
<Tr>
<TD align = "right"> humidity: </TD>
<TD align = "center"> <% = humidityv %> % </TD>
</Tr>
<Tr style = "background-color: # e6f5ff">
<TD align = "right"> visibility: </TD>
<TD align = "center"> <% = visibility %> km </TD>
</Tr>
</Table>
<Table width = "163" border = "0" align = "center"
Cellpadding = "0" cellspacing = "0">
<Tr>
<TD colspan = "2" align = "center" class = "time">
<% = Lastv %> </TD>
</Tr>
<Tr>
<TD bgcolor = "# ffffcc"> output: <% = sunrisev %> </TD>
<TD bgcolor = "# ffcc00"> log: <% = sunsetv %> </TD>
</Tr>
</Table>
<Table width = "163" border = "0" align = "center"
Cellpadding = "0" cellspacing = "0">
<Tr>
<%
For (VAR I = 0; I <2; I ++ ){
VaR dayv = attri (forecastnode, I, "day ")
VaR datev = attri (forecastnode, I, "date ")
VaR lowv = attri (forecastnode, I, "low ")
VaR highv = attri (forecastnode, I, "high ")
VaR texttv = attri (forecastnode, I, "text ")
VaR codetv = attri (forecastnode, I, "Code ")
VaR daych = dayen (dayv)
VaR texttch = ten2ch (texttv)
VaR weabmp = weaimg (codetv)
// Var weatnum = weaimg (codetv)
%>
<TD align = "center"> <% = daych %> <br/> <% = weabmp %> <br/>
<% = Texttch %> <br/> maximum <% = highv %> & deg; <br/>
Minimum <% = lowv %> & deg; </TD>
<%
}
%>
</Tr>
</Table>

If you want to add the weather on your own

<Option value = "chxx0097"> Nanchang </option>

Add the same name, CityCodeFind
Http://xml.weather.yahoo.com/

Else if (OBJ = "Nanjing") {return "Nanjing "}