XML AJAX

AJAX peut être utilisé pour communiquer de manière interactive avec des fichiers XML.

Exemple XML AJAX

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

Exemple

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

   <html>
        <head>
        <script>
        function showCD(str)
        {
            if (str=="")
            {
                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","getcd.php?q="+str,true);
            xmlhttp.send();
        }
        </script>
        </head>
        <body>
        <form>
        Select a CD:
        <select name="cds" onchange="showCD(this.value)">
        <option value="">Select a CD:</option>
        <option value="Bob Dylan">Bob Dylan</option>
        <option value="Bonnie Tyler">Bonnie Tyler</option>
        <option value="Dolly Parton">Dolly Parton</option>
        </select>
        </form>
        <div id="txtHint"><b>CD info will be listed here...</b></div>
        </body>
     </html>

la fonction showCD() effectuera les étapes suivantes : 1) Vérifier si un CD est sélectionné

2) Créer un objet XMLHttpRequest 3) Créer une fonction qui s'exécute lorsque la réponse du serveur est prête

4) Envoyer une requête à un fichier sur le serveur 5) Notez le paramètres ajoutés à la fin de l'URL (q ) (Contient le contenu de la liste déroulante)

Remarque :

De nombreuses connaissances JavaScript sont utilisées dans l'exemple ci-dessus. Veuillez vous référer. Commencez par ce chapitre : Tutoriel JavaScript

Fichier PHP

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

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

<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
// 处理元素节点
if ($x->item($i)->nodeType==1)
{
if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
{
$y=($x->item($i)->parentNode);
}
}
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{ 
// 处理元素节点
if ($cd->item($i)->nodeType==1)
{
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br>");
}
}
?>

Lorsque la requête CD est envoyé depuis JavaScript vers la page PHP Quand cela se produira :

1. PHP crée un objet XML DOM

2. Recherchez tous les noms dans l'élément <artist> données transmises par JavaScript

3. Afficher les informations de l'album et renvoyer l'espace réservé "txtHint"

Résumé : renvoyer le format XML

Avantages :

XML est un format de données universel.

Au lieu de forcer les données dans un format défini, personnalisez les balises appropriées pour les données.

Utilisez DOM pour contrôler entièrement le document.

Inconvénients :

Si le document provient du serveur, vous devez vous assurer que le document contient des informations d'en-tête correctes. Si le type de document est incorrect, la valeur de ResponseXML sera vide.

Lorsque le navigateur reçoit un long fichier XML, l'analyse du DOM peut être compliquée.

Formation continue

nouveau fichier

<?php //需要与前面的HTML文件联合使用 $q=$_GET["q"]; $xmlDoc = new DOMDocument(); $xmlDoc->load("cd_catalog.xml"); $x=$xmlDoc->getElementsByTagName('ARTIST'); for ($i=0; $i<=$x->length-1; $i++) { // 处理元素节点 if ($x->item($i)->nodeType==1) { if ($x->item($i)->childNodes->item(0)->nodeValue == $q) { $y=($x->item($i)->parentNode); } } } $cd=($y->childNodes); for ($i=0;$i<$cd->length;$i++) { // 处理元素节点 if ($cd->item($i)->nodeType==1) { echo("<b>" . $cd->item($i)->nodeName . ":</b> "); echo($cd->item($i)->childNodes->item(0)->nodeValue); echo("<br>"); } } ?>

soumettre Réinitialiser le code

Opération automatique

XML AJAX

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