Latest web development tutorials

PHP - AJAX and PHP

AJAX is used to create more interactive applications.


AJAX PHP Examples

The following examples will demonstrate when the user types in a character input box, how Web pages communicate with the Web server:

Examples

尝试在输入框中输入一个名字,如:Anna:

姓名:

返回值:




Examples explain - HTML page

When a user in the above input box character performs "showHint ()" function. This function consists of "onkeyup" Trigger Event:

<html>
<head>
<script>
function showHint(str)
{
	if (str.length==0)
	{ 
		document.getElementById("txtHint").innerHTML="";
		return;
	}
	if (window.XMLHttpRequest)
	{
		// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{	
		//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("GET","gethint.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>

<p><b>在输入框中输入一个姓名:</b></p>
<form> 
姓名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>返回值: <span id="txtHint"></span></p>

</body>
</html>

Source explained:

If the input box is empty (str.length == 0), this function will clear txtHint content placeholder, and exit the function.

If the input box is not empty, then showHint () performs the following steps:

  • Create XMLHttpRequest object
  • Create function when the server is ready to perform the response
  • File on the server to send requests
  • Please note that adding to (contains input box) the end of the URL parameter (q)

PHP File

The above servers through JavaScript calling this page is called "gethint.php" PHP file.

"Gethint.php" source code checks array of names, and then returned to the browser corresponding name:

<?php
// 将姓名填充到数组中
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//从请求URL地址中获取 q 参数
$q=$_GET["q"];

//查找是否由匹配值, 如果 q>0
if (strlen($q) > 0)
{
	$hint="";
	for($i=0; $i<count($a); $i++)
	{
		if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
		{
			if ($hint=="")
			{
				$hint=$a[$i];
			}
			else
			{
				$hint=$hint." , ".$a[$i];
			}
		}
	}
}

// 如果没有匹配值设置输出为 "no suggestion" 
if ($hint == "")
{
	$response="no suggestion";
}
else
{
	$response=$hint;
}

//输出返回值
echo $response;
?>

Explanation: If the JavaScript send any text (ie, strlen ($ q)> 0), occurs:

  1. Find matching characters to send the names of JavaScript
  2. If no match is found, the response string is set to "no suggestion"
  3. If you find one or more matching names, the names of all settings with the response string
  4. Sending a response to the "txtHint" placeholder

PHP Ajax cross domain solutions to problems

If you need a cross-domain asynchronous request can be viewed: PHP Ajax cross domain solutions to problems.