How to use AJAX to perform a MYSQLI query (prepared statement)

Question

So I have this (prepared statement) mysqli query in PHP (partial code):

#New DB connection
@ $mysqli = new mysqli ('localhost', 'user', 'password', 'database');

#Check DB connection, print error upon failure
if (mysqli_connect_errno()) {
    printf("<p>Connect failed.</p> <p>Error: \"%s\"</p>\n", mysqli_connect_error());
    exit();
} #if

#Check if userName already exists
$query = "SELECT * FROM users WHERE userName = ?";
$stmt = $mysqli->prepare($query);
$stmt->bind_param("s", $registerUserName);
$stmt->execute();
$stmt->store_result();
$num_results = $stmt->num_rows;
if ($num_results) {
    echo "<p>This user already exists. Please click your back button.</p>";
    exit;
}; #if

And I would like to execute this through Javascript/AJAX on an onblur event:

function checkForUser(str) {
  var xmlhttp;    
  if (str=="") {
    return;
  }
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open(???,true); // not sure what goes here or if I should even use this method
  xmlhttp.send();
}

So is this possible? and how? I found some tutorials but they involve using jquery. Can I do it without jquery?

Answer 1

I've changed a little bit your code. Hope it will helpfull:

#New DB connection
@ $mysqli = new mysqli ('localhost', '…', '…', '…');

#Check DB connection, print error upon failure
if (mysqli_connect_errno()) {
    printf("<p>Connect failed.</p> <p>Error: \"%s\"</p>\n", mysqli_connect_error());
    exit();
} #if

#Check if userName already exists
$query = "SELECT * FROM wp_users WHERE user_login = ?";
$stmt = $mysqli->prepare($query);
$stmt->bind_param("s", $_GET[registerUserName]); 
$stmt->execute();
$stmt->store_result();
$num_results = $stmt->num_rows;
if ($num_results) {
    echo "<p>This user already exists. Please click your back button.</p>";
    exit;
}; #if

Now we can call it with URL like "/ttt.php?registerUserName=user1" And function:

function checkForUser(uname)
{
var req;
req = null;
if (window.XMLHttpRequest) {
    try {
        req = new XMLHttpRequest();
    } catch (e){}
} else if (window.ActiveXObject) {
    try {
        req = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e){
        try {
            req = new ActiveXObject('Microsoft.XMLHTTP');
        } catch (e){}
    }
}

if (req) {       
    req.open("GET", "/ttt.php?registerUserName="+encodeURIComponent(uname), false);
    //req.onreadystatechange = processReqChange;
    req.send(null);
    if(req.status == 200) {
      return req.responseText;
    }

}
return false;
}

in the

req.open("GET", "/ttt.php?registerUserName="+encodeURIComponent(uname), false);

false means async request and req.send will wait for response from php script.