AJAX-PHP


PHP - AJAX vs PHP


AJAX est utilisé pour créer des applications plus interactives.


Exemple PHP AJAX

L'exemple suivant montrera comment la page Web communique avec le serveur Web lorsque l'utilisateur saisit des caractères dans la zone de saisie :

Exemple

Essayez de saisir un nom dans la zone de saisie, tel que : Anna :

Nom :

Valeur de retour :


Explication des exemples - page HTML

Lorsque l'utilisateur saisit des caractères dans la zone de saisie ci-dessus, "showHint( )" sera exécuté " fonction. Cette fonction est déclenchée par l'événement "onkeyup" :

<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>

Explication du code source :

Si la zone de saisie est vide (str.length==0), cette fonction effacera l'espace réservé txtHint contenu et quittez la fonction.

Si la zone de saisie n'est pas vide, alors showHint() effectuera les étapes suivantes :

  • Créer un objet XMLHttpRequest
  • Créer une fonction à exécuter lorsque la réponse du serveur est prête
  • Envoyer une requête au fichier sur le serveur
  • Veuillez noter le paramètre (q) ajouté à la fin de l'URL (contient le contenu de la zone de saisie)

Fichier PHP

La page du serveur appelée ci-dessus via JavaScript est un fichier PHP nommé "gethint.php".

Le code source dans "gethint.php" vérifie le tableau de noms et renvoie le nom correspondant au navigateur :

<?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;
?>

Explication : Si JavaScript envoie du texte (c'est-à-dire strlen($q : 🎜 >

Si un ou plusieurs noms correspondants sont trouvés, définissez la chaîne de réponse avec tous les noms
  1. Envoyez la réponse à l'espace réservé "txtHint"
  2. Solution du problème PHP Ajax Cross Domain
  3. Si votre requête asynchrone doit traverser le domaine, vous pouvez consulter : Solution aux problèmes inter-domaines PHP Ajax.