利用js实现Ajax操作(不通过数据库传数据)

利用JS+XML文档实现数据的动态变更，从而实现Ajax异步传输功能。

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type="text/javascript">

            window.onload = function(){

                //1. 为 #province 添加 onchange 响应函数
                document.getElementById("province").onchange = function(){

                    //1.1 把 #city 节点除第一个子节点外都移除. 
                    var cityNode = document.getElementById("city");
                    var cityNodeOptions = cityNode.getElementsByTagName("option");

                    var len = cityNodeOptions.length;
                    for(var i =1; i < len; i++){
                        cityNode.removeChild(cityNodeOptions[1]);   //每次都删除第二个子节点，保证除了第一个子节点以外都删除掉
                    }

                    var provinceVal = this.value;
                    if(provinceVal == ""){
                        return; 
                    }

                    //2. 加载 cities.xml 文件. 得到代表给文档的 document 对象
                    var xmlDoc = parseXml("cities.xml");

                    //3. 在 cities.xml 文档中查找和选择的省匹配的 province 节点.

                    //直接使用 XPath 技术查找 XML 文档中匹配的节点. 
                    var provinceEles = xmlDoc.selectNodes("//province[@name='" 
                                                   + provinceVal + "']")

                    //4. 再得到 province 节点的所有的 city 子节点
                    var cityNodes = provinceEles[0].getElementsByTagName("city");

                    //5. 遍历 city 子节点, 得到每一个 city 子节点的文本值
                    for(var i = 0; i < cityNodes.length; i++){
                        //6. 利用得到的文本值创建 option 节点
                        //<option>cityName</option>
                        var cityText = cityNodes[i].firstChild.nodeValue;
                        var cityTextNode = document.createTextNode(cityText);
                        var optionNode = document.createElement("option");
                        optionNode.appendChild(cityTextNode);

                        //7. 并把 6 创建的 option 节点添加为 #city 的子节点.
                        cityNode.appendChild(optionNode);
                    }

                }

                //js 解析 xml 文档的函数, 只支持 ie
                function parseXml(fileName){
                    //IE 内核的浏览器
                    if (window.ActiveXObject) {
                        //创建 DOM 解析器
                        var doc = new ActiveXObject("Microsoft.XMLDOM");
                        doc.async = "false";
                        //加载 XML 文档, 获取 XML 文档对象
                        doc.load(fileName);
                        return doc;
                    }
                }

            }

        </script>

    </head>
    <body>
        <select id="province">
            <option value="">请选择...</option>
            <option value="河北省">河北省</option>
            <option value="辽宁省">辽宁省</option>
            <option value="山东省">山东省</option>
        </select>

        <select id="city"><option value="...">请选择...</option></select>
    </body>
</html>

cities.xml

<?xml version="1.0" encoding="GB2312"?>
<china>

    <province name="河北省">
        <city>石家庄</city>
        <city>邯郸</city>
        <city>唐山</city>
        <city>张家口</city>
        <city>廊坊</city>
        <city>保定</city>
        <city>承德</city>
    </province>

    <province name="辽宁省">
        <city>沈阳</city>
        <city>大连</city>
        <city>鞍山</city>
        <city>抚顺</city>
        <city>铁岭</city>
    </province>

    <province name="山东省">
        <city>济南</city>
        <city>青岛</city>
        <city>威海</city>
        <city>烟台</city>
        <city>潍坊</city>
    </province>


</china>    

---

效果图：