Topic: unable to use POST using AJAX, only works with GET

[jasonc]

i am trying to get a list of online users


below is my own code i have tried to do.

Code: [Select]

function getUserList() {
if(window.XMLHttpRequest) return new XMLHttpRequest;
else if(window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else return false;
}


function updateUsers() {
var req=getUserList();
if (req.readyState == 4 || req.readyState == 0) {
req.open("POST", 'getUser_List.php', true);
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
req.onreadystatechange = function() {
if(req.readyState==4) {
var user_div = document.getElementById('user_list'); var xmldoc = req.responseXML;
var message_nodes = xmldoc.getElementsByTagName("users"); var n_messages = message_nodes.length
user_div.innerHTML = '';
for (i = 0; i < n_messages; i++) {
var user_node = message_nodes[i].getElementsByTagName("user");
user_div.innerHTML += user_node[0].firstChild.nodeValue + '<br />';
}
var updateInterval=setInterval(updateUsers, 4000);
}
var param = "adminusername" + document.getElementById('adminusername').value;
req.send(param);
}
}
}

this is the source code of the XML file that is used.

Code: [Select]

<?xml version="1.0" ?>
<root>
<users id="0">
<user>&lt;a href=&quot;&quot;&gt;user1&lt;/a&gt;</user>
</users>
<users id="6">
<user>&lt;a href=&quot;&quot;&gt;user2&lt;/a&gt;</user>
</users>
<users id="17">
<user>&lt;a href=&quot;&quot;&gt;user3&lt;/a&gt;</user>
</users>
<users id="29">
<user>&lt;a href=&quot;&quot;&gt;user4&lt;/a&gt;</user>
</users>
</root>





currently i am using this code which works but is not secure as it can be viewed by anyone!

this is why i wanted to use the POST method as this would prevent anyone from viewing it directly from the file itself, ie.  www.site.com/getuserlist.php

can anyone see from my non working code at the top of this post what i am doing wrong in my code.

Code: [Select]

function getUserList() {
if(window.XMLHttpRequest) return new XMLHttpRequest;
else if(window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else return false;
}

function updateUsers() {
var req=getUserList();
req.open("GET", "getUser_List.php", true);
req.onreadystatechange=function() {
if(req.readyState==4) {
var user_div = document.getElementById('user_list'); var xmldoc = req.responseXML;
var message_nodes = xmldoc.getElementsByTagName("users"); var n_messages = message_nodes.length
user_div.innerHTML = '';
for (i = 0; i < n_messages; i++) {
var user_node = message_nodes[i].getElementsByTagName("user");
user_div.innerHTML += user_node[0].firstChild.nodeValue + '<br />';
}
}
}
req.send();
}
var updateInterval=setInterval(updateUsers, 4000);


[gamblor01]

I made a thread recently about converting GET to POST requests in AJAX.  See here:

http://www.phpfreaks.com/forums/index.php/topic,288125.0.html


It looks like you have a few problems:

1. You need to use the equal sign in your params variable:


var param = "adminusername" + document.getElementById('adminusername').value;


should be:


var param = "adminusername=" + document.getElementById('adminusername').value;



2. You need to send the appropriate header information when performing a POST:


xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");



3. You need to create the params variable EARLIER than what you are doing.  Otherwise the params.length is not going to make any sense.

4. I don't think the sending of the params should go inside of the function



So I would think this should work:


function updateUsers() {
   var req=getUserList();
   var param = "adminusername=" + document.getElementById('adminusername').value;
   if (req.readyState == 4 || req.readyState == 0) {
   req.open("POST", 'getUser_List.php', true);
   req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   req.setRequestHeader("Content-length", params.length);
   req.setRequestHeader("Connection", "close");
   req.onreadystatechange = function() {
                                    if(req.readyState==4) {
                                       var user_div = document.getElementById('user_list'); var xmldoc = req.responseXML;
                                       var message_nodes = xmldoc.getElementsByTagName("users"); var n_messages = message_nodes.length
                                       user_div.innerHTML = '';
                                          for (i = 0; i < n_messages; i++) {
                                          var user_node = message_nodes[i].getElementsByTagName("user");
                                          user_div.innerHTML += user_node[0].firstChild.nodeValue + '<br />';
                                          }
                                    var updateInterval=setInterval(updateUsers, 4000);
                                    }
                              }

   req.send(param);
   }
}




Personally, I don't like to define the anonymous function like you do.  It makes things unreadable if you ask me (I won't get into the flame war about where to place curly braces either  ).  But I think that the stuff above will work.  If not...it's at least a few steps closer to working.  Let me know the outcome.

[jasonc]

I made a thread recently about converting GET to POST requests in AJAX.  See here:

http://www.phpfreaks.com/forums/index.php/topic,288125.0.html


It looks like you have a few problems:

1. You need to use the equal sign in your params variable:


var param = "adminusername" + document.getElementById('adminusername').value;


should be:


var param = "adminusername=" + document.getElementById('adminusername').value;



2. You need to send the appropriate header information when performing a POST:


xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");



3. You need to create the params variable EARLIER than what you are doing.  Otherwise the params.length is not going to make any sense.

4. I don't think the sending of the params should go inside of the function



So I would think this should work:


function updateUsers() {
   var req=getUserList();
   var param = "adminusername=" + document.getElementById('adminusername').value;
   if (req.readyState == 4 || req.readyState == 0) {
   req.open("POST", 'getUser_List.php', true);
   req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   req.setRequestHeader("Content-length", params.length);
   req.setRequestHeader("Connection", "close");
   req.onreadystatechange = function() {
                                    if(req.readyState==4) {
                                       var user_div = document.getElementById('user_list'); var xmldoc = req.responseXML;
                                       var message_nodes = xmldoc.getElementsByTagName("users"); var n_messages = message_nodes.length
                                       user_div.innerHTML = '';
                                          for (i = 0; i < n_messages; i++) {
                                          var user_node = message_nodes[i].getElementsByTagName("user");
                                          user_div.innerHTML += user_node[0].firstChild.nodeValue + '<br />';
                                          }
                                    var updateInterval=setInterval(updateUsers, 4000);
                                    }
                              }

   req.send(param);
   }
}




Personally, I don't like to define the anonymous function like you do.  It makes things unreadable if you ask me (I won't get into the flame war about where to place curly braces either  ).  But I think that the stuff above will work.  If not...it's at least a few steps closer to working.  Let me know the outcome.

hey thanks for your reply.

i have tried the last part of your post and replaced my code with it, but this did not work.

am i correct that i replace all of my javascript or just the one function?

Code: [Select]

function getUserList() {
if(window.XMLHttpRequest) return new XMLHttpRequest;
else if(window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else return false;
}

function updateUsers() {
   var req=getUserList();
   var param = "adminusername=" + document.getElementById('username').value;
   if (req.readyState == 4 || req.readyState == 0) {
   req.open("POST", 'getUser_List.php', true);
   req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   req.setRequestHeader("Content-length", params.length);
   req.setRequestHeader("Connection", "close");
   req.onreadystatechange = function() {
                                    if(req.readyState==4) {
                                       var user_div = document.getElementById('user_list'); var xmldoc = req.responseXML;
                                       var message_nodes = xmldoc.getElementsByTagName("users"); var n_messages = message_nodes.length
                                       user_div.innerHTML = '';
                                          for (i = 0; i < n_messages; i++) {
                                          var user_node = message_nodes[i].getElementsByTagName("user");
                                          user_div.innerHTML += user_node[0].firstChild.nodeValue + '<br />';
                                          }
                                    var updateInterval=setInterval(updateUsers, 4000);
                                    }
                              }

   req.send(param);
   }
}


[jasonc]

or better still...
do you know how i obtain the information from the form fields i have set previously
i have a field called 'adminusername' and this has the user name of the admin that is making the request for users online, as i wish to have this list show but not have the admin members username show!
obviously they know they are online.

if i can get this information then i can use my existing code as this got all users but i was not able to POST the admins username to the page that was creating the XML of users online.

[jasonc]

ok i have just tried something after thinking on how i can catch any errors from mysql or something like that
but in my test i removed all content from the getUser_List.php file and replaced with a routine to insert data in to mysql table i just created.

i then tried the javascript via my site and nothing showed as expected but also nothing was added to the database.
so i visited the file directly in the address bar and the data got added.

so from this i would say that the javascript is not POSTING to the page.

any ideas?

[gamblor01]

Hey sorry...I was busy all day and evening yesterday so I wasn't able to look at this stuff again until now.  I see that you marked the topic as solved.  Care to share what the solution was?

[jasonc]

Hey sorry...I was busy all day and evening yesterday so I wasn't able to look at this stuff again until now.  I see that you marked the topic as solved.  Care to share what the solution was?

Code: [Select]

function getUserList() {
if(window.XMLHttpRequest) return new XMLHttpRequest;
else if(window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else return false;
}

function updateUsers() {
var req=getUserList();
req.open("POST", "getusers.php", true);
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// i get the name from the FORM, which i previously store it when the page loads, this allows the script to show all users except the one that is wanting the list.
// no point is 'user1' being notified that 'user1' is online !
// i use the POST of name in the getusers.php to so i can stop the 'name' user from showing in the list generated.
var param = 'name=' + document.getElementById('name').value;
req.onreadystatechange=function() {
if(req.readyState==4) {
var user_div = document.getElementById('user_list'); var xmldoc = req.responseXML;
var message_nodes = xmldoc.getElementsByTagName("users"); var n_messages = message_nodes.length
user_div.innerHTML = '';
for (i = 0; i < n_messages; i++) {
var user_node = message_nodes[i].getElementsByTagName("user");
user_div.innerHTML += user_node[0].firstChild.nodeValue + '<br />';
}
}
}
req.send(param);
}
var updateInterval=setInterval(updateUsers, 4000);

please ignor that fact that it have the variable 'message' this was taken from another one of my scripts and did not dare change it in case i messed it up!

hope someone find this useful.

any problems let me know, i'll see what i can do to help someone else out.