fetching xml data into a div via ajax and javascript

Question

Building a chat app and I am trying to fetch all logged in user into a div with ID name "chat_members". But nothing shows up in the div and I have verified that the xml file structure is correct but the javascript i'm using alongside ajax isn't just working. I think the problem is around the area of the code where I'm trying to spool out the xml data in the for loop.

XML data sample:

<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 page

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

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


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

</body>

I'm new to ajax and would really appreciate getting help with this. Thanks!

Answer 1

To troubleshoot this:

-- Use an HTTP analyzer like HTTP Fiddler. Take a look at the communication -- is your page calling the server and getting the code that you want back, correctly, and not some type of HTTP error?

-- Check your IF statements, and make sure they're bracketed correctly. When I see:

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

I see confusion. It should be:

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

It might not make a difference, but it's good to be absolutely sure.

-- Put some kind of check in your javascript clauses after the IF to make sure program flow is executing properly. If you don't have a debugger, just stick an alert box in there.

Answer 2

You must send the xmlhttp request before checking the response status:

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
    }   
}

To prevent caching response you can try:

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

Check the responseXML is not empty by:

console.log(responseXML);

Also you might need to select the root node of the xml response before selecting childNodes:

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

hope this helps

fetching xml data into a div via ajax and javascript

Question

2 answers

solution1
0 2013-04-29 14:44:56

solution2
0 2013-04-29 14:47:59

fetching xml data into a div via ajax and javascript

Question

2 answers

solution1 0 2013-04-29 14:44:56

solution2 0 2013-04-29 14:47:59

solution1
0 2013-04-29 14:44:56

solution2
0 2013-04-29 14:47:59