u ajax的省市联动案例(如何动态的从服务器取得数据)
showCities.php页面
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
//创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest 对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest="";
function getCities(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
var url="/ajax/showCitiesPro.php";//post
var data="province="+$('sheng').value;
myXmlHttpRequest.open("post",url,true);//异步方式
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数
myXmlHttpRequest.onreadystatechange=chuli;
//发送
myXmlHttpRequest.send(data);
}
}
function chuli(){
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
//取出服务器回送的数据
var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city");
$('city').length=0;
var myOption=document.createElement("option");
myOption.innerText="--城市--";
//添加到
$('city').appendChild(myOption);
//遍历并取出城市
for(var i=0;i<cities.length;i++){
var city_name=cities[i].childNodes[0].nodeValue;
//创建新的元素option
var myOption=document.createElement("option");
myOption.value=city_name;
myOption.innerText=city_name;
//添加到
$('city').appendChild(myOption);
}
}
}
}
//这里我们写一个函数
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<select id="sheng" οnchange="getCities();">
<option value="">---省---</option>
<option value="zhejiang">浙江</option>
<option value="jiangsu" >江苏</option>
<option value="sichuan" >四川</option>
</select>
<select id="city">
<option value="">--城市--</option>
</select>
<select id="county">
<option value="">--县城--</option>
</select>
</body>
</html>
**showCitiesProcess.php**
<?php
//服务器端
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
//接收用户的选择的省的名字
$province=$_POST['province'];
file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND);
//如何在调试过程中，看到接收到的数据 。
//到数据库去查询省有那些城市(现在先不到数据库)
$info="";
if($province=="zhejiang"){
$info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";
}else if($province=="jiangsu"){
$info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>";
}
echo $info;
?>
u 黄金价格波动图
glodPrice.php界面
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link href="Untitled-1.css" rel="stylesheet" type="text/css" />
<script src="my.js" type="text/javascript"></script>
<script type="text/javascript">
var myXmlHttpRequest;
function updateGoldPrice(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
//创建ajax引擎成功
var url="glodPriceProcess.php";
var data="city[]=dj&city[]=tw&city[]=ld";
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
myXmlHttpRequest.onreadystatechange=function chuli(){
//接收数据json
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
//取出并转成对象数组
var res_objects=eval("("+myXmlHttpRequest.responseText+")");
$('dj').innerText=res_objects[0].price;
$('tw').innerText=res_objects[1].price;
$('ld').innerText=res_objects[2].price;
}
}
}
myXmlHttpRequest.send(data);
}
}
//使用定时器 每隔5 秒
window.setInterval("updateGoldPrice()",5000);
</script>
</head>
<center>
<h1>每隔5秒中更新数据(以1000为基数计算涨跌)</h1>
<table border=0 class="abc">
<tr><td colspan="3"><img src="gjhj_bj_tit.gif" /></td></tr>
<tr ><td>市场</td><td>最新价格$</td><td>涨跌</td></tr>
<tr><td>伦敦</td><td id="ld">788.7</td><td><img src="down.gif" />211.3</td></tr>
<tr><td>台湾</td><td id="tw">854.0</td><td><img src="down.gif" />146.0</td></tr>
<tr><td>东京</td><td id="dj">1791.3</td><td><img src="up.gif" />791.3</td></tr>
</table>
</center>
</html>
glodPriceProcess.php
<?php
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/html;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
//接收
$cities=$_POST['city'];
//随机的生成 三个 500-2000间数
//$res='[{"price":"400"},{"price":"1000"},{"price":"1200"}]';
$res='[';
for($i=0;$i<count($cities);$i++){
if($i==count($cities)-1){
$res.='{"cityname":"'.$cities[$i].'" ,"price":"'.rand(500,1500).'"}]';
}else{
$res.='{"cityname":"'.$cities[$i].'" ,"price":"'.rand(500,1500).'"},';
}
}
file_put_contents("d:/mylog.log",$res."\r\n",FILE_APPEND);
echo $res;
?>