零基础学习AJAX之AJAX的简介和基础

2019-09-14 07:07:25王冬梅

                xmlHttp.onRecorderStateChange = handleStateChange;
                xmlHttp.open("GET", url);
                xml.send(null);
            }

            function handleStateChange() {
                if (xmHttp, readyState == 4 && xmlHttp.status == 200)
                DrawTable(xmlHttp.responseXML); //responseXML获取到xml文档
            }

其中DrawTable()为后勤处理XML的函数,将服务器返回的XML对象responseXML直接作为参数传递,HTML部分如下:


    <input type="button" value="获取XML" onclick="getXML('1-4.xml');"><br><br>
<table class="datalist" summary="list of members in EE Studay" id="member">
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Class</th>
        <th scope="col">Birthday</th>
        <th scope="col">Constellation</th>
        <th scope="col">Mobile</th>
    </tr>
</table>

当用户单击按钮时出发getXML(),并将xml地址1-4.xml作为参数传入

而函数DrawTable()的任务就是把XML中的数据拆分,并重新组装到表格"member"中,代码如下:可以看到处理XML的方法与DOM处理HTML完全相同


    function DrawTable(myXML) {
                //用DOM方法操作XML文档
                var oMembers = myXML.getElementsByTagName("member");
                var oMember = "",
                    sName = "",
                    sClass = "",
                    sBirth = "",
                    sConstell = "",