PHP development basic tutorial AJAX and PHP
AJAX and PHP examples
Summary in one sentence: AJAX is used to create more interactive applications
The following example will demonstrate how the web page communicates with the Web server when the user types characters in the input box:
The page effect is shown in the picture on the right
Explanation of examples - 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:
Note: the onkeyup event will occur when the keyboard key is released
The specific code is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str){
//如果輸入框是空的（str.length==0），該函數(shù)會(huì)清空 txtHint 占位符的內(nèi)容，并退出該函數(shù)。
if(str.length==0){
document.getElementById("txtHint").innerHTML="";
return;
}
//如果輸入框不是空的，那么 showHint() 會(huì)執(zhí)行以下代碼：
//創(chuàng)建XMLHttpRequest對(duì)象
if(window.XMLHttpRequest){
//IE7,Firefox,Chrome,Opera,Safari 瀏覽器執(zhí)行的代碼
xmlhttp=new XMLHttpRequest();
}else{
//IE6,IE5瀏覽器執(zhí)行的代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//在服務(wù)器響應(yīng)的時(shí)候執(zhí)行的函數(shù)
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
//向服務(wù)器上的文件發(fā)送請(qǐng)求
xmlhttp.open("GET","2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>在輸入框中輸入一個(gè)姓名</b></p>
<form>
<!-- onkeyup 事件會(huì)在鍵盤(pán)按鍵被松開(kāi)時(shí)發(fā)生，鍵盤(pán)松開(kāi)時(shí)，調(diào)用showHint()函數(shù)-->
姓名：<input type="text" onkeyup="showHint(this.value)">
<p>返回值：<span id="txtHint"></span></p>
</form>
</body>
</html>Source code explanation :
If the input box is empty (str.length==0), this function will clear the content of the txtHint placeholder 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 pay attention to the parameter (q) added to the end of the URL (contains the content of the input box)
Explanation of examples - PHP file
The server page called above through JavaScript is a PHP file named "2.php".
The source code in "2.php" will check the name array and then return the corresponding name to the browser. The code is as follows:
<?php
// 將姓名填充到數(shù)組中
$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";
$a[]="小明";
//從請(qǐng)求URL地址中獲取 q 參數(shù)
$q=$_GET["q"];
//查找是否由匹配值， 如果 q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
//將$a數(shù)組和$q全部轉(zhuǎn)換為小寫(xiě)，然后逐個(gè)取出$a,截取與$q相同長(zhǎng)度，比較是否相同，相同放入$hint中
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// 如果沒(méi)有匹配值設(shè)置輸出為 "no suggestion"
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//輸出返回值
echo $response;
?>Explanation:
If JavaScript sends any text (i.e. strlen($q) > 0), what happens is:
Find names matching the characters sent by JavaScript
If no match is found, Then set the response string to "no suggestion"
If one or more matching names are found, set the response string with all names
Send the response to the "txtHint" placeholder
#Learning experience
- Form basics
- Onkeyup event: when the keyboard key is released Occurrence
- Function call, function value passing
- Creation of AJAX XMLHttpRequest object, function executed when the server responds, transfer to the server File sending request: See 1-5 for learning experience
- HTML DOM getElementById() method: Returns a reference to the first object with the specified ID
- Array assignment method
- Get method form submission
- strlen()
- count()
- Strtolower()
