XMLHttpRequest no answer from server

Question

I have tried to get i connection to an php file but i don't recive any reponse from server is anything wrong?,

function request(){
    // Create our XMLHttpRequest object
var hr = new XMLHttpRequest();

// Create some variables we need to send to our PHP file
var url = "http://people.dsv.su.se/~pierre/courses/05_ass/ip3/3/3.7.1/example.php";
var number1 = document.getElementById("number1").value;
var number2 = document.getElementById("number2").value;
var vars = "?number1="+number1+"&number2="+number2
hr.open("POST", url, true);

// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object

hr.onreadystatechange = function() {
   if(hr.readyState == 4 && hr.status == 200) {
   var return_data = hr.responseText;

document.getElementById("result").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("result").innerHTML = "processing...";
 }

I don't get any answer from the server were have i done wrong?

I have now tried to write it in jquery insteed but still no response from server

$(document).ready(function() {

// Skicka nummrerna vid klick på #calculate
$('#calculate').click(function() {

var url = "http://people.dsv.su.se/~pierre/courses/05_ass/ip3/3/3.7.1/example.php?";
var number1 = document.getElementById("number1").value;
var number2 = document.getElementById("number2").value;
var numbers = url + number1 + "&" + number2
if (window.XMLHttpRequest)
{// Kod för nya webbläsare
    xmlhttp=new XMLHttpRequest();
}
else {//om det inte är en nyare webbläsare
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        // Skriv ut svaret från servern i result
        document.getElementById("result").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET",numbers,true);
xmlhttp.send();
alert(numbers);
});
});

Answer 1

You're formatting your variables as if you're using them in a GET request, but then setting your request up for a POST.

[edit: to demonstrate comments]

Try changing these two lines.

hr.open("GET", url + vars, true);

hr.send();

[edit] Full original code with the changes

function request(){
        // Create our XMLHttpRequest object
    var hr = new XMLHttpRequest();

    // Create some variables we need to send to our PHP file
    var url = "http://people.dsv.su.se/~pierre/courses/05_ass/ip3/3/3.7.1/example.php";
    var number1 =22;// document.getElementById("number1").value;
    var number2 =22;// document.getElementById("number2").value;
    var vars = "?number1="+number1+"&number2="+number2
    hr.open("GET", url + vars, true);

    // Set content type header information for sending url encoded variables in the request
    //hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Access the onreadystatechange event for the XMLHttpRequest object

    hr.onreadystatechange = function() {
           if(hr.readyState == 4 && hr.status == 200) {
               var return_data = hr.responseText;

                document.getElementById("result").innerHTML = return_data;
            }
    }
    // Send the data to PHP now... and wait for response to update the status div
    hr.send(); // Actually execute the request
    document.getElementById("result").innerHTML = "processing...";
 }

Answer 2

Here is the complete code in jQuery format:

$(document).ready(function () {
    $('#calculate').click(function () {
        var url = "http://people.dsv.su.se/~pierre/courses/05_ass/ip3/3/3.7.1/example.php?number1=" + $("#number1").val() + "&number2=" + $("#number2").val();
        $.ajax(url, {
            complete: function (data, textStatus, jqXHR) {
                //Put the code that handle the response here
                $("#result").html(data.responseText);
            }
        });
    });
});

Answer 3

You need to send() your request with the data as the param. Something like:

params = "number1="+number1+"&number2="+number2;
hr.send(params);