responseText不返回成功消息

Question

I am trying to insert data into database using Ajax and PHP. Now what's the problem is that the responseText doesn't return any message but the insertion done sucessfully Here is my script

    <script type="text/javascript">
    function aa() 
    {
        var x=new XMLHttpRequest();
        x.open("GET","ajax.php?na="+document.getElementById("t1").value+" &ag="+document.getElementById("t2").value+"&des="+document.getElementById("t3").value+"&em="+document.getElementById("t4").value+" ",true);
        x.send(null);
        document.getElementById("d1").innerHTML=x.responseText;
    }
</script>

This is my ajax.php

<?php 

$mysql_host = 'localhost'; 
$mysql_database = 'proj1'; 
$mysql_user = 'root'; 
$mysql_password='';
$mysqli = mysqli_connect($mysql_host, $mysql_user, $mysql_password, $mysql_database);
if (mysqli_connect_errno($mysqli))
{
    echo 'Failed to connect to MySQL: ' . mysqli_connect_error();
}
$name = $_GET['na'];
$ag = $_GET['ag'];
$des = $_GET['des'];
$em = $_GET['em'];
$sql=mysqli_query($mysqli,"insert into ajax_sample (id,name,age,desig,email) values ( '', '$name', '$ag' ,'$des', '$em'  )");
if($sql)
{
    echo "Successfully Inserted....";
}
?>

and this is my html page

     <form name="f1" method="post">
    <input type="text" id="t1" placeholder="enter name"><br><br>
    <input type="text" id="t2" placeholder="enter age"><br><br>
    <input type="text" id="t3" placeholder="enter designation"><br><br>
    <input type="text" id="t4" placeholder="enter email"><br><br>
    <input type="button" id="b1" value="submit" onclick="aa();">
    <div id="d1"></p></div>
</form>

Answer 1

You need to hook into async change callback with onreadystatechange to handle the case when the XHR request is done. Then .responseText will be set on it.

function aa() 
{
    var x=new XMLHttpRequest();
    x.open("GET","ajax.php?na="+document.getElementById("t1").value+" &ag="+document.getElementById("t2").value+"&des="+document.getElementById("t3").value+"&em="+document.getElementById("t4").value+" ",true);
    x.onreadystatechange = function() {
      if (x.readyState == 4 && x.statusCode == 200) {
        document.getElementById("d1").innerHTML=x.responseText;
      }
    };
    x.send(null);
}

It is important to understand that an XMLHttpRequest is asynchronous. That basically means you request a URL to be access via JavaScript and the browser/JS engine goes off and does that. You can hook into when the request is finished by using onreadystatechange. The MDN page linked below has a table with the potential values for readyState.

MDN: XMLHttpRequest and tutorial Using XMLHttpRequest