AJAX天气预报前台
程序员文章站
2022-06-22 12:46:47
直接配合前面的后台程序,就可以实现跨域抓取天气信息了. 目前已完美支持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>
目前已完美支持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>
上一篇： TP中单字母快捷函数总结
下一篇： 用实现ajax读博客rss示例代码