通過ajax和javascript將xml數據提取到div中

Question

構建一個聊天應用程序，我試圖將所有登錄的用戶提取到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>

Java腳本

<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的新手，非常感謝獲得與此相關的幫助。 謝謝！

Answer 1

要解決此問題：

-使用HTTP分析器（例如HTTP Fiddler）。 看一下通信-您的頁面是在調用服務器並正確獲取想要返回的代碼，而不是某種HTTP錯誤嗎？

-檢查您的IF語句，並確保將其正確括在括號中。 當我看見：

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

我感到困惑。 它應該是：

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

可能沒有什么不同，但是絕對可以保證。

-在IF后面的javascript子句中進行某種檢查，以確保程序流正確執行。 如果您沒有調試器，只需在其中粘貼一個警報框即可。

Answer 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

希望這可以幫助

通過ajax和javascript將xml數據提取到div中

問題描述

2 個解決方案

解決方案1
0 2013-04-29 14:44:56

解決方案2
0 2013-04-29 14:47:59

通過ajax和javascript將xml數據提取到div中

問題描述

2 個解決方案

解決方案1 0 2013-04-29 14:44:56

解決方案2 0 2013-04-29 14:47:59

解決方案1
0 2013-04-29 14:44:56

解決方案2
0 2013-04-29 14:47:59