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

【问题标题】：fetching xml data into a div via ajax and javascript通过 ajax 和 javascript 将 xml 数据提取到 div
【发布时间】：2013-04-29 14:33:19
【问题描述】：

构建一个聊天应用程序，我试图将所有登录用户提取到 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>

HTML 页面

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

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


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

</body>

我是 ajax 新手，非常希望能得到这方面的帮助。谢谢！

【问题讨论】：

你确定你得到一个 200，你得到缓存的响应，因为它是一个 GET 请求吗？ Nitpick：您确实应该对输出使用无序列表，而不是段落标签。

标签： javascript xml ajax

【解决方案1】：

解决此问题：

-- 使用 HTTP 分析器，例如 HTTP Fiddler。看看通信——您的页面是否正确地调用了服务器并获取了您想要返回的代码，而不是某种类型的 HTTP 错误？

-- 检查您的 IF 语句，并确保它们被正确括起来。当我看到：

if(getMember.readyState == 4 || getMember.readyState == 0){

我看到了混乱。应该是：

if( (getMember.readyState == 4) || (getMember.readyState == 0)){

这可能没有什么不同，但最好是绝对确定。

-- 在 IF 之后的 javascript 子句中进行某种检查，以确保程序流程正确执行。如果您没有调试器，只需在其中粘贴一个警告框即可。

【讨论】：

【解决方案2】：

您必须在检查响应状态之前发送 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
    }   
}

为了防止缓存响应，您可以尝试：

getMember.open("GET", "get_chat.php?get_member&t=" + Math.random(), true);

通过以下方式检查 responseXML 是否为空：

console.log(responseXML);

您可能还需要在选择 childNodes 之前选择 xml 响应的根节点：

var members_nodes = xmldoc.documentElement.getElementsByTagName("member"); //documentElement selects the root node of the xml document

希望对你有帮助

【讨论】：