Ajax+PHP简单实例

nidr

　　一直用jQuery库，如果不用，还会使用Ajax吗？
　　参考书：1.PHP与jQuery开发实例；2.Ajax基础教程 (图灵程序设计丛书就是好)
　　把书1里jQuery代码换成原生JS,实例1是选择省份出现城市列表，实例2改成了联动下拉框。
　　一、实例1
　　html代码：



<form>
<p>
<label for="province">省份：</label>
<select id="choice" name="province">
<option value="">请选择</option>
<option value="JiangSu">江苏省</option>
<option value="AnHui">安徽省</option>
</select>
</p>
<div id="result"></div>   
</form>               
　　js代码：



            var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

function doSearch(event) {
var province = document.getElementById("choice").value;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "data.php?province="+province, false);
xmlHttp.send(null);
}
　　　　　　　//也常取名callBack
function handleStateChange() {
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){                        
                        parseResults();
}
}
}         
function parseResults() {               
document.getElementById("result").innerHTML = xmlHttp.responseText;               
}
　　　　　　　//下拉框值改变出发事件
var evtObject = document.getElementById("choice");
if(evtObject.addEventListener){        
evtObject.addEventListener("change",doSearch,false);
}
else if(evtObject.attachEvent){        
evtObject.attachEvent("onchange",doSearch);
}
　　PHP代码：



<?php
if($_GET['province']=='JiangSu'){
$citys = array('南京', '苏州','南通','无锡');   
echo getHTML($citys);
}
else if($_GET['province']=='AnHui'){
$citys = array('合肥', '芜湖','黄山','宣城');
echo getHTML($citys);
}
function getHTML($citys){
$strResult = '<ul>';
for($i=0; $i<count($citys); $i++){
$strResult.='<li>'.$citys[$i].'</li>';
}
$strResult.='</ul>';
return $strResult;
}
?>
　　插曲：原书实例中result是<p id="result"></p>,结果在ie6下 innerHTML 报错，所以换成了div。
　　
　　二、联动下拉框
　　XMLHttpRequest对象提供了2个可以用来访问服务器响应的属性:1. responseText; 2. responseXML。
　　第二个实例采用从XML文件中读取数据。
　　XML代码



<?xml version="1.0" encoding="UTF-8"?>
<provinces>
<province index="1" name="JiangSu">
<name>江苏</name>
<citys>
<city>南京</city>
<city>苏州</city>
<city>南通</city>
<city>无锡</city>
</citys>
</province>
<province index="2" name="AnHui">
<name>安徽</name>
<citys>
<city>合肥</city>
<city>芜湖</city>
<city>黄山</city>
<city>宣城</city>
</citys>
</province>
</provinces>
　　PHP代码：



<?php
header("Content-Type: text/xml");　//必须指明，responseXML才能接收
libxml_use_internal_errors(true); //抑制xml错误，便于代码自行处理错误
$objXML = simplexml_load_file('data.xml');
if(!$objXML){
$errors = libxml_get_errors();
foreach($errors as $error){
echo $errors->message,'<br/>';
}
} else {
if($_GET['province']=='JiangSu'){
foreach($objXML->province as $province){
if($province->name == "江苏"){            
echo $province->citys->asXML();　　//asXML()，返回xml字符串
}
}   
} else if ($_GET['province']=='AnHui'){
foreach($objXML->province as $province){
if($province->name == "安徽"){            
echo $province->citys->asXML();
}
}   
}
}
?>
　　html代码：



　　　　<form>
<p>
<label for="province">省份：</label>
<select id="choice" name="province">               
<option value="JiangSu">江苏省</option>
<option value="AnHui">安徽省</option>
</select>
<label for="citys">城市：</label>
<select id="city" name="citys">  
</select>
</p>     
</form>
　　JS代码：



var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doSearch(event) {
var province = document.getElementById("choice").value;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "data.php?province="+province, false);               
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
//clearPreviousResults();                        
                        parseResults();
}
}
}        
function parseResults() {
var xmlDoc = xmlHttp.responseXML;            
// var htmlStr="";
var cityName;
if(xmlDoc.getElementsByTagName("city")[0].text){
cityName = "text";    //IE6下 要用text 取 内容
} else {
cityName = "textContent";    //chrome下 要用textContent 取内容
                }            
for(var i=0;i<xmlDoc.getElementsByTagName("city").length;i++){
document.getElementById("city").options = new Option(xmlDoc.getElementsByTagName("city")[cityName],i)                  
                }               
            }
doSearch(); //加载页面的时候先执行一次，因为去掉了“请选择”
var evtObject = document.getElementById("choice");
if(evtObject.addEventListener){        
evtObject.addEventListener("change",doSearch,false);
}
else if(evtObject.attachEvent){        
evtObject.attachEvent("onchange",doSearch);
}
　　插曲：ie6下，取城市名 得用 xmlDoc.getElementsByTagName("city")[0].text,而Chrome下用textContent,因此我用字符串cityName代替，并且取城市名的时候用了数组写法，不能用“.”取值。 select 在ie6下 设置innerHTML，页面没效果，但值存在。
　　以上2个实例在ie6和chrome下均可运行。哎，兼容性的确让人头疼，第二个实例JS部分花了好长时间才完全调好。时间太晚了，都没劲写感想了，洗洗睡了.......