通过ajax和javascript将xml数据提取到div中_Javascript_Xml_Ajax

通过ajax和javascript将xml数据提取到div中

javascript xml ajax

通过ajax和javascript将xml数据提取到div中,javascript,xml,ajax,Javascript,Xml,Ajax,正在构建聊天应用程序，我正在尝试将所有登录用户提取到ID为“chat_members”的div中。但是div中没有显示任何内容，我已经验证了xml文件结构是正确的，但是我与ajax一起使用的javascript不仅仅工作。我认为问题出在我试图在for循环中输出xml数据的代码区域 XML数据示例： <member> <user id="1">Ken Sam</user> <user id="2">Andy James</user> &

正在构建聊天应用程序，我正在尝试将所有登录用户提取到ID为“chat_members”的div中。但是div中没有显示任何内容，我已经验证了xml文件结构是正确的，但是我与ajax一起使用的javascript不仅仅工作。我认为问题出在我试图在for循环中输出xml数据的代码区域

XML数据示例：

<member>
<user id="1">Ken Sam</user>
<user id="2">Andy James</user>
</member>


肯·萨姆
安迪·詹姆斯

Javascript

<script language="javascript">

// JavaScript Document


var getMember = XmlHttpRequestObject();
var lastMsg = 0;
var mTimer;

function startChat() {
    getOnlineMembers();
}   

// Checking if XMLHttpRequest object exist in user browser
function XmlHttpRequestObject(){
if(window.XMLHttpRequest){
    return new XMLHttpRequest();
}
else if(window.ActiveXObject){
    return new ActiveXObject("Microsoft.XMLHTTP");
} else{
        //alert("Status: Unable to launch Chat Object. Consider upgrading your browser.");  
        document.getElementById("ajax_status").innerHTML = "Status: Unable to launch Chat Object. Consider upgrading your browser.";
}
}

function getOnlineMembers(){
    if(getMember.readyState == 4 || getMember.readyState == 0){
        getMember.open("GET", "get_chat.php?get_member", true);
        getMember.onreadystatechange = memberReceivedHandler;
        getMember.send(null);
    }else{
            // if the connection is busy, try again after one second  
            setTimeout('getOnlineMembers()', 1000);
    }
}



function memberReceivedHandler(){
    if(getMember.readyState == 4){
        if(getMember.status == 200){

            var chat_members_div = document.getElementById('chat_members');
            var xmldoc = getMember.responseXML;
            var members_nodes = xmldoc.getElementsByTagName("member"); 
            var n_members = members_nodes.length;
            for (i = 0; i < n_members; i++) {
                chat_members_div.innerHTML += '<p><a href="' + members_nodes[i].childNodes.nodeValue + '">' + members_nodes[i].childNodes.nodeValue + '</a></p>';
                        chat_members_div.scrollTop = chat_members_div.scrollHeight;
                    }

            mTimer = setTimeout('getOnlineMembers();',2000); //Refresh our chat members in 2 seconds

        }
    }   
}


</script>


//JavaScript文档
var getMember=XmlHttpRequestObject（）；
var lastMsg=0；
var-mTimer；
函数startChat（）{
getOnlineMembers（）；
}   
//检查用户浏览器中是否存在XMLHttpRequest对象
函数XmlHttpRequestObject（）{
if（window.XMLHttpRequest）{
返回新的XMLHttpRequest（）；
}
else if（window.ActiveXObject）{
返回新的ActiveXObject（“Microsoft.XMLHTTP”）；
}否则{
//警报（“状态：无法启动聊天对象。请考虑升级浏览器”）；
文档.GETelEnMyBid（“Ajax”状态）.nNeNeld=“状态：无法启动聊天对象。考虑升级浏览器。”
}
}
函数getOnlineMembers（）{
如果（getMember.readyState==4 | | getMember.readyState==0）{
打开（“GET”，“GET\u chat.php？GET\u member”，true）；
getMember.onreadystatechange=memberReceivedHandler；
getMember.send（空）；
}否则{
//如果连接忙，请在一秒钟后重试
setTimeout（'getOnlineMembers（）'，1000）；
}
}
函数成员ReceivedHandler（）{
if（getMember.readyState==4）{
if（getMember.status==200）{
var chat_members_div=document.getElementById（'chat_members'）；
var xmldoc=getMember.responseXML；
var members_nodes=xmldoc.getElementsByTagName（“成员”）；
var n_members=members_nodes.length；
对于（i=0；i


HTML页面
<body onLoad="javascript:startChat();">

  <!--- START: Div displaying all online members --->
  <div id="chat_members">


  </div>
  <!---END: Div displaying all online members --->

</body>



我是ajax新手，非常感谢您的帮助。
谢谢
 要对此进行故障排除：
--使用HTTP分析器，如HTTP Fiddler。看一看通信——您的页面是否正确地调用了服务器并获得了您想要的代码，而不是某种类型的HTTP错误
--检查您的IF语句，并确保它们被正确地括起来。当我看到：
if(getMember.readyState == 4 || getMember.readyState == 0){

我感到困惑。应该是：
if( (getMember.readyState == 4) || (getMember.readyState == 0)){

这可能不会有什么不同，但绝对肯定是件好事
--在IF之后对javascript子句进行某种检查，以确保程序流正确执行。如果没有调试器，只需在其中插入一个警报框。
在检查响应状态之前，必须发送xmlhttp请求：
function getOnlineMembers(){
        getMember.open("GET", "get_chat.php?get_member", true);
        getMember.onreadystatechange = memberReceivedHandler;
        getMember.timeout = 1000; //set timeout for xmlhttp request
        getMember.ontimeout = memberTimeoutHandler;
        getMember.send(null);
}

function memberTimeoutHandler(){
        getMember.abort(); //abort the timedout xmlhttprequest
        setTimeout(function(){getOnlineMembers()}, 2000);
}

function memberReceivedHandler(){
    if(getMember.readyState == 4 && getMember.status == 200){

            var chat_members_div = document.getElementById('chat_members');
            var xmldoc = getMember.responseXML;
            var members_nodes = xmldoc.documentElement.getElementsByTagName("member"); 
            var n_members = members_nodes.length;
            for (i = 0; i < n_members; i++) {
                chat_members_div.innerHTML += '<p><a href="' + members_nodes[i].childNodes.nodeValue + '">' + members_nodes[i].childNodes.nodeValue + '</a></p>';
                chat_members_div.scrollTop = chat_members_div.scrollHeight;
            }
            mTimer = setTimeout('getOnlineMembers();',2000); //Refresh our chat members in 2 seconds
    }   
}

通过以下方式检查responseXML是否为空：
console.log(responseXML);

在选择childNodes之前，您可能还需要选择xml响应的根节点：
var members_nodes = xmldoc.documentElement.getElementsByTagName("member"); //documentElement selects the root node of the xml document

希望这有帮助您确定您得到的是200，因为它是GEt请求，所以您得到的是缓存响应吗？挑剔：你真的应该为输出使用无序列表，而不是段落标记。
var members_nodes = xmldoc.documentElement.getElementsByTagName("member"); //documentElement selects the root node of the xml document