AJAX et PHP
AJAX est utilisé pour créer des applications plus interactives.
Exemple AJAX PHP
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, la fonction "showHint()" sera exécutée. 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), ceci La fonction effacera le contenu de l'espace réservé txtHint et quittera la fonction.
Si la zone de saisie n'est pas vide, alors showHint() effectuera les étapes suivantes :
1) Créer un objet XMLHttpRequest
2) Créer une fonction à exécuter lorsque la réponse du serveur est prête
3) Envoyer une requête au fichier sur le serveur
4) Veuillez faire attention au paramètre (q) ajouté à la fin de l'URL (contient le contenu de la zone de saisie)
Remarque : De nombreuses connaissances sur JavaScript sont utilisées dans les exemples ci-dessus. Veuillez d'abord vous référer à ce chapitre : Tutoriel JavaScript
<🎜. >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) > 0), puis :
1. Rechercher les noms correspondant aux caractères envoyés par JavaScript 2. Si aucune correspondance n'est trouvée, une chaîne sera répondue. Définir sur " aucune suggestion"3. Si un ou plusieurs noms correspondants sont trouvés, définissez la chaîne de réponse avec tous les noms 4. Envoyez la réponse à l'espace réservé "txtHint"Résumé : Retour au format HTML
Le HTML se compose d'un texte ordinaire. Si le serveur envoie du HTML via XMLHttpRequest, le texte sera stocké dans la propriété ResponseText. Il n'est pas nécessaire de lire les données de la propriété ResponseText. Il est déjà au format souhaité et peut être inséré directement dans la page. Le moyen le plus simple d'insérer du code HTML est de mettre à jour la propriété innerHTML de cet élément.Avantages :
Le code HTML envoyé depuis le serveur n'a pas besoin d'être analysé par JavaScript côté navigateur. Le HTML est lisible. Le bloc de code HTML est associé à l'attribut innerHTML pour une grande efficacité.Inconvénients :
Si vous devez mettre à jour plusieurs parties d'un document via AJAX, HTML ne convient pasinnerHTML n'est pas un standard DOM.Solution aux problèmes inter-domaines PHP Ajax
Si votre requête asynchrone doit traverser le domaine, vous pouvez consulter : Solution aux problèmes inter-domaines PHP Ajax.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
