AJAX can be used to return database information in XML.
AJAX Database to XML instance (test Note: the instance feature is not implemented)
In the following AJAX example, we will show how the Web page reads information from the MySQL database, transforms the data into an XML document, and uses the document to display the information in different places.
This example is very similar to the example of "PHP AJAX Database" in the previous section, but there is a big difference: In this case, we get the data in XML form from the PHP page using the Responsexml function.
Receiving an XML document as a response gives us the ability to update multiple locations of the page, rather than just receiving a PHP output and displaying it.
In this example, we will use the information received from the database to update multiple elements.
Select a name in the drop-down list select a user:peter Griffin Lois Griffin Joseph Swanson Glenn Quagmire
This column consists of four elements:
MySQL database Simple HTML form JavaScript PHP page
Database
The database that will be used in this example looks something 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 |
HTML form
The example above contains a simple HTML form and a link to JavaScript:
Example explanation-an HTML form HTML form is a drop-down list with the value of the Name property of "users", and the value of the option corresponds to the ID field of the database. There are several Elements, which are used as placeholders for the different values we receive when the user chooses a specific option, the function "Showuser ()" executes. Execution of the function is triggered by the "onchange" event
In other words, whenever the user changes the value in the drop-down list, the function Showuser () executes and outputs the result in the specified element.
Javascript
This is the JavaScript code stored in the file "Responsexml.js":
var xmlhttpfunction showuser (str) {xmlhttp=getxmlhttpobject () if (xmlhttp==null) {alert ("Browser does not support HT TP Request ") return} var url=" responsexml.php "url=url+"? q= "+str url=url+" &sid= "+math.random () Xmlhttp.onreadysta Techange=statechanged Xmlhttp.open ("GET", url,true) xmlhttp.send (null)}function statechanged () {if ( xmlhttp.readystate==4 | | xmlhttp.readystate== "complete") {Xmldoc=xmlhttp.responsexml; document.getElementById ("FirstName"). innerhtml= Xmldoc.getelementsbytagname ("FirstName") [0].childnodes[0].nodevalue; document.getElementById ("LastName"). Innerhtml= xmldoc.getelementsbytagname ("LastName") [0].childnodes[0]. NodeValue; document.getElementById ("Job"). Innerhtml= xmldoc.getelementsbytagname ("job") [0].childnodes[0].nodevalue; document.getElementById ("Age_text"). Innerhtml= "Age:"; document.getElementById ("Age"). Innerhtml= xmldoc.getelementsbytagname ("Age") [0].childnodes[0].nodevalue; document.getElementById ("Hometown_text"). Innerhtml= "
From: "; document.getElementById ("Hometown"). Innerhtml= xmldoc.getelementsbytagname ("Hometown") [0].childNodes[0]. NodeValue; }}function Getxmlhttpobject () {var objxmlhttp=null if (window). XMLHttpRequest) {objxmlhttp=new XMLHttpRequest ()} else if (window. ActiveXObject) {objxmlhttp=new ActiveXObject ("Microsoft.XMLHTTP")} Return objXmlHttp}
Example Explanation:
The Showuser () and Getxmlhttpobject functions are the same as those in the section on PHP and AJAX MySQL db instances. You can refer to the relevant explanations.
StateChanged () function
If you select an item in the drop-down list, the function executes:
By using the Responsexml function, the "xmldoc" variable is defined as an XML document that retrieves data from the XML document, placing them in the correct "span" element
PHP page
This server page, called by JavaScript, is a simple php file called "responsexml.php".
This page is written by PHP and uses the MySQL database.
The code runs a SQL query against the database and returns the results as an XML document:
'; while ($row = Mysql_fetch_array ($result)) {echo "
". $row [' FirstName ']. "
"; echo "
". $row [' LastName ']. "
"; echo "". $row [' Age ']. ""; echo "
". $row [' Hometown ']. "
"; echo "
". $row [' Job ']. "
"; }echo "
"; mysql_close ($con);? >
Example Explanation:
When a query is delivered to a PHP page from JavaScript, it happens:
PHP document Content-type is set to "Text/xml" PHP document is set to "No-cache" to prevent the cache with HTML page data sent to set $q variable PHP open connection with the MySQL server found with the specified ID " User "outputs data in an XML document