Tutoriel de base de développement PHP AJAX et XML

Exemples AJAX et XML :

AJAX peut communiquer de manière interactive avec des fichiers XML

Ce qui suit Cet exemple montrera comment une page Web lit les informations d'un fichier XML via AJAX :

Cet exemple se compose de trois parties

Page de formulaire HTML
Page PHP
Fichier XML

Formulaire HTML Page

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

Voir 1.php pour le code source

     
   选择一个CD：  
 
 选择下拉列表，显示详细信息

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

Fonction ShowCD() pour effectuer les étapes suivantes :

Vérifiez si un CD est sélectionné
Créer L'objet XMLHttpRequest
crée une fonction qui est exécutée lorsque la réponse du serveur est prête
Envoie une requête à un fichier sur le serveur
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 :

Voir 2.php pour le code source

load("3.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("" . $cd->item($i)->nodeName . ": "); echo($cd->item($i)->childNodes->item(0)->nodeValue); echo("
"); } } ?>

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

PHP crée l'objet XML DOM du "8_3 .xml"
Parcourez tous les éléments "artiste" (types de nœuds = 1) et trouvez le nom qui correspond aux données transmises par JavaScript
Trouvez le bon artiste
< inclus dans le CD >
Sortez les informations de l'album et envoyez-les à l'espace réservé "txtHint"

Fichier XML

Voir 3.xml pour le code source

   Empire Burlesque Bob Dylan USA Columbia 10.90 1985   Hide your heart Bonnie Tyler UK CBS Records 9.90 1988   Greatest Hits Dolly Parton USA RCA 9.90 1982   Still got the blues Gary Moore UK Virgin records 10.20 1990   Eros Eros Ramazzotti EU BMG 9.90 1997   One night only Bee Gees UK Polydor 10.90 1998   Sylvias Mother Dr.Hook UK CBS 8.10 1973   Maggie May Rod Stewart UK Pickwick 8.50 1990   Romanza Andrea Bocelli EU Polydor 10.80 1996   When a man loves a woman Percy Sledge USA Atlantic 8.70 1987   Black angel Savage Rose EU Mega 10.90 1995   1999 Grammy Nominees Many USA Grammy 10.20 1999   For the good times Kenny Rogers UK Mucik Master 8.70 1995   Big Willie style Will Smith USA Columbia 9.90 1997   Tupelo Honey Van Morrison UK Polydor 8.20 1971   Soulsville Jorn Hoel Norway WEA 7.90 1996   The very best of Cat Stevens UK Island 8.90 1990   Stop Sam Brown UK A and M 8.90 1988   Bridge of Spies T'Pau UK Siren 7.90 1987   Private Dancer Tina Turner UK Capitol 8.90 1983   Midt om natten Kim Larsen EU Medley 7.80 1983   Pavarotti Gala Concert Luciano Pavarotti UK DECCA 9.90 1991   The dock of the bay Otis Redding USA Atlantic 7.90 1987   Picture book Simply Red EU Elektra 7.20 1985   Red The Communards UK London 7.80 1987   Unchain my heart Joe Cocker USA EMI 8.20 1987

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

Expérience d'apprentissage

Cet exemple comprend principalement les points de connaissance suivants :

Bases du formulaire : options déroulantes
événement onchange : contenu dans le champ Des changements surviennent
appels de fonctions, transferts de valeurs de fonctions
Création de Objets AJAX XMLHttpRequest, fonctions exécutées lorsque le serveur répond et transfert au serveur Demande d'envoi de fichier sur : voir 1-5 pour l'expérience d'apprentissage
Méthode HTML DOM getElementById() : renvoie une référence au premier objet avec l'ID spécifié

Connaissances liées au XML

Créer un objet XML DOM
Charger le fichier XML dans un nouvel objet XML DOM
Récupère l'objet d'un nom de balise spécifique : getElementsByTagName()
Récupère la collection de sections enfants d'un élément spécifique : HTML DOM childNodes
Obtenez la valeur du nœud du premier élément du bouton : HTML DOM nodeValue
Obtenez le type de nœud de l'élément body : HTML DOM nodeType

Formation continue