PHP development basic tutorial AJAX and XML

AJAX and XML examples:

AJAX can communicate interactively with XML files

The following example will demonstrate how a web page reads information from an XML file through AJAX:

This example consists of three parts

• HTML form page

• PHP page

• XML file

---

##HTML form Page

When the user selects a CD in the drop-down list above, a function named "showCD()" will be executed. This function is triggered by the "onchange" event:

See 1.php

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

for the source code after the user selects the drop-down list. Call the showCD() function

ShowCD() function to perform the following steps:

• Check whether a CD is selected

• Create XMLHttpRequest object

• Creates a function that is executed when the server response is ready

• Sends a request to a file on the server

• Please note the parameter (q) added to the end of the URL (containing the contents of the drop-down list)

---

PHP file

The server page called above through JavaScript is a PHP file named "2.php".

The PHP script loads the XML document, "3.xml", runs the query against the XML file, and returns the results in HTML:

See 2.php for the source code

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("
"); } } ?>

When the CD query is sent from JavaScript to the PHP page, what happens:

• PHP creates the XML DOM object of the "8_3.xml" file

• Loop through all "artist" elements (nodetypes = 1) and look for names that match the data passed by JavaScript

• Find the correct artist included in the CD

• Output the album information and send it to "txtHint" placeholder

---

##XML fileSee 3.xml for source code

    Bob Dylan USA Columbia 10.90 1985    Bonnie Tyler UK CBS Records 9.90 1988    Dolly Parton USA RCA 9.90 1982    Gary Moore UK Virgin records 10.20 1990    Eros Ramazzotti EU BMG 9.90 1997    Bee Gees UK Polydor 10.90 1998    Dr.Hook UK CBS 8.10 1973    Rod Stewart UK Pickwick 8.50 1990    Andrea Bocelli EU Polydor 10.80 1996    Percy Sledge USA Atlantic 8.70 1987    Savage Rose EU Mega 10.90 1995    Many USA Grammy 10.20 1999    Kenny Rogers UK Mucik Master 8.70 1995    Will Smith USA Columbia 9.90 1997    Van Morrison UK Polydor 8.20 1971    Jorn Hoel Norway WEA 7.90 1996    Cat Stevens UK Island 8.90 1990    Sam Brown UK A and M 8.90 1988    T'Pau UK Siren 7.90 1987    Tina Turner UK Capitol 8.90 1983    Kim Larsen EU Medley 7.80 1983    Luciano Pavarotti UK DECCA 9.90 1991    Otis Redding USA Atlantic 7.90 1987    Simply Red EU Elektra 7.20 1985    The Communards UK London 7.80 1987    Joe Cocker USA EMI 8.20 1987  

This file contains data about CD collection

---

Learning experienceThis example mainly includes the following knowledge points:

Form basics: drop-down options
onchange event: content in the field Changes occur
Function calls, function value transfer
Creation of AJAX XMLHttpRequest objects, functions executed when the server responds, and transfer to the server File sending request on: See 1-5 for learning experience
HTML DOM getElementById() method: Returns a reference to the first object with the specified ID
XML related knowledge

Create XML DOM object
Load XML file to new XML DOM object

• Get the object of a specific tag name: getElementsByTagName()

• Get the child section collection of a specific element: HTML DOM childNodes

• Get the node value of the first button element: HTML DOM nodeValue

• Get the node type of the body element: HTML DOM nodeType