JavaScript only AJAX Search Function

[BenRacicot]

Hello! Thanks for taking the time to read about my issue. I'm basically brand new to JS but I have been working on this script all week and can't get it...

Please help me understand why my text input does not POST its value to var sr -> send() -> PHP file. The PHP file has been tested and gathers/echoes JSON data perfectly from any search input with a post action. I cannot get this JS function to send my searchquery data to my parser.php. I'm sure its a basic issue.

function ajax_call(){
    var results = document.getElementById("results");
    var sr = document.getElementById("searchquery").value;
    var params = "searchquery="+sr;

    var hr = new XMLHttpRequest();
    hr.open("POST", "parser.php", true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    hr.onreadystatechange = function() {
	    if(hr.readyState == 4 && hr.results == 200) {
		    var return_data = hr.responseText;
			document.getElementById("results").innerHTML = return_data;
	    }
    }
    // Send the data to PHP now... and wait for response to update the results div
    hr.send(params); 
    document.getElementById("results").innerHTML = "processing...";
}

The HTML:

<form>
	<input name="searchquery" type="text" id="searchquery" size="40" maxlength="" placeholder="<?php if (isset($_POST['searchquery'])){echo $_POST['searchquery'];} ?>" size=50 speech x-webkit-speech>
	<input name="button" type="submit" id="searchbut" onClick="javascript:ajax_call();">
</form>

The PHP

$searchquery = $_POST['searchquery'];

mainquery($searchquery);

function mainquery($query){

	$PDO = new PDO("mysql:host=localhost;dbname=searchdb", "root", "");

	$sql = 'SELECT *
			FROM results
			WHERE title LIKE :searchquery
			ORDER BY date DESC';

	$datas = $PDO->prepare($sql);
	$datas->execute(array(':searchquery' => $query . '%'));

	$resultset = $datas->fetchALL(PDO::FETCH_OBJ);
	$results = json_encode($resultset);
// return $results;
echo $results;
}

[jscheuer1]

I think you might need more headers, maybe not. But hr.results is undefined:

    hr.onreadystatechange = function() {
	    if(hr.readyState == 4 && hr.results == 200) {
		    var return_data = hr.responseText;
			document.getElementById("results").innerHTML = return_data;
	    }
    }

What you want there would be:

hr.status

There could also be other problems.

Generally, for such a complex AJAX operation it's best to use a javascript library like jQuery which takes care of both of those issues for you (ensuring the correct headers, and getting the syntax right when testing for a successful request), and many more.

But if you want to do it "old school", that's certainly possible. See:

http://www.openjs.com/articles/ajax_...using_post.php