retrieving XML information into a div using Ajax and JavaScript

Question

retrieving XML information into a div using Ajax and JavaScript

I am currently working on developing a chat application and facing an issue with fetching all logged in users into a div with the ID "chat_members". Despite confirming that the XML file structure is correct, the JavaScript code alongside AJAX does not seem to be functioning as expected. I suspect the problem lies within the section of the code where I attempt to output the XML data using a for loop.

Sample XML data:

<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{
        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{
            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);

        }
    }   
}


</script>

HTML page

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

  <div id="chat_members">


  </div>

</body>

I'm still learning about AJAX and any assistance with this would be greatly appreciated. Thank you!

javascript xml ajax

Answer 1

Answer №1

When encountering issues:

-- Utilize an HTTP analyzer such as HTTP Fiddler to inspect the communication process. Ensure that your page is connecting with the server and receiving the expected code without any HTTP errors.

-- Verify the correctness of your IF statements by checking if they are properly bracketed. For instance, instead of:

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

It would be clearer like this:

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

While it may seem subtle, being precise is essential.

-- Insert some form of validation in your javascript conditions following the IF statement to ensure the program flow is functioning as intended. If a debugger is unavailable, opt for using an alert box for monitoring purposes.

Answer 2

When encountering issues:

-- Utilize an HTTP analyzer such as HTTP Fiddler to inspect the communication process. Ensure that your page is connecting with the server and receiving the expected code without any HTTP errors.

-- Verify the correctness of your IF statements by checking if they are properly bracketed. For instance, instead of:

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

It would be clearer like this:

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

While it may seem subtle, being precise is essential.

-- Insert some form of validation in your javascript conditions following the IF statement to ensure the program flow is functioning as intended. If a debugger is unavailable, opt for using an alert box for monitoring purposes.

Answer 3

Answer №2

The xmlhttp request should be sent before checking the response status:

function fetchOnlineUsers(){
        getUser.open("GET", "get_chat.php?get_user", true);
        getUser.onreadystatechange = userReceivedHandler;
        getUser.timeout = 1000; //set timeout for xmlhttp request
        getUser.ontimeout = userTimeoutHandler;
        getUser.send(null);
}

function userTimeoutHandler(){
        getUser.abort(); //abort the timed out xml http request
        setTimeout(function(){fetchOnlineUsers()}, 2000);
}

function userReceivedHandler(){
    if(getUser.readyState == 4 && getUser.status == 200){

            var chat_users_div = document.getElementById('chat_users');
            var xmlDoc = getUser.responseXML;
            var usersNodes = xmlDoc.documentElement.getElementsByTagName("user"); 
            var totalUsers = usersNodes.length;
            for (i = 0; i < totalUsers; i++) {
                chat_users_div.innerHTML += '<p><a href="' + usersNodes[i].childNodes.nodeValue + '">' + usersNodes[i].childNodes.nodeValue + '</a></p>';
                chat_users_div.scrollTop = chat_users_div.scrollHeight;
            }
            timer = setTimeout('fetchOnlineUsers();',2000); //Refresh our chat members in 2 seconds
    }   
}

To avoid caching of the response, you can append a random query parameter like:

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

Ensure the responseXML is not empty by logging it:

console.log(responseXML);

You may also need to select the root node of the XML response before selecting child nodes:

var usersNodes = xmlDoc.documentElement.getElementsByTagName("user"); //documentElement selects the root node of the XML document

I hope this information proves helpful.

Answer 4

The xmlhttp request should be sent before checking the response status:

function fetchOnlineUsers(){
        getUser.open("GET", "get_chat.php?get_user", true);
        getUser.onreadystatechange = userReceivedHandler;
        getUser.timeout = 1000; //set timeout for xmlhttp request
        getUser.ontimeout = userTimeoutHandler;
        getUser.send(null);
}

function userTimeoutHandler(){
        getUser.abort(); //abort the timed out xml http request
        setTimeout(function(){fetchOnlineUsers()}, 2000);
}

function userReceivedHandler(){
    if(getUser.readyState == 4 && getUser.status == 200){

            var chat_users_div = document.getElementById('chat_users');
            var xmlDoc = getUser.responseXML;
            var usersNodes = xmlDoc.documentElement.getElementsByTagName("user"); 
            var totalUsers = usersNodes.length;
            for (i = 0; i < totalUsers; i++) {
                chat_users_div.innerHTML += '<p><a href="' + usersNodes[i].childNodes.nodeValue + '">' + usersNodes[i].childNodes.nodeValue + '</a></p>';
                chat_users_div.scrollTop = chat_users_div.scrollHeight;
            }
            timer = setTimeout('fetchOnlineUsers();',2000); //Refresh our chat members in 2 seconds
    }   
}

To avoid caching of the response, you can append a random query parameter like:

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

Ensure the responseXML is not empty by logging it:

console.log(responseXML);

You may also need to select the root node of the XML response before selecting child nodes:

var usersNodes = xmlDoc.documentElement.getElementsByTagName("user"); //documentElement selects the root node of the XML document

I hope this information proves helpful.

retrieving XML information into a div using Ajax and JavaScript

Answer №1

Answer №2

Similar questions

What causes the issue when attempting to import multiple CSS files in a Vue.js project using @import more than once?

Executing the command `npm run jshint` yields the error message `script not found: jshint`

Combining ajax and jsp to fetch data for a servlet

Prevent the bottom row from being sorted

Retrieve the texture's color based on the UV coordinates

Create a unique shader in Three.js that remains unaffected by the fog effect

Unknown error occurred in Eventstore: Unable to identify the BadRequest issue

Is there a Javascript tool available for creating a visual representation of the correlation between items in two separate

After updating the INNERHTML, the NAV tag content is no longer functional

What is the best way to show customized text from a data member within the :items object array for the item title in a v-select (Vuetify) dropdown menu

MongoDB: Restrict the number of records returned to an increasing count within a specified range

What is the process for including the Authorization HTTP header in a JSONP request?

Why isn't my jQuery Flot Pie chart functioning properly when using $.Ajax and JSON?

Looking for assistance with a simple Javascript program

The code is functioning properly, however it is returning the following error: Anticipated either

The impact of jQuery ajax on SVG data transmitted to a ColdFusion server appears to be significant

Encountering issues with managing CometD channels within Angular 2

Are we on the correct path for breaking down code using react JS?

Invoke a jQuery function in the parent page using regular JavaScript from an iframe

Are your Express routes failing to function properly?