PHP - AJAX contre PHP

Il n'y a pas de serveur AJAX.

AJAX est une technologie qui s'exécute dans le navigateur. Il utilise un transfert de données asynchrone entre le navigateur et le serveur Web, permettant à la page Web de demander une petite quantité d'informations au serveur au lieu de la page entière.

AJAX est une technologie de navigateur Web indépendante du logiciel de serveur Web.

Exemple PHP AJAX

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

Instance

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

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>PHP中文网(php.cn)</title>
     <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","ajax_php.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 :

· Créer un objet XMLHttpRequest

· Créer une fonction à exécuter lorsque le la réponse du serveur est prête

· Envoyer une requête au fichier sur le serveur

· Veuillez faire attention au paramètre (q) ajouté à la fin de l'URL (y compris le contenu de l'entrée box)

Le paragraphe ci-dessus passe La page serveur appelée par JavaScript est un fichier PHP nommé "ajax_php.php". Le code source dans

"ajax_php.php" vérifie le tableau de noms et renvoie le nom correspondant au navigateur :

fichier ajax_php.php

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

Exécutez le programme et essayez-le

Explication : Si JavaScript envoie du texte (c'est-à-dire strlen($q) > 0), cela se produira :

1 . Trouvez les noms qui correspondent aux caractères envoyés par JavaScript

2 Si aucune correspondance n'est trouvée, définissez la chaîne de réponse sur "aucune suggestion"

3. puis définissez la chaîne de réponse avec tous les noms

4. Envoyer la réponse à l'espace réservé "txtHint"

Solution du problème inter-domaines PHP Ajax

Si votre requête asynchrone doit traverser le domaine, vous pouvez consulter : Solution aux problèmes inter-domaines PHP Ajax.

Formation continue

nouveau fichier

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PHP中文网(php.cn)</title> <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","ajax_php.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>

soumettre Réinitialiser le code

Opération automatique

PHP - AJAX contre PHP

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]