<?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>