AJAX using PHP
As promised in my previous post, a little more on AJAX, using PHP to do the action. What I’ ll explain in this post: I’ ll type something in a text- field, and AJAX will search for possible answers in my database while I’ m typing. Compare it with the search- function in Facebook.
How do you start?
Create a basic HTML- page, with an inputfield and a div- container where your hints will be displayed. It should look like this:
Zoekwaarde: <input type="text" onkeyup="doWork();" name="inputText" id="inputText" />
</form>
Hints: <div id="searchHints"></div>
Now we’ ll write our Javascript code. Javascript you say? Yes Javascript: AJAX, Asynchronious Javascript + XML. The function doWork() is going to get the text you type in the searchfield. Once you get the text, you have to “talk” to a php- page, which will send back its result. Next you’ ll need to catch the result and put it in the searchHints- div.
First doWork():
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
alert("Your browser does not support AJAX.");
return null;
}
}
function doWork(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "searchHints.php?inputText=" + document.getElementById(‘inputText’).value, true);
httpObject.send(null);
httpObject.onreadystatechange = setOutput;
}
}
as you can see, the php- file which is going to do my work is called searchHints.php and will echo the answers. SearchHints.php knows what to search for by giving it a querystring with the info needed. In this case the inputText of the searchfield. This is how searchHints.php looks like:
$dvdMod = new DVDModel;
if (isset($_GET[‘inputText’])) {
$searchHints = $dvdMod->returnSearchHints($_GET[‘inputText’]);
foreach($searchHints as $searchHint) {
echo "<div class=’searchHint_item’>";
echo "<a href=’film.php?url=$searchHint->IMDB_Link‘>";
echo "<b>" . $_GET[‘inputText’] . "</b>";
echo substr($searchHint->name, strlen($_GET[‘inputText’]), strlen($searchHint->name));
echo "</a>";
echo "</div>";
}
}
OK, so this php- file echo’ s the results. We’ ll need to catch this when everything is ready to be published. Well, we declared it in our previous function doWork():
So setOutput will be called when searchHints.php returned its results. setOutput has to display the info on our page:
if(httpObject.readyState == 4){
document.getElementById(’searchHints’).innerHTML = httpObject.responseText;
}
}
Now use CSS to adjust the display. If you followed the steps correctly, it should work like the Facebook- search you probably use every day.