AJAX PHP


PHP - AJAX with PHP

AJAX is used to create more interactive applications.

AJAX PHP Example

The following example will demonstrate how the web page communicates with the Web server when the user types characters in the input box:

Example

Try to enter a name in the input box, such as: Anna:

Name:

Return value:

Example explanation - HTML page

When the user types characters in the input box above, "showHint()" will be executed " function. This function is triggered by the "onkeyup" 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 code explanation:

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

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

  • Create an XMLHttpRequest object
  • Create a function that is executed when the server response is ready
  • Send a request to the file on the server
  • Please note the parameter (q) added to the end of the URL (contains the content of the input box)

PHP file

The server page called above through JavaScript is a PHP file named "gethint.php".

The source code in "gethint.php" checks the name array and returns the corresponding name to the browser: 

<?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 JavaScript sends any text (i.e. strlen($q ) > 0), then:

  1. Find names matching the characters sent by JavaScript
  2. If no match is found, set the response string to "no suggestion"
  3. If one or more matching names are found, set the response string with all names
  4. Send response to "txtHint" placeholder

PHP Ajax cross Domain problem solution

If your asynchronous request needs to cross domain, you can check out: PHP Ajax cross-domain problem solution.