Questions about using XHR

I am new to working with the XMLHttpRequest Object. What I want to do is open up a php script via XMR and write JavaScript values to the database. I have no idea how to do it, s开发者_StackOverflow社区o here's what I have.

The JavaScript:

function popup(username) {
var message = prompt("Message:","");
if(message != ""){
    var req = new XMLHttpRequest();
    req.open('POST','getmessage.php','false');
    req.send("username=" + username +"&message="+message);
} else {
    alert("Please enter a message");
}
}

The PHP file (getmessage.php):

<?php
$to = $_POST['username']
$message = $_POST['message'];

echo $to + '   ' + $message;
?>

The PHP script is going to do more than that, but I just want to echo out the values first to make sure they're actually there. But they're not. Thoughts anyone?

---

change req.open('POST','file:///getmessage.php','false'); to req.open('POST','getmessage.php',false);

Also you need to change req.send(username, message); to

req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send("username=" + username +"&message="+message);

---

reg.send does not refresh your page, it post your data to the url and returned data is in req.responseText or req.responseXML depending on your data type. If you want to see your response do this

function popup(username) {
var message = prompt("Message:","");
if(message != ""){
    var req = new XMLHttpRequest();
    req.open('POST','getmessage.php','false');
    req.send("username=" + username +"&message="+message);
    alert(req.responseText);
} else {
    alert("Please enter a message");
}
}

---

As Jules showed in his example code, you need to output req.responseText from Javascript for it to do anything; the HTTP response doesn't draw anything to the window, it just puts the output in Javascript variables for you to manipulate and/or display however you want. You can pop it up as an alert for a simple test.

If you want to try writing the response into the document directly, the easy/lazy way is just to put a placeholder div in the original page's markup. After you do req.send(stuff_to_send);, you would just do something like document.getElementById('myDiv').innerHTML = req.responseText;.

It shouldn't make a difference in this particular case, but FYI: in general, it's dangerous to use == and != to test for empty strings. In Javascript, uninitialized, undefined, null, NaN (reserved word for 'not a number') and '' (empty string) are distinct values, and if you're not really careful then it's easy to forget about cases that can lead to undefined or null vars because most of them intuitively feel like they should be returning empty strings or 0s. This can get even more problematic because of Javascript's very loose typecasting. If you're not careful, you can end up typecasting a term like 0 or false into a string, and both of those would then evaluate as true. Undefined, NaN, empty strings and null all evaluate as false when treated as Booleans, but they're all treated as distinct when using an equivalence operator (== and !=).

If you want to make sure that a String has a non-empty value and also isn't undefined, null, etc., you would want to test the variable as a boolean first, then compare it to emptystring:

if(myString && myString != "")

Another handy workaround to another case of Javascript being just plain silly: if you try to refer to a variable name that you never declared, it will case a fatal error and stop Javascript execution completely. If, on the other hand, you try to refer to a never declared property of an object that was declared, it will return undefined but it will not throw an error and halt script execution. Since you can access any global variable varName by referring to window.varName (in other words: as a property of the window object), simply tacking window. in front of any reference to a variable that might not exist will make that reference safe.