Ajax And PHP--tutorial.jcwcn.com

Ajax is a powerful system, allowing you to do things on your website which are similar to effects users take for granted with their desktop software.

One example of this is suggestions when people are typing things into a web form.

In this tutorial, I will show you how to do AJAX suggestions with PHP…

Start with an html file, and set it to the following:

<html>
<head>
	<script src="clienthint.js">
</head>
<body>
	<form>
		First Name:
		<input type="text" id="txt1"
		onkeyup="showHint(this.value)">
	</form>
	<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

This is just simple HTML code, that…

Includes a Javascript file
Creates a form, and sets the name to txt1
Creates a span, and sets the name to txtHint
Calls a javascript function showHint whenever a key is released.

The next thing to do is setup clienthint.js

The contents of this file are:

var xmlHttp

function showHint(str)
{
	if (str.length==0)
	{
		document.getElementById("txtHint").innerHTML=""
		return
	}
	xmlHttp=getHttpObject()
	if (xmlHttp==null)
	{
		alert ("Browser does not support HTTP Request")
		return
	}
	var url="gethint.php"
	url=url+"?q="+str
	xmlHttp.onreadystatechange=stateChanged
	xmlHttp.open("GET",url,true)
	xmlHttp.send(null)
}

function setField(str)
{
	document.getElementById("txt1").value=str
}

function stateChanged()
{
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	{
		document.getElementById("txtHint").innerHTML=xmlHttp.responseText
	}
}
function getHttpObject()
{
	var xmlHttp=null;
	try
	{
		//Standard compliant browsers
		xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
		//IE
		try
		{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

This file has the following functions:

getHttpObject, which gets an AJAX object from the current browser.
setField, which sets the text in the forms txt1 field.
showHint, which gets called by the javascript on the HTML page when a key is released in the form. It then calls the PHP file gethint.php
stateChanged, which receives the output from the PHP file, and sets the text in the span.

The final thing to do is setup the PHP file. It has the following content:

<?php

//The names to lookup
$names=array('Axel','Bart','Bob','Dan','Dillan','Doris','David','Millhouse');

$q=$_GET["q"];
$hint="";

$queryLength = strlen($q);

//lookup all hints from array if length of q>0
if ($queryLength > 0)
{
	foreach ($names as $name)
	{
		//Work out the name with the same number of characters
		$potentialName = substr($name,0,$queryLength);

		if (strtolower($q)==strtolower($potentialName))
		{
			$h = "<a href='#' onclick=\"setField('$name');return false;\">$name";
			if ($hint=="")
			{
				$hint=$h;
			}
			else
			{
				$hint=$hint." , ".$h;
			}
		}
	}
}

echo $hint;
?>

This file setups an array of string names. It then takes the input (which is the text the person has entered so far into the field), and compares it to the text names. If it finds a match, it outputs the name, inside a link, and sets it up so that when the link is clicked, the javascript function setField is called. (If you remember from before, setField will set the fields content in the form).

Thats it! It may sound a little complicated, but it will make your website seem way more professional, and it’s not that difficult really!

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Ajax And PHP

relation tutorial

Category

New

Hot