Javascript - Not sure if my AJAX is correct, no errors but no DB entries

I'm a PHP guy and am extremely new to javascript. I'm trying to add a little simple AJAX chat program to a website I'm building. Problem is, I don't know how to test whether or not my requests got sent or if it's the PHP behind it that is the problem. If it's the PHP I can fix that, if it's the javascript, well, that's what this question is for. I'm not getting any errors but I'm also not getting any chat messages in my database. Here's my javascript on the chat page:

<script type="text/javascript">
var xmlhttp;
var newChatMessage;
window.onunload=function() {
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
        }
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.open("POST","tinChat_process.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("action=pageClose");
};
function loadChat() {
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
        }
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.open("POST","tinChat_process.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("action=grabChat");
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("ajaxBox").i开发者_开发知识库nnerHTML=xmlhttp.responseText;
            }
        }
    t=setTimeout("loadChat()",5000);
    }
function sendMessage() {
    newChatMessage = "action=newMessage&message=" + document.getElementByID("chatMess").value;
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
        }
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.open("POST","tinChat_process.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(newChatMessage);
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("ajaxBox").innerHTML=xmlhttp.responseText;
            }
        }
    }
loadChat();
</script>

I'm sure there are better ways to write the code, but can anyone see any errors in it? My usual PHP debugging methods don't work as they consist of half-splitting problem areas with die messages or vardumping expected values, etc - all of which wouldn't really display after the page is loaded, correct? So that leaves me unable to half-split between it being the PHP or the javascript. Anyway, thanks for any help.

---

One important debugging tool is Firebug, which is a plug-in for Firefox.

You can use it not only to inspect your HTML but also to watch what's going on with your XMLHTTP request.

Once installed, in the lower-right corner you'll see the firebug icon. Open it up enable everything and select the NET tab. You can start poking around from there.

---

Also, in IE9 you can use F12 to debug and view errors.

---

I can't see sendMessage() being invoked anywhere in that piece of code.

---

Your code has only one error... document.getElementByID("xxx") is not the method. It is document.getElementById("xxx"). I tried your code -- it posts back to tinChat_process.php with parameters action = newMessage and message = "Whatever you type in that box...".. If you still cannot resolve can you post the chatMess and ajaxBox and tell us how you are calling the sendMessage()? I added a button to test the call:

<button onclick="sendMessage()">Go</button>