AJAX et XML

Exemples AJAX et XML :

L'exemple suivant montre comment une page Web lit les informations d'un fichier XML via AJAX :

Cet exemple se compose de trois parties

l page de formulaire HTML

l page PHP

l fichier XML

Page de formulaire HTML

Lorsque l'utilisateur sélectionne un CD dans la liste déroulante ci-dessus, une fonction nommée "showCD()" sera exécutée. Cette fonction est déclenchée par l'événement "onchange":

QQ截图20161009174933.png



après que l'utilisateur a sélectionné la liste déroulante liste. Appelez la fonction showCD()

Fonction ShowCD() pour effectuer les étapes suivantes :

l Vérifier si un CD est sélectionné

l Créer un objet XMLHttpRequest

l Créer une fonction exécutée lorsque la réponse du serveur est prête

l Envoyer une requête vers un fichier sur le serveur

l Veuillez noter le paramètre (q) ajouté à la fin de l'URL ( contenant le contenu de la liste déroulante)

Fichier PHP

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

Le script PHP charge le document XML, "3.xml", exécute la requête sur le fichier XML et renvoie les résultats en HTML :

QQ截图20161009174957.png


Lorsque la requête CD est envoyée depuis JavaScript vers la page PHP, que se passe-t-il :

l PHP crée l'objet XML DOM du "3.xml " fichier

l Parcourez tous les éléments "artiste" (types de nœuds = 1), trouvez les noms qui correspondent aux données transmises par JavaScript

l Trouvez le bon artiste inclus dans le CD

l Sortez les informations de l'album et envoyez-les à l'espace réservé "txtHint"

Fichier XML

QQ截图20161009175012.png



le fichier contient des données sur la collection de CD

Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function showCD(str){ if(str==""){ document.getElementById("txt").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("txt").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","8_2.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> 选择一个CD: <select name="cds" onchange="showCD(this.value)"> <option value="Bob Dylan">Bob Dylan</option> <option value="Bonnie Tyler">Bonnie Tyler</option> <option value="Dolly Parton">Bonnie Tyler</option> </select> </form> </br> <div id="txt"><b>选择下拉列表,显示详细信息</b></div> </body> </html>
soumettreRéinitialiser le code
  • Recommandations de cours
  • Téléchargement du didacticiel