AJAX天气预报前台
2007-01-31 00:00
393 查看
直接配合前面的后台程序,就可以实现跨域抓取天气信息了.
目前已完美支持firefox了
目前已完美支持firefox了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script language="JavaScript" type="text/javascript"> function $() { return document.getElementById(arguments[0]) } function btnSty(objId,objStyle) { $(objId).style.display = objStyle } //提示窗口控制 function ifodis(){ btnSty('loadifo','none'); } function settime(a){ setTimeout(a,1000); } function loadtime(){ $("loadifo").innerHTML += "." } //XML数据绑定 var xmldoc = false; function loadurl(n){ //生成随机数,同时限制刷新次数 var now=new Date(); var Num=now.valueOf(); //定义往址参数 url = "weather.asp?n="+n+"&id="+Num; //定义为异步传输模式 xmldoc = false; //Mozill,Safari等浏览器时需要创建的XMLHttp类 if(window.XMLHttpRequest){ xmldoc = new XMLHttpRequest(); if(xmldoc.overrideMimeType){ xmldoc.overrideMimeType('text/xml'); } } //IE浏览器时创建的XMLHttp类 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){} } } } //不能创建XMLHTTP类时返回 if(! xmldoc){ return false; } //调用CheckState函数 xmldoc.onreadystatechange = CheckState; xmldoc.open('GET',url,true); xmldoc.send(null); } //状态检测 function CheckState(){ btnSty('loadifo','') //收到完整的服务器响应 if(xmldoc.readyState == 1){ $("loadifo").innerHTML = "连接服务器" } else if(xmldoc.readyState == 2){ $("loadifo").innerHTML = "开始加载数据" } else if(xmldoc.readyState == 3){ $("loadifo").innerHTML = "正在加载数据" settime(loadtime) } else if(xmldoc.readyState == 4){ //HTTP服务器响应值成功 if(xmldoc.status == 200){ //将服务器返回的字符串写到页面中ID为showdiv的区域 $("loadifo").innerHTML = "加载完成" var response = xmldoc.responseText; settime(ifodis) $("prolist").innerHTML = response; } else{ $("loadifo").innerHTML = "错误"+xmldoc.statusText+"请重新选择"; } } } </script> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; font-size: 9pt; } --> </style> </head> <body onload="loadurl('CHXX0138')"> <div> <select onchange="loadurl(this.value)"> <option value="CHXX0138" selected="selected">武汉</option> <option value="CHXX0097">南昌</option> <option value="CHXX0502">海口</option> <option value="CHXX0008">北京</option> <option value="CHXX0116">上海</option> <option value="CHXX0037">广州</option> <option value="CHXX0259">银川</option> <option value="CHXX0165">郑州</option> <option value="CHXX0013">长沙</option> <option value="CHXX0390">杭州</option> <option value="CHXX0049">香港</option> <option value="CHXX0146">西安</option> <option value="CHXX0016">成都</option> <option value="CHXX0110">青岛</option> <option value="CHXX0039">贵阳</option> <option value="CHXX0064">济南</option> <option value="CHXX0448">合肥</option> <option value="CHXX0031">福州</option> <option value="CHXX0099">南京</option> <option value="ITXX0042">米兰</option> </select> <span id="loadifo"></span></div> <div id="prolist"></div> </body> </html>
相关文章推荐
- 配合AJAX天气预报的webService 之asp
- 用Ajax来控制书签和回退按钮的代码
- 国内首发 -- ajax完整功能框架
- prototype试用整理资料
- AJAX初级聊天室代码
- 如何成为AJAX高手
- 纯AJAX分页,V0.2版 下载+演示
- 用JS获得表格当前行数的代码
- 一种表格背景色渐变效果的实现
- 一组单选按钮radio如何进行控制
- Bmail联系人飞来飞去效果
- javascript的函数
- 恶心的圈子
- 瞬间
- 接客篇
- C++中引用和指针的两个重要区别
- C#开发高亮语法编辑器(一)——TextBox ,RichTextBox
- Linux系统分区
- 公司的新年礼物,一看就是给像我这样的懒人用的
- 关于判断一个多边形环视顺时针还是逆时针的算法