PHP Example - AJAX and XML

PHP Example - AJAX and XML

AJAX can be used for interactive communication with an XML file.

AJAX XML Example

The following example will demonstrate how a web page can fetch information from an XML file with AJAX:

Example

CD info will be listed here...

Example Explained - The HTML Page

When a user selects a CD in the dropdown list above, a function called "showCD()" is executed. The function is triggered by the "onchange" event:

<html>

<head>

<script>

function showCD(str) {

  if (str=="") {

    document.getElementById("txtHint").innerHTML="";

    return;

  }

  if (window.XMLHttpRequest) {

    // code for IE7+, Firefox, Chrome, Opera, Safari

    xmlhttp=new XMLHttpRequest();

  } else {  // code for IE6, IE5

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

  xmlhttp.onreadystatechange=function() {

    if (this.readyState==4 && this.status==200) {

      document.getElementById("txtHint").innerHTML=this.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="Bee Gees">Bee Gees</option>

<option value="Cat Stevens">Cat Stevens</option>

</select>

</form>

<div id="txtHint"><b>CD info will be listed here...</b></div>

</body>

</html>

The showCD() function does the following:

Check if a CD is selected

Create an XMLHttpRequest object

Create the function to be executed when the server response is ready

Send the request off to a file on the server

Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

The PHP File

The page on the server called by the JavaScript above is a PHP file called "getcd.php".

The PHP script loads an XML document, "cd_catalog.xml", runs a query against the XML file, and returns the result as 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++) {

  //Process only element nodes

  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++) {

  //Process only element nodes

  if ($cd->item($i)->nodeType==1) {

    echo("<b>" . $cd->item($i)->nodeName . ":</b> ");

    echo($cd->item($i)->childNodes->item(0)->nodeValue);

    echo("<br>");

  }

}

?>

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

PHP creates an XML DOM object

Find all <artist> elements that matches the name sent from the JavaScript

Output the album information (send to the "txtHint" placeholder)

PHP - AJAX and MySQL

PHP - AJAX and MySQL

AJAX can be used for interactive communication with a database.

AJAX Database Example

The following example will demonstrate how a web page can fetch information from a database with AJAX:

Example

Person info will be listed here...

Example Explained - The MySQL Database

The database table we use in the example above looks like this:

id   FirstName     LastName     Age     Hometown      Job

1    Peter  Griffin 41 Quahog   Brewery

2    Lois     Griffin 40 Newport  Piano Teacher

3    Joseph     Swanson 39 Quahog   Police Officer

4    Glenn Quagmire      41 Quahog   Pilot

Example Explained

In the example above, when a user selects a person in the dropdown list above, a function called "showUser()" is executed.

The function is triggered by the onchange event.

Here is the HTML code:

Example

<html>

<head>

<script>

function showUser(str) {

    if (str == "") {

        document.getElementById("txtHint").innerHTML = "";

        return;

    } else {

        if (window.XMLHttpRequest) {

            // code for IE7+, Firefox, Chrome, Opera, Safari

            xmlhttp = new XMLHttpRequest();

        } else {

            // code for IE6, IE5

            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

        xmlhttp.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200) {

                document.getElementById("txtHint").innerHTML = this.responseText;

            }

        };

        xmlhttp.open("GET","getuser.php?q="+str,true);

        xmlhttp.send();

    }

}

</script>

</head>

<body>

<form>

<select name="users" onchange="showUser(this.value)">

  <option value="">Select a person:</option>

  <option value="1">Peter Griffin</option>

  <option value="2">Lois Griffin</option>

  <option value="3">Joseph Swanson</option>

  <option value="4">Glenn Quagmire</option>

  </select>

</form>

<br>

<div id="txtHint"><b>Person info will be listed here...</b></div>

</body>

</html>

Code explanation:

First, check if person is selected. If no person is selected (str == ""), clear the content of txtHint and exit the function. If a person is selected, do the following:

Create an XMLHttpRequest object

Create the function to be executed when the server response is ready

Send the request off to a file on the server

Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

The PHP File

The page on the server called by the JavaScript above is a PHP file called "getuser.php".

The source code in "getuser.php" runs a query against a MySQL database, and returns the result in an HTML table:

<!DOCTYPE html>

<html>

<head>

<style>

table {

    width: 100%;

    border-collapse: collapse;

}

table, td, th {

    border: 1px solid black;

    padding: 5px;

}

th {text-align: left;}

</style>

</head>

<body>

<?php

$q = intval($_GET['q']);

$con = mysqli_connect('localhost','peter','abc123','my_db');

if (!$con) {

    die('Could not connect: ' . mysqli_error($con));

}

mysqli_select_db($con,"ajax_demo");

$sql="SELECT * FROM user WHERE id = '".$q."'";

$result = mysqli_query($con,$sql);

echo "<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

<th>Hometown</th>

<th>Job</th>

</tr>";

while($row = mysqli_fetch_array($result)) {

    echo "<tr>";

    echo "<td>" . $row['FirstName'] . "</td>";

    echo "<td>" . $row['LastName'] . "</td>";

    echo "<td>" . $row['Age'] . "</td>";

    echo "<td>" . $row['Hometown'] . "</td>";

    echo "<td>" . $row['Job'] . "</td>";

    echo "</tr>";

}

echo "</table>";

mysqli_close($con);

?>

</body>

</html>

Explanation: When the query is sent from the JavaScript to the PHP file, the following happens:

PHP opens a connection to a MySQL server

The correct person is found

An HTML table is created, filled with data, and sent back to the "txtHint" placeholder

PHP - AJAX and PHP

PHP - AJAX and PHP

AJAX is used to create more interactive applications.

AJAX PHP Example

The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field:

Example

Start typing a name in the input field below:

First name:

Suggestions:

Example Explained

In the example above, when a user types a character in the input field, a function called "showHint()" is executed.

The function is triggered by the onkeyup event.

Here is the HTML code:

Example

<html>

<head>

<script>

function showHint(str) {

    if (str.length == 0) {

        document.getElementById("txtHint").innerHTML = "";

        return;

    } else {

        var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200) {

                document.getElementById("txtHint").innerHTML = this.responseText;

            }

        };

        xmlhttp.open("GET", "gethint.php?q=" + str, true);

        xmlhttp.send();

    }

}

</script>

</head>

<body>

<p><b>Start typing a name in the input field below:</b></p>

<form>

First name: <input type="text" onkeyup="showHint(this.value)">

</form>

<p>Suggestions: <span id="txtHint"></span></p>

</body>

</html>

Code explanation:

First, check if the input field is empty (str.length == 0). If it is, clear the content of the txtHint placeholder and exit the function.

However, if the input field is not empty, do the following:

Create an XMLHttpRequest object

Create the function to be executed when the server response is ready

Send the request off to a PHP file (gethint.php) on the server

Notice that q parameter is added to the url (gethint.php?q="+str)

And the str variable holds the content of the input field

The PHP File - "gethint.php"

The PHP file checks an array of names, and returns the corresponding name(s) to the browser:

<?php

// Array with names

$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";

// get the q parameter from URL

$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""

if ($q !== "") {

    $q = strtolower($q);

    $len=strlen($q);

    foreach($a as $name) {

        if (stristr($q, substr($name, 0, $len))) {

            if ($hint === "") {

                $hint = $name;

            } else {

                $hint .= ", $name";

            }

        }

    }

}

// Output "no suggestion" if no hint was found or output correct values

echo $hint === "" ? "no suggestion" : $hint;

?>

PHP XML DOM Parser

PHP XML DOM Parser

The built-in DOM parser makes it possible to process XML documents in PHP.

The XML DOM Parser

The DOM parser is a tree-based parser.

Look at the following XML document fraction:

<?xml version="1.0" encoding="UTF-8"?>

<from>Jani</from>

The DOM sees the XML above as a tree structure:

Level 1: XML Document

Level 2: Root element: <from>

Level 3: Text element: "Jani"

Installation

The DOM parser functions are part of the PHP core. There is no installation needed to use these functions.

The XML File

The XML file below ("note.xml") will be used in our example:

<?xml version="1.0" encoding="UTF-8"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

Load and Output XML

We want to initialize the XML parser, load the xml, and output it:

Example

<?php

$xmlDoc = new DOMDocument();

$xmlDoc->load("note.xml");

print $xmlDoc->saveXML();

?>

The output of the code above will be:

Tove Jani Reminder Don't forget me this weekend!

If you select "View source" in the browser window, you will see the following HTML:

<?xml version="1.0" encoding="UTF-8"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

The example above creates a DOMDocument-Object and loads the XML from "note.xml" into it.

Then the saveXML() function puts the internal XML document into a string, so we can output it.

Looping through XML

We want to initialize the XML parser, load the XML, and loop through all elements of the <note> element:

Example

<?php

$xmlDoc = new DOMDocument();

$xmlDoc->load("note.xml");

$x = $xmlDoc->documentElement;

foreach ($x->childNodes AS $item) {

  print $item->nodeName . " = " . $item->nodeValue . "<br>";

}

?>

The output of the code above will be:

#text =

to = Tove

#text =

from = Jani

#text =

heading = Reminder

#text =

body = Don't forget me this weekend!

#text =

In the example above you see that there are empty text nodes between each element.

When XML generates, it often contains white-spaces between the nodes. The XML DOM parser treats these as ordinary elements, and if you are not aware of them, they sometimes cause problems.

If you want to learn more about the XML DOM, please visit our XML tutorial.

PHP XML Expat Parser

PHP XML Expat Parser

The built-in XML Expat Parser makes it possible to process XML documents in PHP.

The XML Expat Parser

The Expat parser is an event-based parser.

Look at the following XML fraction:

<from>Jani</from>

An event-based parser reports the XML above as a series of three events:

Start element: from

Start CDATA section, value: Jani

Close element: from

The XML Expat Parser functions are part of the PHP core. There is no installation needed to use these functions.

The XML File

The XML file "note.xml" will be used in the example below:

<?xml version="1.0" encoding="UTF-8"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

Initializing the XML Expat Parser

We want to initialize the XML Expat Parser in PHP, define some handlers for different XML events, and then parse the XML file.

Example

<?php

// Initialize the XML parser

$parser=xml_parser_create();

// Function to use at the start of an element

function start($parser,$element_name,$element_attrs) {

  switch($element_name) {

    case "NOTE":

    echo "-- Note --<br>";

    break;

    case "TO":

    echo "To: ";

    break;

    case "FROM":

    echo "From: ";

    break;

    case "HEADING":

    echo "Heading: ";

    break;

    case "BODY":

    echo "Message: ";

  }

}

// Function to use at the end of an element

function stop($parser,$element_name) {

  echo "<br>";

}

// Function to use when finding character data

function char($parser,$data) {

  echo $data;

}

// Specify element handler

xml_set_element_handler($parser,"start","stop");

// Specify data handler

xml_set_character_data_handler($parser,"char");

// Open XML file

$fp=fopen("note.xml","r");

// Read data

while ($data=fread($fp,4096)) {

  xml_parse($parser,$data,feof($fp)) or

  die (sprintf("XML Error: %s at line %d",

  xml_error_string(xml_get_error_code($parser)),

  xml_get_current_line_number($parser)));

}

// Free the XML parser

xml_parser_free($parser);

?>

Example explained:

Initialize the XML parser with the xml_parser_create() function

Create functions to use with the different event handlers

Add the xml_set_element_handler() function to specify which function will be executed when the parser encounters the opening and closing tags

Add the xml_set_character_data_handler() function to specify which function will execute when the parser encounters character data

Parse the file "note.xml" with the xml_parse() function

In case of an error, add xml_error_string() function to convert an XML error to a textual description

Call the xml_parser_free() function to release the memory allocated with the xml_parser_create() function

More PHP XML Expat Parser

For more information about the PHP Expat functions, visit our PHP XML Parser Reference.

PHP SimpleXML - Get Node/Attribute Values

PHP SimpleXML - Get Node/Attribute Values

SimpleXML is a PHP extension that allows us to easily manipulate and get XML data.

PHP SimpleXML - Get Node Values

Get the node values from the "note.xml" file:

Example

<?php

$xml=simplexml_load_file("note.xml") or die("Error: Cannot create object");

echo $xml->to . "<br>";

echo $xml->from . "<br>";

echo $xml->heading . "<br>";

echo $xml->body;

?>

The output of the code above will be:

Tove

Jani

Reminder

Don't forget me this weekend!

Another XML File

Assume we have an XML file called "books.xml", that looks like this:

<?xml version="1.0" encoding="utf-8"?>

<bookstore>

  <book category="COOKING">

    <title lang="en">Everyday Italian</title>

    <author>Giada De Laurentiis</author>

    <year>2005</year>

    <price>30.00</price>

  </book>

  <book category="CHILDREN">

    <title lang="en">Harry Potter</title>

    <author>J K. Rowling</author>

    <year>2005</year>

    <price>29.99</price>

  </book>

  <book category="WEB">

    <title lang="en-us">XQuery Kick Start</title>

    <author>James McGovern</author>

    <year>2003</year>

    <price>49.99</price>

  </book>

  <book category="WEB">

    <title lang="en-us">Learning XML</title>

    <author>Erik T. Ray</author>

    <year>2003</year>

    <price>39.95</price>

  </book>

</bookstore>

PHP SimpleXML - Get Node Values of Specific Elements

The following example gets the node value of the <title> element in the first and second <book> elements in the "books.xml" file:

Example

<?php

$xml=simplexml_load_file("books.xml") or die("Error: Cannot create object");

echo $xml->book[0]->title . "<br>";

echo $xml->book[1]->title;

?>

The output of the code above will be:

Everyday Italian

Harry Potter

PHP SimpleXML - Get Node Values - Loop

The following example loops through all the <book> elements in the "books.xml" file, and gets the node values of the <title>, <author>, <year>, and <price> elements:

Example

<?php

$xml=simplexml_load_file("books.xml") or die("Error: Cannot create object");

foreach($xml->children() as $books) {

    echo $books->title . ", ";

    echo $books->author . ", ";

    echo $books->year . ", ";

    echo $books->price . "<br>";

}

?>

The output of the code above will be:

Everyday Italian, Giada De Laurentiis, 2005, 30.00

Harry Potter, J K. Rowling, 2005, 29.99

XQuery Kick Start, James McGovern, 2003, 49.99

Learning XML, Erik T. Ray, 2003, 39.95

PHP SimpleXML - Get Attribute Values

The following example gets the attribute value of the "category" attribute of the first <book> element and the attribute value of the "lang" attribute of the <title> element in the second <book> element:

Example

<?php

$xml=simplexml_load_file("books.xml") or die("Error: Cannot create object");

echo $xml->book[0]['category'] . "<br>";

echo $xml->book[1]->title['lang'];

?>

The output of the code above will be:

COOKING

en

PHP SimpleXML - Get Attribute Values - Loop

The following example gets the attribute values of the <title> elements in the "books.xml" file:

Example

<?php

$xml=simplexml_load_file("books.xml") or die("Error: Cannot create object");

foreach($xml->children() as $books) {

    echo $books->title['lang'];

    echo "<br>";

}

?>

The output of the code above will be:

en

en

en-us

en-us

More PHP SimpleXML

For more information about the PHP SimpleXML functions, visit our PHP SimpleXML Reference.