Web - 简单的开始 – Ajax + XML +DOM

技术交流,DH讲解.

本人不是搞web的,所以今天做的东西应该也挺简单的.
正好有个朋友需要实现这样的功能
点击更多按钮后从服务端获得数据,然后把数据显示在表格中了
我花了一个小时写了一个例子.这里献丑一下:

<script language="JavaScript">
            //清空table,传入table变量(DOM)
            function ClearTable(T){
                while (T.rows.length){
                    T.deleteRow(0);
                }
            }
            //将字符串S,加载到表T中去
            function loadXML2Table(S,T){
                try{//IE
                    xml = new ActiveXObject("Microsoft.XMLDOM");
                    xml.async = "false";
                    xml.loadXML(S);
                }catch(e){
                    try{//FF
                        parser = new DOMParser();
                        xml = parser.parseFromString(S,"text/xml");
                    }catch(e){
                        alert("不能加载XML");
                        return;
                    }
                }
                //
                ClearTable(T);
                //插入
                var x = xml.getElementsByTagName("hh")
                for(i=0;i<x.length;i++){
                    newRow = T.insertRow(i);
                    newRow.id = i;
                    //x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
                    newCell = newRow.insertCell(0);
                    newCell.innerHTML = x[i].getElementsByTagName("a")[0].childNodes[0].nodeValue;
                     newCell = newRow.insertCell(1);
                    newCell.innerHTML = x[i].getElementsByTagName("b")[0].childNodes[0].nodeValue;
                }
            }
            var xmlhttp = null;//ajax
            function loadXMLDoc(url)
            {
                xmlhttp=null;
                if (window.XMLHttpRequest)
                {// code for all new browsers
                    xmlhttp=new XMLHttpRequest();
                }
                else if (window.ActiveXObject)
                {// code for IE5 and IE6
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                if (xmlhttp!=null)
                {
                    xmlhttp.onreadystatechange=state_Change;
                    xmlhttp.open("GET",url,true);
                    xmlhttp.send(null);
                }
                else
                {
                    alert("Your browser does not support XMLHTTP.");
                }
            }

            function state_Change()
            {
                if (xmlhttp.readyState==4)
                {// 4 = "loaded"
                    if (xmlhttp.status==200)
                    {// 200 = OK
                        T = document.getElementById("huangjacky");
                        if(T==null)return;
                        S = xmlhttp.responseText;
                        alert(S);
                        loadXML2Table(S, T);
                    }
                    else
                    {
                        alert("Problem retrieving XML data");
                    }
                }
            }

        </script>

给个演示地址吧.哈哈
http://thefiend.210131.0-168.net/1.html

好就这么点儿东西了.

我是DH,今天就到这里,

posted @ 2010-01-02 21:47  HuangJacky  阅读(404)  评论(0编辑  收藏  举报
AdminLogin