So here's what I'm trying to accomplish basically. I want to have an almost "live" chat, so I figured AJAX would be perfect for what I wanted.
So far, I've managed to get AJAX to retrieve any updates in the chatbox. That was pretty simple. My real problem however, is trying to get AJAX to send data over POST. It just won't work for me... and the frustration is killing me.
It just doesn't seem to even try the function I'm telling it to do. I press the button, and it attempts to load the page again... which I don't think it should?
No data is sent. Huh?
My page consists of 4 seperate pages. The index, getnew.php, which queries the database for the latest messages, addnew.php, which should be self-expanitory, and an HTML forms page.
Here is the index page, which consists of all my Javascript code. (Sorry ahead of time if it's hard to read... I usually make my code all pretty after I'm done... :P)
Code:
var url = "getnew.php";
var urlPost = "addnew.php";
var params = "";
http_request = getHTTP();
getChatData();
function getHTTP() {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
return http_request;
}
function getChatData() {
http_request.onreadystatechange = chatData;
http_request.open('GET', url, true);
http_request.send(null);
setTimeout('getChatData()', 1500);
}
function sendChatData() {
http.open("POST", urlPost, true);
//Send the proper header information along with the request
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//http_request.setRequestHeader("Content-length", params.length);
//http_request.setRequestHeader("Connection", "close");
http_request.onreadystatechange = function() {//Call a function when the state changes.
if (http_request.readyState == 4 && http.status == 200) {
//chatText = encodeURIComponent(document.forms['chat_form'].elements['msg'].value);
//chatName = encodeURIComponent(document.forms['chat_form'].elements['name'].value);
params = "n=" + chatName + "&text=" + chatText;
alert(chatText + chatName);
}
}
http_request.send(params);
alert(http_request.reponseText);
/*
http_request.onreadystatechange = sendData;
param = "n=" + chatName + "&text=" + chatText;
http_request.open("POST", urlPost, true);
http_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
http_request.send(param);
*/
}
function chatData() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
document.getElementById("chat_area").innerHTML = http_request.responseText;
}
}
}
you want your submit function to be attached to onsubmit, and for it to return false, so that the form isn't actually submitted (you could instead make it type 'button' rather than 'submit' and stick with 'onclick').
youre defining the params variable inside the function that gets called when the request has gotten a response from the server which makes no sense, since that happens after you send obviously ;D
You use onreadystatechange to deal with the response from the server. Like in your example when its done (readyState == 4) and has gotten an okay response from the server (200 , url exists and can be accessed)
Okay... your suggestion worked... partially. I installed FireBug (This is a godsend), and it seems theres some errors definitely happening. It actually did POST successfully once, but otherwise it has an error. It will execute sometimes, but with no POSTing happening. Here is the usual culprit:
function sendChatData() {
http_request.open("POST", urlPost, true);
//Send the proper header information along with the request
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//http_request.setRequestHeader("Content-length", params.length);
//http_request.setRequestHeader("Connection", "close");
http_request.onreadystatechange = function() {//Call a function when the state changes.
if (http_request.readyState == 4 && http_request.status == 200) {
chatText = encodeURIComponent(document.forms['chat_form'].elements['msg'].value);
chatName = encodeURIComponent(document.forms['chat_form'].elements['name'].value);
params = "n=" + chatName + "&text=" + chatText;
alert(chatText + chatName);
}
}
http_request.send(params);
return false;
}
I was thinking of making two http_requests, one for receiving, and one for sending. I got an error once where it appeared the two were conflicting. I'll try that.
I noticed that sometimes it tends to lock up trying to get more data... after so many requests... it just seems to stop trying... weird.
Do you have any idea what might be causing those errors?
Edit: Okay... its almost working. Once a post occurs, it POSTs just fine, but then my "GET" function ceases to work. I think its because of those errors.
If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
* The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".
Before you post, read our: 
(Sorry if I missed something important, just let me know)
The actual solution
