Ajax XML返回值的操作处理天气预报API

<?PHP
header('content-type: text/xml');
echo '<?xml version="1.0"?><xml_api_reply version="1"><weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0" ><forecast_information><city data="Beijing,Beijing"/><postal_code data="beijing"/><latitude_e6 data=""/><longitude_e6 data=""/><forecast_date data="2012-08-18"/><current_date_time data="2012-08-18 15:30:00 +0000"/><unit_system data="SI"/></forecast_information><current_conditions><condition data="雨"/><temp_f data="77"/><temp_c data="25"/><humidity data="湿度： 89%"/><icon data="/ig/images/weather/cn_heavyrain.gif"/><wind_condition data="风向： 北、风速：1 米/秒"/></current_conditions><forecast_conditions><day_of_week data="周六"/><low data="16"/><high data="29"/><icon data="/ig/images/weather/chance_of_storm.gif"/><condition data="可能有暴风雨"/></forecast_conditions><forecast_conditions><day_of_week data="周日"/><low data="19"/><high data="33"/><icon data="/ig/images/weather/mostly_sunny.gif"/><condition data="以晴为主"/></forecast_conditions><forecast_conditions><day_of_week data="周一"/><low data="17"/><high data="33"/><icon data="/ig/images/weather/chance_of_storm.gif"/><condition data="可能有暴风雨"/></forecast_conditions><forecast_conditions><day_of_week data="周二"/><low data="13"/><high data="33"/><icon data="/ig/images/weather/sunny.gif"/><condition data="晴"/></forecast_conditions></weather></xml_api_reply>'
?>

在PHP 页面中一定要声明用header 声明告诉服务器要用xml 的形式来处理这段字符串否则它只会当作普通字符串处理~~

<script>

	var xhr = new XMLHttpRequest();

	function temp(){


		xhr.open('get','weather.PHP');
		xhr.onreadystatechange = function (){
			if(xhr.readyState == 4){
				//alert(xhr.resposeText)   //返回的是一个xml内容的字符串！！  ajax 的返回值就只是这两个了   responseText  responseXML
 				//alert(xhr.responseXML)   //返回一个xmlDocument    前提是在PHP端 向服务器发送一个头信息 header("Content-type:text/xml") 告诉服务器应该以xml的形式去理解这个字符串！

 				var xmldom = xhr.responseXML;  //是XML文档对应的js对象,相当于html DOM与document的关系
 				var time = xmldom.getElementsByTagName('forecast_date')[0].getAttribute('data');   //xml获取节点信息跟dom 的类似的 不过它的属性不能直接dom.attr 而是xmldom.getAttribute
				var	high = xmldom.getElementsByTagName('high')[0].getAttribute('data');
				var low  = xmldom.getElementsByTagName('low')[0].getAttribute('data');
				var img = xmldom.getElementsByTagName('icon')[0].getAttribute('data');


				document.getElementsByTagName('p')[0].textContent= time;
				document.getElementsByTagName('p')[1].childNodes[0].src = 'http://www.google.com' + img;
				document.getElementsByTagName('p')[2].textContent = '最高温度：' + high;
				document.getElementsByTagName('p')[3].textContent = '最低温度：' + low;



			}
		}
		xhr.send(null)

	}


</script>



</head>
<body>
 <h1 onclick = "temp()">天气预报</h1>
        <img src="./loading.gif"></img>
        <div id="tianqi">
            <p></p>
            <p><img src="http://www.google.com/ig/images/weather/chance_of_storm.gif"></p>
            <p>最高温度:</p>
            <p>最低温度:</p>
        </div>
</body>

对比用jquery 的ajax 处理xml

	$(function (){

		$("h1").click(function (){

			$.ajax({url:'weather.PHP',success:function (xmldata){


				//alert(xmldata)			//dataType:'xml',经过测试 不写这个选项 也是返回xmldomcument 因为PHP 里面强制声明了 但是写了保险一些

				var city = $('city',xmldata).attr('data')     //xmldata作为背景 就是以xmlDocument 作为上下文  然后呢 找的所有节点 跟dom 的操作是一样的~~
 				var time = $('forecast_date',xmldata).attr('data')
 				var high = $('high',xmldata).attr('data')
 				var low = $('low',xmldata).attr('data')
 				var img = $('icon',xmldata).attr('data')

 				//简单的几句话 就从xml 里获取了所需的内容  接下来就是赋值

				/*
				$('p:first').append('<span>'+city+'</span>')
				$('p:eq(1) img').attr('src','http://www.google.com'+img)
				$('p:eq(2)').append('<span>'+high+'</span>')
				$('p:eq(3)').append('<span>'+low+'</span>')*/

				 //append的话 有个弊端！！！就是每一次click 一下 就会增加一次内容····

				 $('p:first').html('地区: ' +city )
				$('p:eq(1) img').attr('src','http://www.google.com'+img)
				$('p:eq(2)').html('最高温度: ' +high)
				$('p:eq(3)').html('最低温度: ' +low)


			}})
		})
	})




</script>
</head>
<body>
<h1>天气预报</h1>

        <div id="tianqi">
            <p>地区:</p>

            <p><img src="http://www.google.com/ig/images/weather/chance_of_storm.gif"></p>
            <p>最高温度:</p>
            <p>最低温度:</p>
            <p>jquey 怎么就用不了了</p>
        </div>
</body>

Ajax XML返回值的操作 处理天气预报API

相关文章

Ajax XML返回值的操作处理天气预报API