Ajax+PHP簡單實例

一直用jQuery庫，若是不用，還會使用Ajax嗎？

參考書：1.PHP與jQuery開發實例；2.Ajax基礎教程 (圖靈程序設計叢書就是好)

把書1裏jQuery代碼換成原生JS,實例1是選擇省份出現城市列表，實例2改爲了聯動下拉框。

1、實例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。

 

2、聯動下拉框

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部分花了好長時間才徹底調好。時間太晚了，都沒勁寫感想了，洗洗睡了.......