Ajax+PHP简单实例

一直用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[i] = new Option(xmlDoc.getElementsByTagName("city")[i][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部分花了好长时间才完全调好。时间太晚了，都没劲写感想了，洗洗睡了.......