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, the "showHint()" function will be executed. 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 contents of the txtHint placeholder and exit the function.
If the input box is not empty, then showHint() will perform the following steps:
1) Create an XMLHttpRequest object
2) Create a function that is executed when the server response is ready
3) Send a request to the file on the server
4) Please pay attention to the parameter (q) added to the end of the URL (contains the content of the input box)
Note: A lot of knowledge about JavaScript is used in the above examples. To learn this chapter, please refer to: JavaScript Tutorial
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), what will happen is:
1. Find names matching the characters sent by JavaScript
2. If no match is found, a string will be responded Set to "no suggestion"
3. If one or more matching names are found, set the response string with all names
4. Send the response to the "txtHint" placeholder
Summary: Return Html format
HTML consists of some ordinary text. If the server sends HTML via XMLHttpRequest, the text will be stored in the responseText property.
It is not necessary to read data from the responseText property. It is already in the desired format and can be inserted directly into the page.
The easiest way to insert HTML code is to update the innerHTML property of this element.
Advantages:
The HTML code sent from the server side does not need to be parsed with JavaScript on the browser side.
HTML is readable.
HTML code block is paired with the innerHTML attribute for high efficiency.
Disadvantages:
If you need to update multiple parts of a document through AJAX, HTML is not suitable
innerHTML is not a DOM standard.
PHP Ajax cross-domain problem solution
If your asynchronous request needs to cross domain, you can check out: PHP Ajax cross-domain problem solution.
Next Section